Ngôn ngữ

Cốt yếu CSS

Cốt yếu CSS — extracting đó trên-đó-fold styles, inlining them, và deferring đó rest to speed up đầu tiên paint. Vì sao Google calls điều này advanced và tùy chọn, đó real tradeoffs (lost bộ nhớ đệm, maintenance risk, race conditions), và cách tell liệu CSS là even của bạn bottleneck.

Xuất bản lần đầu: 3 thg 7, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

Cốt yếu CSS là một performance technique: extract đó CSS needed to render một chosen trên-đó-fold view, inline điều này trong đó <head>, và defer đó rest of đó stylesheet asynchronously. Điều này hoạt động vì CSS là render-blocking theo mặc định — đó trình duyệt sẽ không paint until đó CSSOM là được xây dựng. có không universal trên-đó-fold height (device, orientation, zoom, và trang state all thay đổi điều này), so treat đó split as một decision, không một fixed pixel cutoff. Đó single hầu hết quan trọng điều to nhận right: Google frames cốt yếu CSS as an advanced, tùy chọn technique, không default advice — của nó own tài liệu say 'Hầu hết các trang nên là able to achieve all of của chúng ta được khuyến nghị performance targets không có implementing này technique.' Đó tradeoffs là real: inlined CSS không được lưu đệm cho repeat visits (second views có thể là chậm hơn), đó cốt yếu/non-cốt yếu split silently breaks as templates hoặc trạng thái thay đổi, một CSP style-src policy có thể block đó inline block outright, và đó preload/onload deferral có thể race hoặc nguyên nhân layout shift. Diagnose đầu tiên — xác nhận CSS (không JavaScript hoặc thời gian phản hồi của máy chủ) là thực ra của bạn kết xuất bottleneck trước khi bạn touch điều này. SEO impact là gián tiếp, qua Core Web Vitals/LCP, không một trực tiếp tín hiệu xếp hạng. có không Bing-cụ thể hướng dẫn. Này trang nests under đó cốt yếu kết xuất path hub.

TL;DR — Cốt yếu CSS = extract đó trên-đó-fold styles, inline them trong đó <head>, và defer đó rest of đó stylesheet asynchronously (rel="preload" + onload đổi, <noscript> fallback, hoặc loadCSS). Điều này hoạt động vì CSS là render-blocking theo mặc định. Đó độ chính xác spine: Google frames này as advanced và tùy chọn, không default advice — “Most sites should be able to achieve all of our recommended performance targets without implementing this technique.” (bản dịch) «Hầu hết các trang nên là able to achieve all of của chúng ta được khuyến nghị performance targets không có implementing này technique.» Giữ đó Giữ đó inlined payload nhỏ. Đó tradeoffs là real: inlined CSS không được lưu đệm across trang loads (repeat visits có thể là chậm hơn), đó cốt yếu/non-cốt yếu split breaks as templates thay đổi, và đó deferral có thể race hoặc nguyên nhân FOUC/CLS. Diagnose đầu tiên — xác nhận CSS (không JavaScript hoặc máy chủ time) là đó thực tế bottleneck. Watch cho đó landmines một nhanh demo sẽ không cho thấy bạn: một CSP style-src policy có thể block của bạn inline <style> block outright, “unused at capture” (bản dịch) «unused tại capture» không đó giống nhau as “safe to defer” (bản dịch) «safe to defer» across themes/personalization/trạng thái, và inlining không solve font-loading timing. SEO impact là gián tiếp qua Cốt lõi Web Chỉ số quan trọng/LCP. Không Bing-cụ thể hướng dẫn tồn tại.

Điều gì cốt yếu CSS thực ra là

vấn đề nó solves là render-blocking CSS. Google web.dev là rõ ràng: theo mặc định, CSS là được xem như render-blocking tài nguyên, mà có nghĩ là đó trình duyệt sẽ không render bất kỳ processed nội dung cho đến khi CSSOM là constructed. đó toàn bộ reason technique tồn tại — trình duyệt từ chối để paint cho đến khi nó có của bạn styles, so bất cứ điều gì đó delays CSS delays đầu tiên paint. (cho đầy đủ pipeline đó sits underneath điều này, see cốt yếu kết xuất path hub điều này trang nests under, và của nó companion, render-blocking các tài nguyên.)

