[{"data":1,"prerenderedAt":772},["ShallowReactive",2],{"guide-critical-css-inlining":3},{"id":4,"title":5,"body":6,"date":763,"description":764,"extension":765,"meta":766,"navigation":767,"path":768,"readingTime":257,"seo":769,"stem":770,"__hash__":771},"guides\u002Fguides\u002Fcritical-css-inlining.md","Critical CSS Inlining Guide",{"type":7,"value":8,"toc":752},"minimark",[9,14,23,29,33,36,101,104,131,134,138,141,400,403,424,428,431,487,498,516,558,561,565,568,598,601,605,608,630,633,682,685,689,710,714,738,742,749],[10,11,13],"h2",{"id":12},"what-is-critical-css","What Is Critical CSS?",[15,16,17,18,22],"p",{},"When a browser loads a page, it must download and parse every linked CSS file before it can render any content. A stylesheet in the ",[19,20,21],"code",{},"\u003Chead>"," blocks rendering — even if 90% of its rules apply to elements below the fold. This delay is visible as a blank white screen, especially on slow connections.",[15,24,25,26,28],{},"Critical CSS is the subset of styles needed to render the above-the-fold content — everything visible in the viewport on initial load without scrolling. By inlining this CSS directly in the HTML ",[19,27,21],{}," and loading the remaining stylesheet asynchronously, you eliminate the render-blocking delay.",[10,30,32],{"id":31},"the-render-blocking-problem","The Render-Blocking Problem",[15,34,35],{},"A typical page loads CSS like this:",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-html shiki shiki-themes github-light github-dark","\u003Chead>\n  \u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\">\n\u003C\u002Fhead>\n","html","",[19,44,45,61,91],{"__ignoreMap":42},[46,47,50,54,58],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sVt8B","\u003C",[46,55,57],{"class":56},"s9eBZ","head",[46,59,60],{"class":52},">\n",[46,62,64,67,70,74,77,81,84,86,89],{"class":48,"line":63},2,[46,65,66],{"class":52},"  \u003C",[46,68,69],{"class":56},"link",[46,71,73],{"class":72},"sScJk"," rel",[46,75,76],{"class":52},"=",[46,78,80],{"class":79},"sZZnC","\"stylesheet\"",[46,82,83],{"class":72}," href",[46,85,76],{"class":52},[46,87,88],{"class":79},"\"\u002Fstyles.css\"",[46,90,60],{"class":52},[46,92,94,97,99],{"class":48,"line":93},3,[46,95,96],{"class":52},"\u003C\u002F",[46,98,57],{"class":56},[46,100,60],{"class":52},[15,102,103],{},"The browser timeline looks like:",[105,106,107,111,118,125,128],"ol",{},[108,109,110],"li",{},"Download HTML — wait for network",[108,112,113,114,117],{},"Parse HTML, find ",[19,115,116],{},"\u003Clink>"," — stop rendering",[108,119,120,121,124],{},"Download ",[19,122,123],{},"styles.css"," — wait for network again",[108,126,127],{},"Parse CSS, build CSSOM",[108,129,130],{},"Combine with DOM, render first pixel",[15,132,133],{},"Steps 2–4 add latency proportional to your CSS file size and network speed. A 200KB stylesheet on a 3G connection adds over one second of blank screen.",[10,135,137],{"id":136},"how-critical-css-inlining-works","How Critical CSS Inlining Works",[15,139,140],{},"The optimized approach replaces the blocking link with inline styles and an asynchronous load:",[37,142,144],{"className":39,"code":143,"language":41,"meta":42,"style":42},"\u003Chead>\n  \u003Cstyle>\n    \u002F* Critical CSS: only above-the-fold rules *\u002F\n    body { font-family: system-ui, sans-serif; margin: 0; }\n    .hero { background: #1e1b4b; color: white; padding: 4rem 2rem; }\n    .nav { display: flex; justify-content: space-between; padding: 1rem; }\n  \u003C\u002Fstyle>\n  \u003Clink rel=\"preload\" href=\"\u002Fstyles.css\" as=\"style\"\n        onload=\"this.rel='stylesheet'\">\n  \u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\">\u003C\u002Fnoscript>\n\u003C\u002Fhead>\n",[19,145,146,154,163,169,208,255,294,304,332,359,391],{"__ignoreMap":42},[46,147,148,150,152],{"class":48,"line":49},[46,149,53],{"class":52},[46,151,57],{"class":56},[46,153,60],{"class":52},[46,155,156,158,161],{"class":48,"line":63},[46,157,66],{"class":52},[46,159,160],{"class":56},"style",[46,162,60],{"class":52},[46,164,165],{"class":48,"line":93},[46,166,168],{"class":167},"sJ8bj","    \u002F* Critical CSS: only above-the-fold rules *\u002F\n",[46,170,172,175,178,182,185,188,191,194,197,200,202,205],{"class":48,"line":171},4,[46,173,174],{"class":56},"    body",[46,176,177],{"class":52}," { ",[46,179,181],{"class":180},"sj4cs","font-family",[46,183,184],{"class":52},": ",[46,186,187],{"class":180},"system-ui",[46,189,190],{"class":52},", ",[46,192,193],{"class":180},"sans-serif",[46,195,196],{"class":52},"; ",[46,198,199],{"class":180},"margin",[46,201,184],{"class":52},[46,203,204],{"class":180},"0",[46,206,207],{"class":52},"; }\n",[46,209,211,214,216,219,221,224,226,229,231,234,236,239,241,244,248,251,253],{"class":48,"line":210},5,[46,212,213],{"class":72},"    .hero",[46,215,177],{"class":52},[46,217,218],{"class":180},"background",[46,220,184],{"class":52},[46,222,223],{"class":180},"#1e1b4b",[46,225,196],{"class":52},[46,227,228],{"class":180},"color",[46,230,184],{"class":52},[46,232,233],{"class":180},"white",[46,235,196],{"class":52},[46,237,238],{"class":180},"padding",[46,240,184],{"class":52},[46,242,243],{"class":180},"4",[46,245,247],{"class":246},"szBVR","rem",[46,249,250],{"class":180}," 2",[46,252,247],{"class":246},[46,254,207],{"class":52},[46,256,258,261,263,266,268,271,273,276,278,281,283,285,287,290,292],{"class":48,"line":257},6,[46,259,260],{"class":72},"    .nav",[46,262,177],{"class":52},[46,264,265],{"class":180},"display",[46,267,184],{"class":52},[46,269,270],{"class":180},"flex",[46,272,196],{"class":52},[46,274,275],{"class":180},"justify-content",[46,277,184],{"class":52},[46,279,280],{"class":180},"space-between",[46,282,196],{"class":52},[46,284,238],{"class":180},[46,286,184],{"class":52},[46,288,289],{"class":180},"1",[46,291,247],{"class":246},[46,293,207],{"class":52},[46,295,297,300,302],{"class":48,"line":296},7,[46,298,299],{"class":52},"  \u003C\u002F",[46,301,160],{"class":56},[46,303,60],{"class":52},[46,305,307,309,311,313,315,318,320,322,324,327,329],{"class":48,"line":306},8,[46,308,66],{"class":52},[46,310,69],{"class":56},[46,312,73],{"class":72},[46,314,76],{"class":52},[46,316,317],{"class":79},"\"preload\"",[46,319,83],{"class":72},[46,321,76],{"class":52},[46,323,88],{"class":79},[46,325,326],{"class":72}," as",[46,328,76],{"class":52},[46,330,331],{"class":79},"\"style\"\n",[46,333,335,338,340,343,346,349,352,354,357],{"class":48,"line":334},9,[46,336,337],{"class":72},"        onload",[46,339,76],{"class":52},[46,341,342],{"class":79},"\"",[46,344,345],{"class":180},"this",[46,347,348],{"class":79},".",[46,350,351],{"class":52},"rel",[46,353,76],{"class":246},[46,355,356],{"class":79},"'stylesheet'\"",[46,358,60],{"class":52},[46,360,362,364,367,370,372,374,376,378,380,382,384,387,389],{"class":48,"line":361},10,[46,363,66],{"class":52},[46,365,366],{"class":56},"noscript",[46,368,369],{"class":52},">\u003C",[46,371,69],{"class":56},[46,373,73],{"class":72},[46,375,76],{"class":52},[46,377,80],{"class":79},[46,379,83],{"class":72},[46,381,76],{"class":52},[46,383,88],{"class":79},[46,385,386],{"class":52},">\u003C\u002F",[46,388,366],{"class":56},[46,390,60],{"class":52},[46,392,394,396,398],{"class":48,"line":393},11,[46,395,96],{"class":52},[46,397,57],{"class":56},[46,399,60],{"class":52},[15,401,402],{},"Now the browser:",[105,404,405,408,415,421],{},[108,406,407],{},"Downloads HTML",[108,409,410,411,414],{},"Parses inline ",[19,412,413],{},"\u003Cstyle>"," — renders first pixel immediately",[108,416,417,418,420],{},"Preloads ",[19,419,123],{}," in the background",[108,422,423],{},"Applies full stylesheet when ready — no visible flash if critical CSS was accurate",[10,425,427],{"id":426},"extracting-critical-css","Extracting Critical CSS",[15,429,430],{},"Manual extraction is impractical for real projects. Use one of these tools:",[432,433,434,450],"table",{},[435,436,437],"thead",{},[438,439,440,444,447],"tr",{},[441,442,443],"th",{},"Tool",[441,445,446],{},"How It Works",[441,448,449],{},"Best For",[451,452,453,465,476],"tbody",{},[438,454,455,459,462],{},[456,457,458],"td",{},"Critical",[456,460,461],{},"Headless browser renders the page, captures used CSS",[456,463,464],{},"Static sites, SSG builds",[438,466,467,470,473],{},[456,468,469],{},"Penthouse",[456,471,472],{},"Opens URL at specific viewport, extracts matching rules",[456,474,475],{},"Multi-viewport extraction",[438,477,478,481,484],{},[456,479,480],{},"critters",[456,482,483],{},"Webpack plugin, integrates into build pipeline",[456,485,486],{},"Nuxt, Next.js, Vite projects",[15,488,489,490,493,494,497],{},"For Nuxt projects, the ",[19,491,492],{},"nuxt-critical"," module automates extraction during ",[19,495,496],{},"generate",":",[37,499,503],{"className":500,"code":501,"language":502,"meta":42,"style":42},"language-bash shiki shiki-themes github-light github-dark","npm install nuxt-critical\n","bash",[19,504,505],{"__ignoreMap":42},[46,506,507,510,513],{"class":48,"line":49},[46,508,509],{"class":72},"npm",[46,511,512],{"class":79}," install",[46,514,515],{"class":79}," nuxt-critical\n",[37,517,521],{"className":518,"code":519,"language":520,"meta":42,"style":42},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-critical'],\n})\n","typescript",[19,522,523,528,542,553],{"__ignoreMap":42},[46,524,525],{"class":48,"line":49},[46,526,527],{"class":167},"\u002F\u002F nuxt.config.ts\n",[46,529,530,533,536,539],{"class":48,"line":63},[46,531,532],{"class":246},"export",[46,534,535],{"class":246}," default",[46,537,538],{"class":72}," defineNuxtConfig",[46,540,541],{"class":52},"({\n",[46,543,544,547,550],{"class":48,"line":93},[46,545,546],{"class":52},"  modules: [",[46,548,549],{"class":79},"'nuxt-critical'",[46,551,552],{"class":52},"],\n",[46,554,555],{"class":48,"line":171},[46,556,557],{"class":52},"})\n",[15,559,560],{},"It extracts critical CSS per route during SSG and inlines it automatically.",[10,562,564],{"id":563},"avoiding-the-flash-of-unstyled-content","Avoiding the Flash of Unstyled Content",[15,566,567],{},"If your critical CSS misses rules for above-the-fold elements, users see a brief flash of unstyled content (FOUC) before the full stylesheet loads. To minimize this:",[569,570,571,574,592,595],"ul",{},[108,572,573],{},"Extract critical CSS at the most common viewport (1366×768 or 1440×900).",[108,575,576,577,190,580,583,584,190,587,190,589,348],{},"Include base typography — ",[19,578,579],{},"body",[19,581,582],{},"h1","–",[19,585,586],{},"h6",[19,588,15],{},[19,590,591],{},"a",[108,593,594],{},"Include layout containers visible without scrolling.",[108,596,597],{},"Include any above-the-fold images or backgrounds referenced in CSS.",[15,599,600],{},"A good rule of thumb: if an element occupies space above the fold, its layout and typography styles belong in critical CSS.",[10,602,604],{"id":603},"measuring-the-impact","Measuring the Impact",[15,606,607],{},"Use Lighthouse or Chrome DevTools to measure First Contentful Paint (FCP) before and after inlining:",[37,609,611],{"className":500,"code":610,"language":502,"meta":42,"style":42},"npx lighthouse https:\u002F\u002Fyour-site.com --view --output=html\n",[19,612,613],{"__ignoreMap":42},[46,614,615,618,621,624,627],{"class":48,"line":49},[46,616,617],{"class":72},"npx",[46,619,620],{"class":79}," lighthouse",[46,622,623],{"class":79}," https:\u002F\u002Fyour-site.com",[46,625,626],{"class":180}," --view",[46,628,629],{"class":180}," --output=html\n",[15,631,632],{},"Typical improvements:",[432,634,635,648],{},[435,636,637],{},[438,638,639,642,645],{},[441,640,641],{},"Metric",[441,643,644],{},"Before Inlining",[441,646,647],{},"After Inlining",[451,649,650,661,671],{},[438,651,652,655,658],{},[456,653,654],{},"FCP",[456,656,657],{},"2.4s",[456,659,660],{},"0.9s",[438,662,663,666,669],{},[456,664,665],{},"Render-blocking resources",[456,667,668],{},"2 CSS files",[456,670,204],{},[438,672,673,676,679],{},[456,674,675],{},"Largest Contentful Paint",[456,677,678],{},"3.1s",[456,680,681],{},"1.8s",[15,683,684],{},"Results vary by site, but FCP improvements of 40–60% are common when moving from a single large blocking stylesheet to critical CSS inlining.",[10,686,688],{"id":687},"limitations-and-trade-offs","Limitations and Trade-offs",[569,690,691,698,704],{},[108,692,693,697],{},[694,695,696],"strong",{},"HTML size increases"," — inline CSS adds kilobytes to every HTML response and cannot be cached separately. Keep critical CSS under 14KB (the typical TCP window size) for maximum benefit.",[108,699,700,703],{},[694,701,702],{},"Maintenance burden"," — critical CSS must be re-extracted when above-the-fold design changes. Automate this in your build pipeline.",[108,705,706,709],{},[694,707,708],{},"Not needed for HTTP\u002F2 multiplexed small files"," — if your architecture already splits CSS into many small, cached chunks, the render-blocking delay is minimal and inlining provides less benefit.",[10,711,713],{"id":712},"key-takeaways","Key Takeaways",[569,715,716,719,722,729,732,735],{},[108,717,718],{},"Critical CSS is the minimum CSS needed to render above-the-fold content.",[108,720,721],{},"Inlining critical CSS eliminates render-blocking stylesheet delays.",[108,723,724,725,728],{},"Load remaining CSS asynchronously via ",[19,726,727],{},"rel=\"preload\""," with a stylesheet fallback.",[108,730,731],{},"Automate extraction with tools like Critical, Penthouse, or nuxt-critical.",[108,733,734],{},"Keep inline critical CSS under 14KB to stay within the initial TCP window.",[108,736,737],{},"Re-extract critical CSS whenever your design changes — integrate into your build pipeline.",[10,739,741],{"id":740},"try-it-yourself","Try It Yourself",[15,743,744,745,348],{},"Shrink your CSS payload by minifying your stylesheets with the ",[591,746,748],{"href":747},"\u002Ftools\u002Fcss-minifier","CSS Minifier",[160,750,751],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":42,"searchDepth":63,"depth":63,"links":753},[754,755,756,757,758,759,760,761,762],{"id":12,"depth":63,"text":13},{"id":31,"depth":63,"text":32},{"id":136,"depth":63,"text":137},{"id":426,"depth":63,"text":427},{"id":563,"depth":63,"text":564},{"id":603,"depth":63,"text":604},{"id":687,"depth":63,"text":688},{"id":712,"depth":63,"text":713},{"id":740,"depth":63,"text":741},"2026-05-28","Extract and inline above-the-fold CSS to eliminate render-blocking stylesheets.","md",{"immutable":767},true,"\u002Fguides\u002Fcritical-css-inlining",{"title":5,"description":764},"guides\u002Fcritical-css-inlining","q0uAnvn-n9Ue_ruuOthGPJxHn3MojrBNkdAGCeFc7BE",1780401332533]