[{"data":1,"prerenderedAt":60},["ShallowReactive",2],{"\u002Fapi\u002Fpage\u002Fskills\u002Fsumi-react\u002Freact-performance":3,"PageBody_RG1EWmLY73rGiYAvnEtC3jmzs6Xm8I48mImCDnKzP0":52},{"title":4,"description":5,"plugin":6,"kind":7,"references":8,"source":9,"heading":10,"toc":11,"locale":51},"react-performance","Performance for React\u002FNext.js apps against Core Web Vitals (LCP, INP, CLS) - client bundle discipline, small client boundaries, dynamic import, next\u002Fimage, next\u002Ffont, next\u002Fscript and third-party cost, hydration cost, list virtualization, INP-friendly event handling (useTransition, yielding), measuring with React Profiler, Performance panel and web-vitals. Use when a page feels slow, Lighthouse\u002FCrUX flags LCP\u002FINP\u002FCLS, bundles grow, adding images\u002Ffonts\u002Fanalytics\u002Fembeds, rendering long lists, or reviewing *.tsx, next.config.*, app\u002F**\u002Flayout.tsx and package.json dependency additions.","sumi-react","skill",1,"plugins\u002Fsumi-react\u002Fskills\u002Freact-performance\u002FSKILL.md","React \u002F Next.js performance",[12,15,18,21,24,27,30,33,36,39,42,45,48],{"id":13,"text":14},"principles","Principles",{"id":16,"text":17},"bundle-discipline","Bundle discipline",{"id":19,"text":20},"images-next-image","Images (next\u002Fimage)",{"id":22,"text":23},"fonts-next-font","Fonts (next\u002Ffont)",{"id":25,"text":26},"third-party-scripts","Third-party scripts",{"id":28,"text":29},"hydration-cost","Hydration cost",{"id":31,"text":32},"inp-responsive-interactions","INP: responsive interactions",{"id":34,"text":35},"long-lists","Long lists",{"id":37,"text":38},"rendering-cost","Rendering cost",{"id":40,"text":41},"caching-as-performance","Caching as performance",{"id":43,"text":44},"ai-slop-tells","AI slop tells",{"id":46,"text":47},"done-checklist","Done checklist",{"id":49,"text":50},"measuring-react-next-js-performance","Measuring React\u002FNext.js performance","en",["Island",53],{"key":54,"result":55},"PageBody_RG1EWmLY73rGiYAvnEtC3jmzs6Xm8I48mImCDnKzP0",{"head":56},{"style":57},[58],{"innerHTML":59},".prose[data-v-1545ba8e]{max-width:var(--measure-prose)}.prose[data-v-1545ba8e] h2{margin-block:var(--space-8) var(--space-4)}.prose[data-v-1545ba8e] h3{margin-block:var(--space-6) var(--space-3)}.prose[data-v-1545ba8e] h4{margin-block:var(--space-5) var(--space-3);font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-small);text-transform:uppercase;letter-spacing:var(--text-label-ls);color:var(--color-text-muted)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] p,.prose[data-v-1545ba8e] ul{margin-block-end:var(--space-4)}.prose[data-v-1545ba8e] li{margin-block-end:var(--space-2)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] ul{padding-inline-start:var(--space-5)}.prose[data-v-1545ba8e] li:has(.task-box){list-style:none}.prose[data-v-1545ba8e] .task-box{width:.8em;height:.8em;border:var(--border-width) solid var(--color-border);vertical-align:baseline;margin-inline-end:var(--space-2);display:inline-block}.prose[data-v-1545ba8e] code{padding:1px var(--space-1);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] pre{padding:var(--space-4);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border);margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] pre code{background:0 0;border:0;padding:0}.prose[data-v-1545ba8e] .table-scroll{max-width:none;margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] table{border-collapse:collapse;width:100%;min-width:32rem;font-size:var(--text-small);line-height:var(--text-small-lh)}.prose[data-v-1545ba8e] td,.prose[data-v-1545ba8e] th{padding:var(--space-3) var(--space-4);text-align:start;vertical-align:top;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] th{font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-label);letter-spacing:var(--text-label-ls);text-transform:uppercase;color:var(--color-text-muted);border-block-end:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] blockquote{margin:0 0 var(--space-5);border-inline-start:var(--seam-width) solid var(--color-seam);color:var(--color-text-muted);padding-inline-start:var(--space-4)}.prose[data-v-1545ba8e] hr{margin-block:var(--space-7);border:0;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] pre,.prose[data-v-1545ba8e] table{max-width:none}",1791464219197]