Cốt yếu CSS attacks đó by splitting của bạn CSS trong hai. web.dev definition: “Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.” (bản dịch) «Cốt yếu CSS là một technique đó extracts đó CSS cho trên-đó-fold nội dung trong order to render nội dung to người dùng as fast as có thể.» Và đó mechanics: Inlining extracted styles trong đó <head> of đó HTML document eliminates đó cần to làm an additional yêu cầu to fetch những styles. Đó remainder of đó CSS có thể là loaded asynchronously.

Evidence for this claim Critical CSS extracts and inlines above-the-fold styles so the remaining CSS can load asynchronously. Scope: web.dev definition and implementation outline for critical CSS. Confidence: high · Verified: web.dev: Extract critical CSS

Một điều web.dev là upfront về, và lot của phụ các hướng dẫn gloss over: có không single, universal trên—fold height — device size, orientation, trình duyệt chrome, zoom level, và trang state ( open menu, loaded personalization, lỗi state) all thay đổi Điều gì thực ra có để là trong “cốt yếu” đặt. Treat cốt yếu CSS as decision về chosen ban đầu viewport/state, không fixed pixel cutoff, và validate so với của bạn thực breakpoints và trạng thái — không một desktop screenshot.

So nó hai jobs, trong order:

  1. Inline minimal trên—fold CSS trong <head> — không extra round trip trước khi đầu tiên paint.
  2. Defer rest của stylesheet — load nó asynchronously so nó không bao giờ chặn đó đầu tiên paint.

Đây là chính xác Cách I’ve split nó trong my trang-experience talks. Trong my Điều gì tiếp theo cho trang Experience deck (SMX tiếp theo 2021) I put CSS hoạt động trong hai buckets: sớm/cốt yếu path (xóa unused CSS → minify CSS → inline cốt yếu CSS) và muộn/deferred path (defer non-cốt yếu CSS). giống nhau shape as web.dev, chỉ ordered way I think về nó.

Cách implement nó

Step 1 — inline cốt yếu CSS. Lighthouse own hướng dẫn là để inline cốt yếu styles bắt buộc cho đầu tiên paint bên trong <style> block tại head của HTML trang. Google size đích cho đó inlined payload, từ giống nhau trang: aim để giữ trên—fold nội dung under 14 KB (compressed), so nó fits trong đầu tiên network round trip. Treat đó number as lịch sử transport hướng dẫn thay vì timeless spec — nguồn trang là dated 2019 và có trước hôm nay wide HTTP/2 và HTTP/3 deployment, cả hai của mà thay đổi đầu tiên- round-trip math. nó vẫn number tài liệu củ chính Google cite, nhưng nếu bạn’re tuning tightly, verify nó so với của bạn hiện tại giao thức và máy chủ behavior thay vì treating 14 KB as gospel.

Step 2 — defer rest. pattern web.dev khuyến nghị cho deferring non-cốt yếu CSS là preload với onload đổi plus <noscript> fallback:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

web.dev advice cho production là để sử dụng CSS-deferring functions, chẳng hạn như loadCSS, đó encapsulate điều này behavior và hoạt động well across các trình duyệt thay vì hand-rolling đổi. nếu bạn defer với JavaScript thay vì, web.dev notes đó đang chờ cho JavaScript để execute trước khi loading non-cốt yếu CSS có thể nguyên nhân delays trong kết xuất Khi người dùng scroll — mà là Vì sao preload là được sử dụng để kick download off sooner.

