Bahasa

Panduan Critical CSS

Critical CSS — extracting di atas--fold styles, inlining them, dan deferring rest untuk speed up pertama paint. Mengapa Google panggilan ini advanced dan opsional, nyata tradeoffs (lost caching, maintenance risk, race conditions), dan cara tell apakah CSS adalah bahkan Anda bottleneck.

Pertama kali diterbitkan: 3 Jul 2026 · Terakhir diperbarui: 22 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2

Critical CSS adalah sebuah performa technique: extract CSS needed untuk render sebuah chosen di atas--fold view, inline ini di <head>, dan defer rest dari stylesheet asynchronously. ini berfungsi karena CSS adalah render-blocking oleh default — browser tidak akan paint until CSSOM adalah dibangun. ada Tidak universal di atas--fold height (device, orientation, zoom, dan halaman state semua perubahan ini), so treat split sebagai sebuah decision, tidak sebuah fixed pixel cutoff. single sebagian besar penting hal untuk mendapatkan right: Google frames critical CSS sebagai sebuah advanced, opsional technique, tidak default advice — -nya own docs say 'sebagian besar situs seharusnya menjadi able untuk achieve semua dari kami recommended performa targets tanpa implementing ini technique.' tradeoffs adalah nyata: inlined CSS tidak cached untuk repeat visits (kedua views dapat menjadi lebih lambat), critical/non-critical split silently breaks sebagai templates atau status perubahan, sebuah CSP style-src policy dapat block inline block outright, dan preload/onload deferral dapat race atau penyebab layout shift. Diagnose pertama — konfirmasi CSS (tidak JavaScript atau server respons time) adalah sebenarnya Anda rendering bottleneck sebelum Anda touch ini. SEO impact adalah indirect, melalui Core Web Vitals/LCP, tidak sebuah direct sinyal peringkat. ada Tidak Bing-spesifik guidance. ini halaman nests di bawah critical rendering path hub.

TL;DR — Critical CSS = extract di atas—fold styles, inline them di <head>, dan defer rest dari stylesheet asynchronously (rel="preload" + onload tukar, <noscript> fallback, atau loadCSS). ini berfungsi karena CSS adalah render-blocking oleh default. accuracy spine: Google frames ini sebagai advanced dan opsional, tidak default advice — “Paling sites seharusnya menjadi able untuk achieve all dari our recommended performance targets tanpa implementing ini technique.” (terjemahan) “sebagian besar situs seharusnya menjadi able untuk achieve semua dari kami recommended performa targets tanpa implementing ini technique.” pertahankan pertahankan inlined payload kecil. tradeoffs adalah nyata: inlined CSS tidak cached di seluruh halaman memuat (repeat visits dapat menjadi lebih lambat), critical/non-critical split breaks sebagai templates perubahan, dan deferral dapat race atau penyebab FOUC/CLS. Diagnose pertama — konfirmasi CSS (tidak JavaScript atau server time) adalah sebenarnya bottleneck. Watch untuk landmines sebuah quick demo tidak akan tampilkan Anda: sebuah CSP style-src policy dapat block Anda inline <style> block outright, “unused di capture” (terjemahan) “unused di capture” tidak yang sama sebagai “safe to defer” (terjemahan) “safe untuk defer” di seluruh themes/personalization/status, dan inlining tidak solve font-memuat timing. SEO impact adalah indirect melalui Core Web Vitals/LCP. Tidak Bing-spesifik guidance ada.

Apa critical CSS sebenarnya adalah

masalah ini solves adalah render-blocking CSS. Google’s web.dev adalah jelas: oleh default, CSS adalah treated sebagai sebuah render-blocking resource, yang berarti itu browser tidak akan render apa pun processed konten until CSSOM adalah constructed. itu’s seluruh alasan technique ada — browser refuses untuk paint until ini memiliki Anda styles, so apa pun itu delays CSS delays pertama paint. (untuk penuh pipeline itu sits underneath ini, see critical rendering path hub ini halaman nests di bawah, dan -nya companion, render-blocking resources.)

