[{"data":1,"prerenderedAt":868},["ShallowReactive",2],{"guide-css-critical-path-optimization":3},{"id":4,"title":5,"body":6,"date":860,"description":861,"extension":862,"meta":863,"navigation":140,"path":864,"readingTime":411,"seo":865,"stem":866,"__hash__":867},"guides\u002Fguides\u002Fcss-critical-path-optimization.md","CSS Critical Path Optimization: Render-Blocking CSS Fix",{"type":7,"value":8,"toc":840},"minimark",[9,14,18,26,30,33,43,46,52,55,59,64,67,70,74,89,168,171,248,252,258,429,432,436,439,443,544,562,566,621,630,634,640,644,647,650,654,657,718,721,725,762,766,800,804,825,829,837],[10,11,13],"h2",{"id":12},"what-is-critical-css","What Is Critical CSS?",[15,16,17],"p",{},"When a browser loads a page, it must parse all referenced CSS before it can render anything to the screen. CSS is render-blocking by default. If your stylesheet is 200 KB, the browser downloads and parses all 200 KB before showing a single pixel — even though only 5 KB of those styles apply to the content visible in the initial viewport.",[15,19,20,21,25],{},"Critical CSS (also called \"above-the-fold CSS\") is the subset of styles needed to render the visible portion of the page on first load. By inlining this small subset in the HTML ",[22,23,24],"code",{},"\u003Chead>"," and deferred-loading the rest, you eliminate the render-blocking bottleneck.",[10,27,29],{"id":28},"the-rendering-waterfall","The Rendering Waterfall",[15,31,32],{},"Without optimization:",[34,35,40],"pre",{"className":36,"code":38,"language":39},[37],"language-text","HTML download → CSS download → CSS parse → First Paint → Content visible\n              ←_______________ render-blocking _______________→\n","text",[22,41,38],{"__ignoreMap":42},"",[15,44,45],{},"With critical CSS:",[34,47,50],{"className":48,"code":49,"language":39},[37],"HTML download (includes inline CSS) → CSS parse → First Paint → Content visible\n                                                 ↓\n                                    Full stylesheet downloads (async)\n",[22,51,49],{"__ignoreMap":42},[15,53,54],{},"The first paint happens much sooner because the browser doesn't wait for the full stylesheet.",[10,56,58],{"id":57},"step-1-identify-critical-css","Step 1: Identify Critical CSS",[60,61,63],"h3",{"id":62},"manual-identification","Manual Identification",[15,65,66],{},"Open Chrome DevTools, navigate to your page with a slow network throttling profile (Fast 3G), and note which elements are visible before any scrolling. The styles for these elements constitute your critical CSS.",[15,68,69],{},"Drawbacks: labor-intensive and error-prone — you'll miss styles triggered by hover, focus, or media queries.",[60,71,73],{"id":72},"automated-extraction","Automated Extraction",[15,75,76,77,80,81,84,85,88],{},"Tools like ",[22,78,79],{},"critical",", ",[22,82,83],{},"Critters",", and ",[22,86,87],{},"Penthouse"," automate extraction:",[34,90,94],{"className":91,"code":92,"language":93,"meta":42,"style":42},"language-bash shiki shiki-themes github-light github-dark","# Using critical (Node.js)\nnpx critical https:\u002F\u002Fexample.com --inline --base .\u002Fdist --target index.html\n\n# Using Penthouse\nnpx penthouse https:\u002F\u002Fexample.com styles.css > critical.css\n","bash",[22,95,96,105,135,142,148],{"__ignoreMap":42},[97,98,101],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"sJ8bj","# Using critical (Node.js)\n",[97,106,108,112,116,119,123,126,129,132],{"class":99,"line":107},2,[97,109,111],{"class":110},"sScJk","npx",[97,113,115],{"class":114},"sZZnC"," critical",[97,117,118],{"class":114}," https:\u002F\u002Fexample.com",[97,120,122],{"class":121},"sj4cs"," --inline",[97,124,125],{"class":121}," --base",[97,127,128],{"class":114}," .\u002Fdist",[97,130,131],{"class":121}," --target",[97,133,134],{"class":114}," index.html\n",[97,136,138],{"class":99,"line":137},3,[97,139,141],{"emptyLinePlaceholder":140},true,"\n",[97,143,145],{"class":99,"line":144},4,[97,146,147],{"class":103},"# Using Penthouse\n",[97,149,151,153,156,158,161,165],{"class":99,"line":150},5,[97,152,111],{"class":110},[97,154,155],{"class":114}," penthouse",[97,157,118],{"class":114},[97,159,160],{"class":114}," styles.css",[97,162,164],{"class":163},"szBVR"," >",[97,166,167],{"class":114}," critical.css\n",[15,169,170],{},"For build-tool integration:",[172,173,174,190],"table",{},[175,176,177],"thead",{},[178,179,180,184,187],"tr",{},[181,182,183],"th",{},"Tool",[181,185,186],{},"Integration",[181,188,189],{},"How It Works",[191,192,193,210,223,236],"tbody",{},[178,194,195,200,207],{},[196,197,198],"td",{},[22,199,83],{},[196,201,202,203,206],{},"Webpack (via ",[22,204,205],{},"critters-webpack-plugin",")",[196,208,209],{},"Inlines critical CSS during build",[178,211,212,217,220],{},[196,213,214],{},[22,215,216],{},"vite-plugin-critical",[196,218,219],{},"Vite",[196,221,222],{},"Extracts and inlines critical CSS for each page",[178,224,225,230,233],{},[196,226,227],{},[22,228,229],{},"@nuxtjs\u002Fcritters",[196,231,232],{},"Nuxt",[196,234,235],{},"Built-in SSG critical CSS extraction",[178,237,238,242,245],{},[196,239,240],{},[22,241,79],{},[196,243,244],{},"Standalone CLI",[196,246,247],{},"Generates critical CSS for any URL",[10,249,251],{"id":250},"step-2-inline-critical-css","Step 2: Inline Critical CSS",[15,253,254,255,257],{},"Add the extracted critical CSS directly in the HTML ",[22,256,24],{},":",[34,259,263],{"className":260,"code":261,"language":262,"meta":42,"style":42},"language-html shiki shiki-themes github-light github-dark","\u003Chead>\n  \u003Cstyle>\n    \u002F* Critical CSS — styles needed for initial viewport *\u002F\n    body { margin: 0; font-family: system-ui, sans-serif; }\n    .hero { min-height: 100vh; background: #1E293B; color: white; }\n    .nav { position: sticky; top: 0; padding: 1rem; }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n","html",[22,264,265,278,288,293,329,369,409,419],{"__ignoreMap":42},[97,266,267,271,275],{"class":99,"line":100},[97,268,270],{"class":269},"sVt8B","\u003C",[97,272,274],{"class":273},"s9eBZ","head",[97,276,277],{"class":269},">\n",[97,279,280,283,286],{"class":99,"line":107},[97,281,282],{"class":269},"  \u003C",[97,284,285],{"class":273},"style",[97,287,277],{"class":269},[97,289,290],{"class":99,"line":137},[97,291,292],{"class":103},"    \u002F* Critical CSS — styles needed for initial viewport *\u002F\n",[97,294,295,298,301,304,307,310,313,316,318,321,323,326],{"class":99,"line":144},[97,296,297],{"class":273},"    body",[97,299,300],{"class":269}," { ",[97,302,303],{"class":121},"margin",[97,305,306],{"class":269},": ",[97,308,309],{"class":121},"0",[97,311,312],{"class":269},"; ",[97,314,315],{"class":121},"font-family",[97,317,306],{"class":269},[97,319,320],{"class":121},"system-ui",[97,322,80],{"class":269},[97,324,325],{"class":121},"sans-serif",[97,327,328],{"class":269},"; }\n",[97,330,331,334,336,339,341,344,347,349,352,354,357,359,362,364,367],{"class":99,"line":150},[97,332,333],{"class":110},"    .hero",[97,335,300],{"class":269},[97,337,338],{"class":121},"min-height",[97,340,306],{"class":269},[97,342,343],{"class":121},"100",[97,345,346],{"class":163},"vh",[97,348,312],{"class":269},[97,350,351],{"class":121},"background",[97,353,306],{"class":269},[97,355,356],{"class":121},"#1E293B",[97,358,312],{"class":269},[97,360,361],{"class":121},"color",[97,363,306],{"class":269},[97,365,366],{"class":121},"white",[97,368,328],{"class":269},[97,370,372,375,377,380,382,385,387,390,392,394,396,399,401,404,407],{"class":99,"line":371},6,[97,373,374],{"class":110},"    .nav",[97,376,300],{"class":269},[97,378,379],{"class":121},"position",[97,381,306],{"class":269},[97,383,384],{"class":121},"sticky",[97,386,312],{"class":269},[97,388,389],{"class":121},"top",[97,391,306],{"class":269},[97,393,309],{"class":121},[97,395,312],{"class":269},[97,397,398],{"class":121},"padding",[97,400,306],{"class":269},[97,402,403],{"class":121},"1",[97,405,406],{"class":163},"rem",[97,408,328],{"class":269},[97,410,412,415,417],{"class":99,"line":411},7,[97,413,414],{"class":269},"  \u003C\u002F",[97,416,285],{"class":273},[97,418,277],{"class":269},[97,420,422,425,427],{"class":99,"line":421},8,[97,423,424],{"class":269},"\u003C\u002F",[97,426,274],{"class":273},[97,428,277],{"class":269},[15,430,431],{},"The browser parses inline styles immediately — no external request needed.",[10,433,435],{"id":434},"step-3-load-remaining-css-asynchronously","Step 3: Load Remaining CSS Asynchronously",[15,437,438],{},"The full stylesheet must still load, but it shouldn't block rendering. Use one of these patterns:",[60,440,442],{"id":441},"pattern-1-media-attribute-switch","Pattern 1: media Attribute Switch",[34,444,446],{"className":260,"code":445,"language":262,"meta":42,"style":42},"\u003Clink rel=\"stylesheet\" href=\"\u002Fassets\u002Fcss\u002Fmain.css\"\n      media=\"print\" onload=\"this.media='all'\">\n\u003Cnoscript>\n  \u003Clink rel=\"stylesheet\" href=\"\u002Fassets\u002Fcss\u002Fmain.css\">\n\u003C\u002Fnoscript>\n",[22,447,448,472,506,515,536],{"__ignoreMap":42},[97,449,450,452,455,458,461,464,467,469],{"class":99,"line":100},[97,451,270],{"class":269},[97,453,454],{"class":273},"link",[97,456,457],{"class":110}," rel",[97,459,460],{"class":269},"=",[97,462,463],{"class":114},"\"stylesheet\"",[97,465,466],{"class":110}," href",[97,468,460],{"class":269},[97,470,471],{"class":114},"\"\u002Fassets\u002Fcss\u002Fmain.css\"\n",[97,473,474,477,479,482,485,487,490,493,496,499,501,504],{"class":99,"line":107},[97,475,476],{"class":110},"      media",[97,478,460],{"class":269},[97,480,481],{"class":114},"\"print\"",[97,483,484],{"class":110}," onload",[97,486,460],{"class":269},[97,488,489],{"class":114},"\"",[97,491,492],{"class":121},"this",[97,494,495],{"class":114},".",[97,497,498],{"class":269},"media",[97,500,460],{"class":163},[97,502,503],{"class":114},"'all'\"",[97,505,277],{"class":269},[97,507,508,510,513],{"class":99,"line":137},[97,509,270],{"class":269},[97,511,512],{"class":273},"noscript",[97,514,277],{"class":269},[97,516,517,519,521,523,525,527,529,531,534],{"class":99,"line":144},[97,518,282],{"class":269},[97,520,454],{"class":273},[97,522,457],{"class":110},[97,524,460],{"class":269},[97,526,463],{"class":114},[97,528,466],{"class":110},[97,530,460],{"class":269},[97,532,533],{"class":114},"\"\u002Fassets\u002Fcss\u002Fmain.css\"",[97,535,277],{"class":269},[97,537,538,540,542],{"class":99,"line":150},[97,539,424],{"class":269},[97,541,512],{"class":273},[97,543,277],{"class":269},[15,545,546,547,550,551,554,555,557,558,561],{},"The browser treats ",[22,548,549],{},"media=\"print\""," as non-matching and loads the stylesheet asynchronously. Once loaded, the ",[22,552,553],{},"onload"," handler switches ",[22,556,498],{}," to ",[22,559,560],{},"all",", applying the styles.",[60,563,565],{"id":564},"pattern-2-relpreload","Pattern 2: rel=\"preload\"",[34,567,569],{"className":260,"code":568,"language":262,"meta":42,"style":42},"\u003Clink rel=\"preload\" href=\"\u002Fassets\u002Fcss\u002Fmain.css\" as=\"style\"\n      onload=\"this.rel='stylesheet'\">\n",[22,570,571,598],{"__ignoreMap":42},[97,572,573,575,577,579,581,584,586,588,590,593,595],{"class":99,"line":100},[97,574,270],{"class":269},[97,576,454],{"class":273},[97,578,457],{"class":110},[97,580,460],{"class":269},[97,582,583],{"class":114},"\"preload\"",[97,585,466],{"class":110},[97,587,460],{"class":269},[97,589,533],{"class":114},[97,591,592],{"class":110}," as",[97,594,460],{"class":269},[97,596,597],{"class":114},"\"style\"\n",[97,599,600,603,605,607,609,611,614,616,619],{"class":99,"line":107},[97,601,602],{"class":110},"      onload",[97,604,460],{"class":269},[97,606,489],{"class":114},[97,608,492],{"class":121},[97,610,495],{"class":114},[97,612,613],{"class":269},"rel",[97,615,460],{"class":163},[97,617,618],{"class":114},"'stylesheet'\"",[97,620,277],{"class":269},[15,622,623,624,557,626,629],{},"Preload fetches the CSS with high priority without blocking rendering. Once downloaded, JavaScript switches ",[22,625,613],{},[22,627,628],{},"stylesheet"," to apply it.",[60,631,633],{"id":632},"pattern-3-build-tool-handled","Pattern 3: Build-Tool Handled",[15,635,636,637,639],{},"Frameworks like Nuxt handle this automatically. With ",[22,638,229],{},", you configure the module and SSG output includes inlined critical CSS per page with async stylesheet loading.",[10,641,643],{"id":642},"step-4-avoid-fouc","Step 4: Avoid FOUC",[15,645,646],{},"Flash of Unstyled Content (FOUC) happens when the browser renders HTML before CSS finishes loading. Critical CSS eliminates FOUC for above-the-fold content because those styles are already inline.",[15,648,649],{},"Below-the-fold content may briefly appear unstyled until the full stylesheet loads. This is acceptable — users haven't scrolled there yet. If specific components must not flash, include their styles in the critical CSS as well.",[10,651,653],{"id":652},"measuring-impact","Measuring Impact",[15,655,656],{},"Use Lighthouse or WebPageTest to measure before and after:",[172,658,659,672],{},[175,660,661],{},[178,662,663,666,669],{},[181,664,665],{},"Metric",[181,667,668],{},"What It Measures",[181,670,671],{},"Critical CSS Impact",[191,673,674,685,696,707],{},[178,675,676,679,682],{},[196,677,678],{},"FCP",[196,680,681],{},"First Contentful Paint",[196,683,684],{},"Significant improvement",[178,686,687,690,693],{},[196,688,689],{},"LCP",[196,691,692],{},"Largest Contentful Paint",[196,694,695],{},"Moderate improvement",[178,697,698,701,704],{},[196,699,700],{},"TTI",[196,702,703],{},"Time to Interactive",[196,705,706],{},"Minor improvement",[178,708,709,712,715],{},[196,710,711],{},"CLS",[196,713,714],{},"Cumulative Layout Shift",[196,716,717],{},"Neutral (layout stays consistent)",[15,719,720],{},"A typical critical CSS optimization reduces FCP by 20–40% on pages with large stylesheets.",[10,722,724],{"id":723},"common-mistakes","Common Mistakes",[726,727,728,736,746,752],"ul",{},[729,730,731,735],"li",{},[732,733,734],"strong",{},"Inlining too much CSS"," — If your inline styles exceed 15–20 KB, you've included non-critical styles. Excessive inline CSS slows down HTML parsing.",[729,737,738,745],{},[732,739,740,741,744],{},"Forgetting ",[22,742,743],{},"\u003Cnoscript>"," fallback"," — Without it, JavaScript-disabled users never get the full stylesheet.",[729,747,748,751],{},[732,749,750],{},"Not testing different viewports"," — Critical CSS differs between mobile and desktop. Some tools extract per-viewport; make sure you cover your breakpoints.",[729,753,754,757,758,761],{},[732,755,756],{},"Missing font-face declarations"," — If critical content uses web fonts, their ",[22,759,760],{},"@font-face"," rules belong in critical CSS. Otherwise, the browser waits for the full stylesheet before discovering and downloading font files.",[10,763,765],{"id":764},"key-takeaways","Key Takeaways",[726,767,768,771,774,784,794,797],{},[729,769,770],{},"Critical CSS is the minimum styles needed to render above-the-fold content",[729,772,773],{},"Inlining critical CSS eliminates the render-blocking bottleneck for initial paint",[729,775,776,777,80,779,80,781,783],{},"Use automated tools (",[22,778,79],{},[22,780,83],{},[22,782,87],{},") to extract — manual identification misses edge cases",[729,785,786,787,789,790,793],{},"Load the full stylesheet asynchronously using ",[22,788,549],{}," switch or ",[22,791,792],{},"rel=\"preload\""," pattern",[729,795,796],{},"Keep inline critical CSS under 15–20 KB to avoid slowing HTML parsing",[729,798,799],{},"Measure impact with Lighthouse FCP scores before and after optimization",[10,801,803],{"id":802},"related-guides","Related Guides",[726,805,806,813,819],{},[729,807,808],{},[809,810,812],"a",{"href":811},"\u002Fguides\u002Fcss-minification-guide","CSS Minification Guide",[729,814,815],{},[809,816,818],{"href":817},"\u002Fguides\u002Fcss-compression-techniques","CSS Compression Techniques",[729,820,821],{},[809,822,824],{"href":823},"\u002Fguides\u002Fbuild-tool-css-minification-compared","Build Tool CSS Minification Compared",[10,826,828],{"id":827},"try-it-yourself","Try It Yourself",[15,830,831,832,836],{},"Minify your CSS and reduce stylesheet size with our free ",[809,833,835],{"href":834},"\u002Ftools\u002Fcss-minifier","CSS Minifier",". Paste your CSS, get optimized output instantly — a key step before critical CSS extraction.",[285,838,839],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 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}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 .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}",{"title":42,"searchDepth":107,"depth":107,"links":841},[842,843,844,848,849,854,855,856,857,858,859],{"id":12,"depth":107,"text":13},{"id":28,"depth":107,"text":29},{"id":57,"depth":107,"text":58,"children":845},[846,847],{"id":62,"depth":137,"text":63},{"id":72,"depth":137,"text":73},{"id":250,"depth":107,"text":251},{"id":434,"depth":107,"text":435,"children":850},[851,852,853],{"id":441,"depth":137,"text":442},{"id":564,"depth":137,"text":565},{"id":632,"depth":137,"text":633},{"id":642,"depth":107,"text":643},{"id":652,"depth":107,"text":653},{"id":723,"depth":107,"text":724},{"id":764,"depth":107,"text":765},{"id":802,"depth":107,"text":803},{"id":827,"depth":107,"text":828},"2026-05-28","Learn how to identify and optimize critical CSS — eliminate render-blocking stylesheets and speed up first contentful paint.","md",{"immutable":140},"\u002Fguides\u002Fcss-critical-path-optimization",{"title":5,"description":861},"guides\u002Fcss-critical-path-optimization","EF_IdSnWWuoOHgnuN6biHUOTuh4zQSbFtE9mvyAT3M8",1780401332774]