Tooling. Bạn rarely extract cốt yếu CSS by hand. Google reference implementation là đó critical npm package (Addy Osmani) — “a tool that extracts, minifies and inlines above-the-fold CSS.” (bản dịch) «một tool đó extracts, minifies và inlines trên-đó-fold CSS.» Alternatives bao gồm Penthouse và CriticalCSS, plus một pile of SaaS/plugin generators cho WordPress và Shopify. To tìm đó cốt yếu rules yourself, Google points bạn tại đó Coverage tab trong Chrome DevTools to identify non-cốt yếu CSS và JS.

nếu bạn’re sử dụng plugin hoặc generator (WP Rocket, Autoptimize, và similar), không take vendor UI walkthrough hoặc trước khi/sau khi score screenshot as nền tảng bảo đảm — những điều đó các trang mix sản phẩm versions và cụ thể-trang web kết quả freely, và score deltas không phải independently reproduced. trước khi trusting một trong production: xác nhận behavior so với plugin hiện tại tài liệu và version number, và hold nó để giống nhau kiểm thử matrix bạn’d sử dụng cho hand-rolled implementation — cold và repeat loads, của bạn thực breakpoints/themes/trạng thái, và của bạn CSP policy nếu bạn chạy một.

Note đó cốt yếu CSS là chỉ một của các cách sửa cho render-blocking CSS. others là scoping stylesheets với media thuộc tính (so họ download nhưng không block paint) và chỉ shipping ít hơn CSS trong đầu tiên place — web.dev render-blocking bài viết thực ra leans on media-thuộc tính approach thay vì inlining, so Google có nhiều hơn hơn một chính thức prescription depending on mà doc bạn đọc.

Google thực tế position ( độ chính xác spine)

Đây là part gần như mỗi competing bài viết buries, và nó toàn bộ reason I wanted để ghi điều này một. Google làm không present cốt yếu CSS as default advice. Của nó codelab là blunt về risk: điều này codelab mô tả Nâng cao performance technique đó có thể improve performance, nhưng có thể cũng lead để bugs nếu không implemented properly. và, twice across của nó tài liệu, Google nói phần lớn các trang không nên bother: phần lớn các trang nên là able để achieve tất cả của chúng ta được khuyến nghị performance targets không có implementing điều này technique.

Evidence for this claim web.dev presents critical CSS as an advanced technique that can cause bugs and says most sites can meet performance targets without it. Scope: web.dev codelab guidance; not a universal recommendation. Confidence: high · Verified: web.dev: Extract and inline critical CSS

Even upside xuất hiện với warning. web.dev flags đó inlining cũng có some downsides trong đó nó ngăn trình duyệt từ bộ nhớ đệm CSS cho reuse on subsequent trang loads, so nó best để sử dụng nó sparingly — và, on over-đang làm nó, nếu mọi thứ là prioritized sau đó không có gì là. Over-inline và bạn bloat HTML bạn’re trying để deliver fast.

So honest framing là: cốt yếu CSS là thực, được ghi lại, đôi khi-powerful technique — và Nâng cao, tùy chọn, cuối cùng-resort một đó Google nói phần lớn các trang không cần để hit của họ targets. Treat nó đó way.

thực tradeoffs

Independent performance engineers có là loudest voices ở đây, và họ line up với Google own caveats.

Lost bộ nhớ đệm on repeat visits. DebugBear Matt Zeunert trạng thái nó plainly: cốt yếu CSS có thể’t là re-được sử dụng giữa khác trang loads on của bạn trang web. So subsequent trang views có thể thực ra là chậm hơn hơn họ sẽ là không có cốt yếu CSS. thông thường external stylesheet là được lưu đệm sau khi và reused mọi nơi; inlined CSS là re-downloaded bên trong mỗi HTML phản hồi.

Maintenance và regression risk. Harry Roberts’ contrarian piece là đó hầu hết-cited take, và his warning là đó retrofitting Cốt yếu CSS là difficult và lỗi prone: khi bạn đã identified CSS as của bạn bottleneck, “you need to keep it that way… One wrong decision can undo everything.” (bản dịch) «bạn cần to giữ điều này đó way… Một wrong decision có thể undo mọi thứ.» có không tự động re-validation — một template hoặc design thay đổi có thể silently break của bạn cốt yếu/non-cốt yếu split.