Critical CSS attacks itu oleh splitting Anda CSS di dua. web.dev’s definition: “Critical CSS adalah a technique itu extracts itu CSS untuk di atas-itu-fold konten di order untuk render konten untuk itu user sebagai fast sebagai possible.” (terjemahan) “Critical CSS adalah sebuah technique itu extracts CSS untuk di atas—fold konten di order untuk render konten untuk pengguna sebagai fast sebagai mungkin.” dan mechanics: Menempatkan style yang diekstrak di <head> dokumen HTML sehingga tidak diperlukan permintaan tambahan untuk mengambil style tersebut. Sisa CSS dapat dimuat secara asinkron

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

Satu hal web.dev adalah upfront tentang, dan sebuah lot dari sekunder guides gloss di atas: ada Tidak single, universal di atas—fold height — device size, orientation, browser chrome, zoom tingkat, dan halaman state (sebuah open menu, dimuat personalization, sebuah error state) semua perubahan apa sebenarnya memiliki untuk menjadi di “critical” (terjemahan) “critical” set. Treat critical CSS sebagai sebuah decision tentang sebuah chosen awal viewport/state, tidak sebuah fixed pixel cutoff, dan validate terhadap Anda nyata breakpoints dan status — tidak satu desktop screenshot.

So ini adalah dua jobs, di order:

  1. Inline minimal di atas—fold CSS di <head> — Tidak extra round trip sebelum pertama paint.
  2. Defer rest dari stylesheet — muat ini asynchronously so ini tidak pernah blocks itu pertama paint.

ini adalah persis bagaimana I’ve split ini di my halaman-experience talks. di my apa Berikutnya untuk pengalaman halaman deck (SMX Berikutnya 2021) I put CSS berfungsi di dua buckets: sebuah early/critical path (hapus unused CSS → minify CSS → inline critical CSS) dan sebuah late/deferred path (defer non-critical CSS). sama shape sebagai web.dev’s, hanya ordered cara I think tentang ini.

cara implement ini

langkah 1 — inline critical CSS. Lighthouse’s own guidance adalah untuk inline critical styles diperlukan untuk pertama paint di dalam sebuah <style> block di head dari HTML halaman. Google’s size target untuk itu inlined payload, dari yang sama halaman: aim untuk pertahankan di atas—fold konten di bawah 14 KB (compressed), so ini fits di pertama network round trip. Treat itu angka sebagai historical transport guidance alih-alih sebuah timeless spec — sumber halaman adalah dated 2019 dan lebih lama dari hari ini’s wide HTTP/2 dan HTTP/3 deployment, keduanya dari yang perubahan pertama- round-trip math. ini adalah masih angka Google’s own docs cite, tetapi jika Anda’re tuning tightly, verify ini terhadap Anda saat ini protocol dan server perilaku alih-alih treating 14 KB sebagai gospel.

langkah 2 — defer rest. pattern web.dev recommends untuk deferring non-critical CSS adalah sebuah preload dengan sebuah onload tukar plus sebuah <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’s advice untuk production adalah untuk gunakan CSS-deferring functions, such sebagai loadCSS, itu encapsulate ini perilaku dan berfungsi well di seluruh browser alih-alih hand-rolling tukar. jika Anda defer dengan JavaScript alih-alih, web.dev notes itu menunggu untuk JavaScript untuk execute sebelum memuat non-critical CSS dapat penyebab delays di rendering ketika pengguna scroll — yang adalah mengapa preload adalah digunakan untuk kick download off sooner.

Tooling. Anda rarely extract critical CSS oleh hand. Google’s reference implementation adalah critical npm package (Addy Osmani) — “a tool itu extracts, minifies dan inlines di atas-itu-fold CSS.” (terjemahan) “sebuah alat itu extracts, minifies dan inlines di atas—fold CSS.” Alternatives sertakan Penthouse dan CriticalCSS, plus sebuah pile dari SaaS/plugin generators untuk WordPress dan Shopify. untuk temukan critical aturan yourself, Google poin Anda di Coverage tab di Chrome DevTools untuk identify non-critical CSS dan JS.

jika Anda’re menggunakan sebuah plugin atau generator (WP Rocket, Autoptimize, dan similar), jangan take sebuah vendor’s UI walkthrough atau sebelum/setelah score screenshot sebagai sebuah platform jaminan — itu halaman mix product versi dan spesifik-situs hasil freely, dan score deltas tidak independently reproduced. sebelum trusting satu di production: konfirmasi perilaku terhadap plugin’s saat ini docs dan versi angka, dan hold ini untuk yang sama test matrix Anda’d gunakan untuk sebuah hand-rolled implementation — cold dan repeat memuat, Anda nyata breakpoints/themes/status, dan Anda CSP policy jika Anda jalankan satu.

Note itu critical CSS adalah hanya satu dari memperbaiki untuk render-blocking CSS. others adalah scoping stylesheets dengan media attribute (so mereka download tetapi jangan block paint) dan hanya shipping lebih sedikit CSS di pertama place — web.dev’s render-blocking artikel sebenarnya leans pada media-attribute approach alih-alih inlining, so Google memiliki lebih daripada satu official prescription depending pada yang doc Anda baca.

Google’s sebenarnya position ( accuracy spine)

ini adalah bagian hampir setiap competing artikel buries, dan ini adalah seluruh alasan I wanted untuk tulis ini satu. Google melakukan tidak present critical CSS sebagai default advice. -nya codelab adalah blunt tentang risk: ini codelab mendeskripsikan sebuah advanced performa technique itu dapat meningkatkan performa, tetapi dapat juga lead untuk bugs jika tidak implemented properly. dan, twice di seluruh -nya docs, Google says sebagian besar situs tidak seharusnya bother: sebagian besar situs seharusnya menjadi able untuk achieve semua dari kami recommended performa targets tanpa implementing ini 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

bahkan upside muncul dengan sebuah warning. web.dev flags itu inlining juga memiliki beberapa downsides di itu ini mencegah browser dari caching CSS untuk reuse pada subsequent halaman memuat, so ini adalah best untuk gunakan ini sparingly — dan, pada di atas-melakukan ini, jika semuanya adalah prioritized lalu tidak ada apa pun adalah. di atas-inline dan Anda bloat HTML Anda’re trying untuk deliver fast.

So honest framing adalah: critical CSS adalah sebuah nyata, terdokumentasi, sometimes-powerful technique — dan sebuah advanced, opsional, terakhir-resort satu itu Google says sebagian besar situs jangan perlu untuk hit mereka targets. Treat ini itu cara.

nyata tradeoffs

Independent performa engineers memiliki telah loudest voices di sini, dan mereka line up dengan Google’s own caveats.

Lost caching pada repeat visits. DebugBear’s Matt Zeunert status ini plainly: critical CSS dapat’t menjadi re-digunakan antara berbeda halaman memuat pada Anda situs web. So subsequent halaman views dapat sebenarnya menjadi lebih lambat daripada mereka akan menjadi tanpa critical CSS. sebuah wajar external stylesheet adalah cached setelah dan reused di mana-mana; inlined CSS adalah re-downloaded di dalam setiap HTML respons.

Maintenance dan regression risk. Harry Roberts’ contrarian piece adalah sebagian besar-cited take, dan his warning adalah itu retrofitting Critical CSS adalah difficult dan error prone: setelah Anda’ve identified CSS sebagai Anda bottleneck, “you need to keep it that way… One wrong decision can undo everything.” (terjemahan) “Anda perlu pertahankan ini itu cara… Satu wrong decision dapat undo semuanya.” ada Tidak automatic re-validation — sebuah template atau design perubahan dapat silently break Anda critical/non-critical split.