Race conditions trong deferral. Roberts cũng points out preload/onload đổi có thể backfire on timing: nếu nó takes 1s để parse của bạn <head> và 0,5s để asynchronously fetch của bạn non-Cốt yếu CSS, sau đó CSS sẽ là turned back vào synchronous file 0,5s trước khi bạn là ready để go anyway. và Khi non-cốt yếu CSS lands muộn, bạn risk flash của unstyled nội dung và layout shift.

đây là thường không đó bottleneck tại all. Roberts’ cốt lõi thesis: Cốt yếu CSS chỉ helps nếu CSS là của bạn biggest render-blocking bottleneck, và quite thường, điều này không. DebugBear agrees — trước inlining, kiểm tra xem CSS là thực ra đó vấn đề, vì nếu bạn vẫn có render-blocking JavaScript code, inlining CSS khó có khả năng help, và “often it’s not the most impactful optimization.” (bản dịch) «thường đây là không đó hầu hết impactful optimization.»

Production landmines: CSP, state, và fonts

Three nhiều hơn thất bại modes đó không hiển thị up trong nhanh demo nhưng bite sau khi Đây là trực tiếp:

** CSP policy có thể block của bạn inline <style> block outright.** Content-Security-Policy style-src policy có thể block inline cốt yếu <style> block trừ khi policy explicitly permits nó — thường qua nonce hoặc matching hash. MDN documents violation cases và nonce/hash mechanisms. Reaching cho unsafe-inline để làm console lỗi go away weakens policy trang web-wide và không phải default khắc phục — nhận nonce/hash generation wired vào whatever tool extracts cốt yếu CSS, và kiểm tra trình duyệt console cho violations sau khi bạn ship.

“Unused at capture” (bản dịch) «Unused tại capture» không đó giống nhau as “safe to defer.” (bản dịch) «safe to defer.» Đó Coverage tab tells bạn điều gì CSS executed during một recorded chạy. MỘT safe split có to bảo toàn cascade order và đó rules needed cho của bạn responsive breakpoints, theme variants, personalized nội dung, focus trạng thái, open menus/modals, và lỗi trạng thái — không chỉ whatever happened to render trong đó một truyền. Roberts raises đó giống nhau câu hỏi từ một khác nhau angle: mà viewport, và mà off-screen hoặc un-interacted elements (dropdowns, flyouts), làm của bạn extraction thực ra cần to cover?

nó không solve của bạn font vấn đề, và nó có thể thêm kết xuất hoạt động. Inlining element styles không itself làm web font discoverable trước đó hoặc bảo đảm text renders on time — font phát hiện, preload, font-display, và fallback các chỉ số là tách biệt dependencies đó cốt yếu CSS không touch. và applying inline subset followed by lớn hơn stylesheet có thể có nghĩa là extra style recalculation, layout, và paint; cutting fetch delay không tự động có nghĩa là ít hơn total kết xuất hoạt động. Đo lường cả hai, không chỉ network waterfall.

Cách chẩn đoán liệu bạn even cần nó

Được cho all đó, không bắt đầu với “add critical CSS” (bản dịch) «thêm cốt yếu CSS» — bắt đầu với “confirm CSS is my rendering bottleneck,” (bản dịch) «xác nhận CSS là my kết xuất bottleneck,» và không dừng ở đó. Four gates, và all of them có to hold trước đây là worth đang làm:

1. CSS là một proven blocker, không một guess.

  • Open đó PageSpeed Insights / Lighthouse báo cáo. As of Lighthouse 13, đó old “Eliminate render-blocking resources” (bản dịch) «Eliminate render-blocking các tài nguyên» audit có moved vào đó Render-blocking các yêu cầu insight — so older các bài viết referencing đó old audit name là stale.
  • Dùng đó Coverage tab trong Chrome DevTools to see cách nhiều of của bạn CSS (và JS) là thực ra unused on đầu tiên paint.
  • Tách biệt đó gây ra. Nếu của bạn bottleneck là render-blocking JavaScript, hoặc một chậm máy chủ phản hồi (TTFB), inlining CSS sẽ không cách sửa điều này — bạn’d là optimizing đó wrong điều.

2. Bạn có thể xây dựng extraction coverage đó thực ra ổn định — across của bạn thực breakpoints, themes, personalization, và interactive trạng thái, không một desktop screenshot (see landmines trên).

3. repeat-view và CSP cost là acceptable. Inlined CSS không phải được lưu đệm, so weigh đó so với Cách deep của bạn typical session goes. nếu bạn chạy CSP style-src policy, nonce/hash generation cần để là wired vào pipeline trước khi điều này ships, không discovered sau khi.

4. bạn’ll thực ra maintain nó. Regenerate on mỗi template hoặc design thay đổi và re-chạy đầy đủ kiểm thử matrix — cold và repeat loads, mỗi route/viewport/ state bạn hỗ trợ — không single eyeball kiểm tra sau khi deploy.

nếu all four gates hold, cốt yếu CSS là worth maintenance cost. nếu bất kỳ một không, cheaper các cách sửa — xóa unused CSS, minify, phạm vi non-cốt yếu stylesheets với media — là tốt hơn move.

hiện tại 2026 gotcha

Một trực tiếp wrinkle worth flagging: có open, unresolved báo cáo đó chính xác <link rel="preload" as="style"> pattern tài liệu củ Google khuyến nghị cho deferring CSS đã bắt đầu getting flagged as render-blocking again sau khi Lighthouse/PSI point cập nhật. GitHub vấn đề #17031 documents preloaded CSS cho thấy as green trong Lighthouse 13.0.1 và sau đó flagged as render-blocking trong 13.3.0. As của điều này writing có không công khai Google resolution, so treat nó as developing — nhưng practical lesson stands: nếu PSI flags của bạn correctly-deferred CSS, audit itself có thể là sai, so đọc báo cáo critically thay vì assuming của bạn implementation là hỏng.

Làm cốt yếu CSS help SEO?

Indirectly, và modestly. Hai điều để tách biệt:

  • CSS không phải một trực tiếp tín hiệu xếp hạng. Google Martin Splitt có đã nói of CSS class names: “I don’t think we care because the CSS class names are just that.” (bản dịch) «I không think we care vì đó CSS class names là chỉ đó.» đó là về class names cụ thể, nhưng điều này rebuts đó rộng hơn myth đó của bạn CSS choices là đọc as một xếp hạng input.
  • Speed là một (nhỏ) tín hiệu, qua Core Web Vitals. Cốt yếu CSS có thể improve đầu tiên paint, mà có thể improve LCP, mà là một Core Web Vitals chỉ số đó feeds Google trang-experience các tín hiệu. đó là đó entire SEO connection — một nhanh hơn paint, không một bonus cho đó technique itself.

So SEO case cho cốt yếu CSS là chính xác as mạnh as của nó LCP impact on của bạn trang web — mà, theo Google và perf community, là frequently nhỏ hơn hơn vendor tools selling nó sẽ suggest.

Điều gì về Bing?

Không có gì Bing-cụ thể. Unlike Google — mà có multiple web.dev các trang và codelab on technique — I không thể tìm bất kỳ dedicated Bing/Microsoft document addressing cốt yếu CSS. Bing chung trang-experience hướng dẫn áp dụng (giữ điều fast, giữ cốt yếu nội dung reachable), nhưng có không Bing tương đương của web.dev cốt yếu CSS codelab. Anyone telling bạn Bing có cụ thể cốt yếu-CSS khuyến nghị là inventing nó.

nơi điều này sits

điều này trang nests under cốt yếu kết xuất path hub — cốt yếu CSS là một tactic cho shortening đó path — và nó practical sibling của render-blocking các tài nguyên. payoff, Khi có một, hiển thị up trong Largest Contentful Paint (LCP), đầu tiên Contentful Paint (FCP), và rộng hơn Core Web Vitals đặt. cho wider performance picture, see web performance cluster.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.