Race conditions di deferral. Roberts juga poin out preload/onload tukar dapat backfire pada timing: jika ini takes 1s untuk parse Anda <head> dan 0,5s untuk asynchronously fetch Anda non-Critical CSS, lalu CSS akan menjadi turned back ke sebuah synchronous file 0,5s sebelum Anda adalah ready untuk go anyway. dan ketika non-critical CSS lands late, Anda risk sebuah flash dari unstyled konten dan layout shift.

ini adalah sering tidak bottleneck di semua. Roberts’ core thesis: Critical CSS hanya helps jika CSS adalah Anda biggest render-blocking bottleneck, dan quite sering, ini tidak. DebugBear agrees — sebelum inlining, periksa apakah CSS adalah sebenarnya masalah, karena jika Anda masih memiliki render-blocking JavaScript code, inlining CSS adalah unlikely untuk help, dan “often it’s not the most impactful optimization.” (terjemahan) “sering ini adalah tidak paling impactful optimization.”

Production landmines: CSP, state, dan fonts

Three lebih failure modes itu jangan tampilkan up di sebuah quick demo tetapi bite setelah ini adalah langsung:

sebuah CSP policy dapat block Anda inline <style> block outright. sebuah Content-Security-Policy style-src policy dapat block sebuah inline critical <style> block unless policy explicitly permits ini — biasanya melalui sebuah nonce atau sebuah matching hash. MDN documents violation cases dan nonce/hash mechanisms. Reaching untuk unsafe-inline untuk membuat console error go away weakens policy situs-wide dan tidak sebuah default perbaiki — mendapatkan nonce/hash generation wired ke whatever alat extracts critical CSS, dan periksa browser console untuk violations setelah Anda ship.

“Unused at capture” (terjemahan) “Unused di capture” tidak yang sama sebagai “safe to defer.” (terjemahan) “safe untuk defer.” Coverage tab tells Anda apa CSS executed selama satu recorded jalankan. sebuah safe split memiliki untuk pertahankan cascade order dan aturan needed untuk Anda responsive breakpoints, theme variants, personalized konten, focus status, open menus/modals, dan error status — tidak hanya whatever happened untuk render di itu satu lulus. Roberts raises sama pertanyaan dari sebuah berbeda angle: yang viewport, dan yang off-screen atau un-interacted elements (dropdowns, flyouts), melakukan Anda extraction sebenarnya perlu untuk cover?

ini tidak solve Anda font masalah, dan ini dapat tambahkan rendering berfungsi. Inlining element styles tidak itself membuat sebuah web font discoverable sebelumnya atau jaminan text renders pada time — font penemuan, preload, font-display, dan fallback metrics adalah terpisah dependencies itu critical CSS tidak touch. dan applying sebuah inline subset diikuti oleh sebuah lebih besar stylesheet dapat berarti extra style recalculation, layout, dan paint; cutting fetch delay tidak secara otomatis berarti lebih sedikit total rendering berfungsi. mengukur keduanya, tidak hanya network waterfall.

cara diagnose apakah Anda bahkan perlu ini

Diberikan semua itu, jangan mulai dengan “add critical CSS” (terjemahan) “tambahkan critical CSS” — mulai dengan “confirm CSS is my rendering bottleneck,” (terjemahan) “konfirmasi CSS adalah my rendering bottleneck,” dan jangan berhenti di sana. Four gates, dan semua dari them memiliki untuk hold sebelum ini adalah worth melakukan:

1. CSS adalah sebuah proven blocker, tidak sebuah guess.

  • Open PageSpeed Insights / Lighthouse report. sebagai dari Lighthouse 13, old “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit memiliki moved ke Render-blocking permintaan insight — so older artikel referencing old audit name adalah stale.
  • gunakan Coverage tab di Chrome DevTools untuk see bagaimana banyak dari Anda CSS (dan JS) adalah sebenarnya unused pada pertama paint.
  • Terpisah penyebab. jika Anda bottleneck adalah render-blocking JavaScript, atau sebuah slow server respons (TTFB), inlining CSS tidak akan perbaiki ini — Anda’d menjadi optimizing wrong hal.

2. Anda dapat bangun extraction coverage itu’s sebenarnya stable — di seluruh Anda nyata breakpoints, themes, personalization, dan interactive status, tidak satu desktop screenshot (see landmines di atas).

3. repeat-view dan CSP cost adalah acceptable. Inlined CSS tidak cached, so weigh itu terhadap bagaimana deep Anda typical session goes. jika Anda jalankan sebuah CSP style-src policy, nonce/hash generation perlu untuk menjadi wired ke pipeline sebelum ini ships, tidak ditemukan setelah.

4. Anda’ll sebenarnya maintain ini. Regenerate pada setiap template atau design perubahan dan re-jalankan penuh test matrix — cold dan repeat memuat, setiap route/viewport/ state Anda mendukung — tidak sebuah single eyeball periksa setelah deploy.

jika semua four gates hold, critical CSS adalah worth maintenance cost. jika apa pun satu tidak, cheaper memperbaiki — hapus unused CSS, minify, cakupan non-critical stylesheets dengan media — adalah better move.

sebuah saat ini 2026 gotcha

Satu langsung wrinkle worth flagging: ada sebuah open, unresolved report itu tepat <link rel="preload" as="style"> pattern Google’s docs merekomendasikan untuk deferring CSS dimulai getting flagged sebagai render-blocking again setelah sebuah Lighthouse/PSI poin perbarui. GitHub issue #17031 documents preloaded CSS menunjukkan sebagai green di Lighthouse 13.0.1 dan lalu flagged sebagai render-blocking di 13.3.0. sebagai dari ini writing ada Tidak publik Google resolution, so treat ini sebagai developing — tetapi practical lesson stands: jika PSI flags Anda correctly-deferred CSS, audit itself dapat menjadi wrong, so baca report critically alih-alih assuming Anda implementation adalah rusak.

melakukan critical CSS help SEO?

Indirectly, dan modestly. Dua hal untuk terpisah:

  • CSS adalah tidak sebuah direct sinyal peringkat. Google’s Martin Splitt memiliki mengatakan dari CSS class names: “I jangan think we care karena itu CSS class names adalah sekadar itu.” (terjemahan) “I jangan think kami care karena CSS class names adalah hanya itu.” itu’s tentang class names secara khusus, tetapi ini rebuts lebih luas myth itu Anda CSS choices adalah baca sebagai sebuah peringkat input.
  • Speed adalah sebuah (kecil) sinyal, melalui Core Web Vitals. Critical CSS dapat meningkatkan pertama paint, yang dapat meningkatkan LCP, yang adalah sebuah Core Web Vitals metric itu feeds Google’s halaman-experience sinyal. itu’s entire SEO connection — sebuah lebih cepat paint, tidak sebuah bonus untuk technique itself.

So SEO case untuk critical CSS adalah persis sebagai strong sebagai -nya LCP impact pada Anda situs — yang, per Google dan perf community, adalah frequently lebih kecil daripada vendor alat selling ini akan suggest.

Apa tentang Bing?

Tidak ada apa pun Bing-spesifik. Unlike Google — yang memiliki multiple web.dev halaman dan sebuah codelab pada technique — I tidak dapat temukan apa pun dedicated Bing/Microsoft document addressing critical CSS. Bing’s umum halaman-experience guidance applies (pertahankan hal fast, pertahankan critical konten reachable), tetapi ada Tidak Bing equivalent dari web.dev’s critical CSS codelab. Anyone telling Anda Bing memiliki sebuah spesifik critical-CSS recommendation adalah inventing ini.

Di mana ini sits

ini halaman nests di bawah critical rendering path hub — critical CSS adalah satu tactic untuk shortening itu path — dan ini adalah practical sibling dari render-blocking resources. payoff, ketika ada satu, menampilkan up di Largest Contentful Paint (LCP), pertama Contentful Paint (FCP), dan lebih luas Core Web Vitals set. untuk wider performa picture, see web performa cluster.

Add an expert note

Pin an expert quote

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