Bahasa

Critical rendering Path

browser's langkah-oleh-langkah pipeline dari bytes untuk terlihat pixels — DOM, CSSOM, render tree, layout, dan paint — mengapa CSS dan JavaScript block rendering, three optimization levers, dan bagaimana ini drives FCP, LCP, dan Googlebot rendering. hub untuk render-blocking resources.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 22 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2

critical rendering path (CRP) adalah dependency-ordered berfungsi sebuah browser melakukan sebelum ini dapat paint pertama pixel: parse HTML ke DOM, parse CSS ke CSSOM, combine them ke sebuah render tree, jalankan layout, lalu paint — sebuah berguna mental model, tidak sebuah rigid satu-shot schedule. Dua hal block ini differently — CSS blocks painting ketika ini applies ( browser tidak akan render until CSSOM adalah dibangun), dan synchronous JavaScript blocks DOM parsing ( parser berhenti dead di setiap script). Optimizing CRP berarti minimizing three variables: angka dari critical resources, critical path length (network round trips), dan critical bytes. FCP tracks CRP completion (sebuah milestone, tidak sebuah penuh diagnosis), dan sebuah panjang CRP dapat delay LCP too — keduanya adalah Core Web Vitals. ini penting untuk Googlebot sebagai well: Web rendering Service menggunakan sebuah stateless, cold-cache headless Chromium, so blocking resources slow -nya rendering similarly untuk sebuah nyata browser's (tepat equivalence dan peringkat impact tidak proven oleh itu alone), dan critical CSS/JS harus tidak menjadi blocked di robots.txt. ini hub menjelaskan pipeline dan poin down untuk render-blocking resources.

TL;DR — critical rendering path adalah browser’s pipeline dari bytes untuk pertama paint: HTML → DOM, CSS → CSSOM, DOM + CSSOM → render tree → layout → paint. Dua distinct blocks: CSS blocks rendering (Tidak paint until CSSOM adalah dibangun) dan synchronous JavaScript blocks DOM construction ( parser berhenti di setiap script). mengoptimalkan oleh minimizing three variables — critical resources, critical path length (round trips), dan critical bytes. FCP tracks CRP completion (ini adalah sebuah milestone, tidak sebuah penuh diagnosis); sebuah besar TTFB-untuk-FCP delta sinyal render-blocking assets, dan sebuah panjang CRP dapat delay LCP too. Googlebot’s Web rendering Service berjalan sebuah stateless, effectively cold-cache headless Chromium, so blocking resources slow -nya rendering yang sama cara mereka’d slow sebuah nyata browser’s — dan critical CSS/JS harus tidak menjadi blocked di robots.txt. Levers: inline critical CSS, async non-critical CSS melalui media kueri, defer JS, dan preload (hanya untuk resources Anda’ve confirmed adalah pada critical path).

five-langkah pipeline (bytes untuk pixels)

setiap halaman — static HTML atau sebuah berat JS app — walks melalui yang sama explanatory model, di dependency order: setiap langkah bergantung pada satu sebelum ini. browser jangan secara harfiah jalankan ini sebagai five rigid, satu-shot phases, though. HTML adalah parsed dan dirender progressively sebagai bytes stream di, dan mesin dapat pipeline, overlap, atau rerun bagian dari ini berfungsi sebagai baru HTML, CSS, atau DOM perubahan arrive. Treat ini sebagai sebuah berguna mental model untuk reasoning tentang dependencies, tidak sebuah guaranteed universal mesin schedule.

1. HTML → DOM. web.dev mendeskripsikan object-model construction sebagai “Bytes → characters → tokens → nodes → object model.” (terjemahan) “Bytes → characters → tokens → nodes → object model.” browser “membaca itu mentah bytes dari HTML off itu disk atau network, dan translates them untuk individual characters,” (terjemahan) “membaca mentah bytes dari HTML off disk atau network, dan translates them untuk individual characters,” tokenizes them, converts tokens ke objects, dan tautan them ke sebuah tree. “Itu akhir output dari ini entire proses adalah itu Document Object Model (DOM) dari our simple halaman, yang itu browser menggunakan untuk all further processing.” (terjemahan) “ akhir output dari ini entire proses adalah Document Object Model (DOM) dari kami sederhana halaman, yang browser menggunakan untuk semua further processing.”

2. CSS → CSSOM. CSS berjalan tepat sama path: “Itu CSS bytes adalah converted menjadi characters, lalu tokens, lalu nodes, dan finally they adalah linked menjadi a tree structure known sebagai itu ‘CSS Object Model’ (CSSOM).” (terjemahan) “ CSS bytes adalah converted ke characters, lalu tokens, lalu nodes, dan finally mereka adalah ditautkan ke sebuah tree structure known sebagai ‘CSS Object Model’ (CSSOM).” Crucially, “Itu CSSOM dan DOM adalah independent data structures” (terjemahan) “ CSSOM dan DOM adalah independent data structures” — dua terpisah trees dibangun di parallel.

3. DOM + CSSOM → render tree. “Itu DOM dan CSSOM trees combine untuk form itu render tree,” (terjemahan) “ DOM dan CSSOM trees combine untuk form render tree,” yang “captures all the visible DOM content on the page.” (terjemahan) “captures semua terlihat DOM konten pada halaman.” ini adalah juga di mana display: none vs visibility: hidden penting: display: none menghapus sebuah element dari render tree entirely; visibility: hidden mempertahankan ini di tree (ini masih takes up space di layout) tetapi draws tidak ada apa pun.

4. Layout. “Layout computes the exact position and size of each object.” (terjemahan) “Layout computes tepat position dan size dari setiap object.” output adalah “a ‘box model,’ which precisely captures the exact position and size of each element within the viewport.” (terjemahan) “sebuah ‘box model,’ yang precisely captures tepat position dan size dari setiap element di dalam viewport.”

5. Paint. “The last step is paint, which takes in the final render tree and renders the pixels to the screen.” (terjemahan) “ terakhir langkah adalah paint, yang takes di akhir render tree dan renders pixels untuk screen.”

6. Composite dan display. Painted layers mendapatkan combined (composited) dan hasil adalah drawn untuk screen — langkah itu sebenarnya membuat pixels terlihat. beberapa CSS properties (like transform dan opacity) dapat rerun hanya ini langkah tanpa redoing layout atau paint, yang adalah mengapa mereka’re cheaper untuk animate.

Evidence for this claim The browser constructs the DOM and CSSOM, combines them into a render tree, performs layout, and paints pixels. Scope: web.dev explanation of the browser's critical rendering path. Confidence: high · Verified: web.dev: Constructing the object model

critical rendering path adalah bagian dari ini pipeline itu memiliki untuk menyelesaikan sebelum pertama paint. sebagai web.dev puts ini, optimizing ini adalah “all tentang understanding apa happens di ini intermediate steps antara receiving itu HTML, CSS, dan JavaScript bytes dan itu wajib processing untuk turn them menjadi dirender pixels.” (terjemahan) “semua tentang understanding apa happens di ini intermediate langkah antara receiving HTML, CSS, dan JavaScript bytes dan diperlukan processing untuk turn them ke dirender pixels.”

Dua jenis dari blocking, dua berbeda mechanisms

ini adalah pembedaan sebagian besar SEO tulis-ups blur, dan ini adalah worth getting persis right.

CSS blocks rendering (painting) — ketika ini applies. “By default, CSS is treated as a render-blocking resource, which means that the browser won’t render any processed content until the CSSOM is constructed.” (terjemahan) “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.” Keduanya HTML dan CSS adalah render-blocking; browser blocks rendering until ini memiliki keduanya DOM dan CSSOM. itu’s benar untuk stylesheets itu sebenarnya apply untuk saat ini environment — sebuah <link> milik siapa media condition tidak match (say, media="print" pada sebuah wajar screen visit) tidak render-blocking, though browser masih downloads ini. dan applicability tidak locked di di muat time: sebuah stylesheet itu tidak block awal render dapat mulai applying kemudian jika media condition, viewport, atau DOM perubahan, yang triggers lainnya round dari style/layout/paint berfungsi. So bahkan sebuah single slow, applicable stylesheet di <head> holds entire pertama paint hostage. ini adalah satu orang forget — mereka obsess di atas scripts dan ignore CSS.

JavaScript blocks DOM construction (parsing). dari Google’s PageSpeed docs: “setiap kali itu parser encounters a script it memiliki untuk berhenti dan execute it sebelum it dapat continue parsing itu HTML,” (terjemahan) “setiap kali parser encounters sebuah script ini memiliki untuk berhenti dan execute ini sebelum ini dapat continue parsing HTML,” dan “in the case of an external script the parser is also forced to wait for the resource to download.” (terjemahan) “di case dari sebuah external script parser adalah juga forced untuk tunggu untuk resource untuk download.” net effect: “By default JavaScript blocks DOM construction and thus delays the time to first render.” (terjemahan) “Secara default, JavaScript memblokir konstruksi DOM sehingga menunda waktu hingga render pertama.” Sebuah parser stall tidak berarti network goes idle, though — browser jalankan sebuah sekunder preload scanner itu mempertahankan discovering dan fetching upcoming resources (images, lainnya scripts, stylesheets) sementara main parser adalah stuck pada sebuah script. perbaiki untuk block itself adalah async/defer — tetapi note async hanya menghapus download block; script masih executes pada main utas ketika ini arrives, so defer (yang menunggu until parsing finishes dan preserves order) adalah biasanya safer untuk CRP.

Evidence for this claim CSS is render-blocking by default, while parser-blocking scripts stop DOM construction until execution completes. Scope: Default stylesheet and synchronous script behavior in the critical rendering path. Confidence: high · Verified: web.dev: Render-blocking CSS web.dev: Adding interactivity with JavaScript

three optimization levers

web.dev frames CRP optimization sebagai minimizing three variables: “To deliver the fastest possible time to first render, we need to minimize three variables: The number of critical resources. The critical path length. The number of critical bytes.” (terjemahan) “Untuk memberikan waktu secepat mungkin menuju render pertama, kita perlu meminimalkan tiga variabel: jumlah resource kritis, panjang jalur kritis, dan jumlah byte kritis.” Sebuah “A critical resource is a resource that could block initial rendering of the page.” (terjemahan) “Resource kritis adalah resource yang dapat memblokir rendering awal halaman.”

  • Reduce angka dari critical resources — eliminate them, defer mereka download, atau mark them async. Fewer hal itu harus finish sebelum pertama paint.
  • Reduce critical path length — “a function of the dependency graph between the critical resources.” (terjemahan) “sebuah function dari dependency graph antara critical resources.” Fewer network round trips untuk fetch chain.
  • Reduce critical bytes — “the fewer critical bytes the browser has to download, the faster it can process content.” (terjemahan) “ fewer critical bytes browser memiliki untuk download, lebih cepat ini dapat proses konten.” Minify, compress, dan split.

dalam praktik itu berarti: inline critical (di atas—fold) CSS di <head> dan muat penuh stylesheet asynchronously; cakupan non-critical CSS dengan media kueri (<link rel="stylesheet" media="print"> downloads tetapi tidak block paint); defer non-essential JavaScript; dan preload resources Anda know Anda’ll perlu. ini adalah persis LCP advice I memberikan di my Ahrefs LCP guide — “Anda ingin untuk rearrange itu order di yang itu resources adalah downloaded dan processed” (terjemahan) “Anda ingin rearrange order di yang resources adalah downloaded dan processed” — dan inlining critical CSS “takes itu part dari itu CSS needed untuk load itu konten users see immediately dan lalu applies it secara langsung menjadi itu HTML.” (terjemahan) “takes bagian dari CSS needed untuk muat konten pengguna see immediately dan lalu applies ini secara langsung ke HTML.” I hanya tidak pernah called ini “itu critical rendering path” (terjemahan) “ critical rendering path” oleh name; itu’s mechanism underneath.

Preload dan fetchpriority melakukan berbeda jobs — jangan conflate them. preload forces browser untuk fetch sebuah resource early, sebelum ini akan jika tidak menjadi ditemukan — berguna untuk resources hidden di CSS atau JavaScript itu HTML parser dapat’t see coming. fetchpriority tidak fetch apa pun; ini hanya perubahan priority hint pada sebuah permintaan browser adalah sudah going untuk membuat. Neither adalah free: sebuah preload dengan wrong URL, as jenis, atau credentials mode dapat go unused atau duplicate sebuah permintaan browser membuat anyway, dan marking too banyak resources tinggi-priority hanya erases ordering benefit — browser, CDN, dan protocol perilaku semua memengaruhi bagaimana banyak ini sebenarnya helps. gunakan preload hanya untuk sebuah resource Anda’ve confirmed, dengan sebuah waterfall, sits pada critical path untuk halaman Anda’re testing — dan verify sebelum/setelah dengan lainnya trace alih-alih assuming win.

Core Web Vitals connection ( SEO angle)

ini adalah mengapa CRP tidak sebuah developer-hanya concern.

  • FCP tracks CRP completion, tetapi ini adalah sebuah milestone, tidak sebuah penuh diagnosis. pertama Contentful Paint fires ketika browser paints pertama konten, so sebuah panjang critical rendering path tends untuk tampilkan up sebagai sebuah late FCP. tetapi FCP adalah satu observed paint event — ini tidak oleh itself tell Anda yang stage dari pipeline disebabkan delay, dan sebuah fast FCP tidak jaminan setiap dependency finished cleanly. Treat sebuah late FCP sebagai sebuah sinyal itu sesuatu pada path adalah slow, lalu go trace apa.
  • LCP dapat inherit delay. Abby Hamilton (Dentsu) puts ini well: “Optimizing itu critical rendering path akan typically memiliki itu largest impact pada Largest Contentful Paint (LCP) since ini secara khusus focused pada bagaimana long it takes untuk pixels untuk muncul pada itu screen.” (terjemahan) “Optimizing critical rendering path akan typically memiliki largest impact pada Largest Contentful Paint (LCP) since ini adalah secara khusus focused pada bagaimana panjang ini takes untuk pixels untuk muncul pada screen.” web.dev memberikan Anda diagnostic: “A large delta between TTFB and FCP could indicate that the browser needs to download a lot of render-blocking assets.” (terjemahan) “Delta besar antara TTFB dan FCP dapat menunjukkan bahwa browser perlu mengunduh banyak resource yang memblokir rendering.” Delta itu adalah sebuah CRP smell test, tidak sebuah root-penyebab finding — konfirmasi ini dengan sebuah waterfall atau trace sebelum Anda perbaiki apa pun.
  • TBT/INP feel JavaScript. Scripts pada critical path compete untuk main utas; panjang tasks setelah paint hurt interactivity.

Keduanya LCP dan FCP adalah shaped oleh bagaimana fast browser mendapatkan melalui path, dan LCP adalah sebuah Core Web Vital Google menggunakan sebagai sebuah sinyal peringkat — itu’s tautan antara sebuah internals topic dan penelusuran. Field outcomes dan apa pun spesifik peringkat effect masih perlu mereka own evidence (CrUX/Search Console data), tidak hanya sebuah fast lab trace.

Bagaimana Googlebot adalah affected

Google’s Web rendering Service (WRS) adalah bagian itu trips orang up. Google “memproses JavaScript web apps di three main phases: Crawling, Rendering, Indexing,” (terjemahan) “memproses JavaScript web apps di three main phases: crawling, rendering, pengindeksan,” dan “Once Google’s resources allow, a headless Chromium renders the page and executes the JavaScript” (terjemahan) “Setelah resource Google mengizinkan, Chromium headless merender halaman dan menjalankan JavaScript.” menggunakan “an evergreen version of Chromium.” (terjemahan) “versi Chromium yang evergreen.” sama rendering mesin sebagai sebuah nyata Chrome — yang berarti blocking resources slow down Googlebot’s rendering too, yang sama cara mereka’d slow down sebuah nyata browser. itu’s sebuah reasonable inference dari shared architecture, tidak sebuah claim itu setiap delay memengaruhi Googlebot identically untuk setiap pengguna atau itu ini translates secara langsung ke sebuah pengindeksan atau peringkat penalty — Google hasn’t published itu tingkat dari equivalence, dan confirming ini untuk sebuah spesifik halaman perlu Penelusuran Console / pengindeksan evidence, tidak hanya sebuah CRP audit.

Three consequences worth internalizing:

  • ** render queue menambahkan lag.** halaman tunggu “a few seconds, but it can take longer than that” (terjemahan) “sebuah sedikit seconds, tetapi ini dapat take lebih lama daripada itu” di rendering queue. sebuah slow CRP compounds itu delay.
  • WRS adalah stateless dan effectively cold-cache. sebagai I deskripsikan ini di my JavaScript SEO guide, “Google loads each page stateless like it’s a fresh load.” (terjemahan) “Google memuat setiap halaman stateless like ini adalah sebuah fresh muat.” Google’s own docs konfirmasi WRS tidak retain state di seluruh halaman memuat dan “may ignore caching headers,” (terjemahan) “dapat mengabaikan header caching,” yang “may lead WRS to use outdated JavaScript or CSS resources.” (terjemahan) “dapat menyebabkan WRS menggunakan resource JavaScript atau CSS yang sudah kedaluwarsa.” So Anda dapat’t lean pada sebuah warm cache untuk hide sebuah berat critical path — setiap render adalah essentially sebuah pertama visit. (ini juga busts “Google caches resources, so CRP only matters on the first visit” (terjemahan) “Google caches resources, so CRP hanya penting pada pertama visit” myth.)
  • jangan block critical resources di robots.txt. WRS perlu Anda CSS dan JS untuk render correctly. sebagai I put ini di my JavaScript SEO guide: “Don’t block access to resources if they are needed to build part of the page or add to the content.” (terjemahan) “jangan block access untuk resources jika mereka adalah needed untuk bangun bagian dari halaman atau tambahkan untuk konten.” Block them dan Anda dapat break rendering entirely — Google sees sebuah rusak halaman.

Bing memiliki Tidak equivalent “critical rendering path” (terjemahan) “critical rendering path” doc series, tetapi principle adalah universal untuk apa pun browser-based crawler, dan Bingbot’s JS-rendering budget adalah lebih constrained daripada Google’s — yang membuat sebuah lean critical path penting lebih untuk Bing penemuan, tidak lebih sedikit.

Satu edge case: sebuah early paint tidak prove Anda konten adalah di sana

CRP model mendeskripsikan getting sesuatu pada screen — ini tidak promise itu sesuatu adalah Anda sebenarnya konten. Client-dirender apps sering paint sebuah shell (skeleton, memuat state, empty layout) quickly, yang satisfies FCP, sementara konten readers dan Googlebot sebenarnya care tentang adalah masih menunggu pada sebuah JavaScript bundle untuk download, execute, dan fetch data. sebuah fast FCP pada sebuah halaman like itu adalah sebuah salah sinyal — critical rendering path finished untuk shell, tidak untuk konten.

server-dirender atau statically generated HTML mostly menghindari ini karena bermakna konten adalah sudah di awal markup alih-alih injected kemudian. jika Anda’re auditing sebuah JS-berat halaman, jangan berhenti di FCP: periksa apa sebenarnya terlihat pada screen di itu timestamp (sebuah filmstrip atau trace menampilkan ini) versus ketika utama konten becomes terlihat, dan treat itu sebagai dua berbeda pertanyaan.

Di mana SEOs sebenarnya memenuhi CRP

paling umum touchpoint adalah PageSpeed Insights / Lighthouse “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit. sebagai Abby Hamilton mendeskripsikan workflow: “navigate to ‘Eliminate render-blocking resources’ under ‘Diagnostics,’ and expand the content to see a list of first-party and third-party resources blocking the first paint.” (terjemahan) “navigate untuk ‘Eliminate render-blocking resources’ di bawah ‘Diagnostics,’ dan expand konten untuk see sebuah list dari pertama-party dan ketiga-party resources blocking pertama paint.” di WebPageTest, baca waterfall dan temukan apa pun memuat sebelum “Start Render” (terjemahan) “Mulai Render” line; di Chrome DevTools, Coverage tab menampilkan unused CSS/JS Anda dapat defer. Satu caution pada apa pun single trace: ketiga-party connection setup, consent-gated scripts, sebuah service worker, atau sebuah warm versus cold cache dapat semua perubahan apa mendapatkan ditemukan dan ketika antara berjalan — sebuah single lab lulus adalah sebuah sample, tidak sebuah jaminan dari apa setiap pengunjung sees.

Related topics — di mana untuk go berikutnya

ini halaman adalah hub untuk render-blocking berfungsi. deep dive sits di bawah ini:

  • Render-blocking resources — practical, audit-driven companion untuk ini halaman: persis cara temukan blocking CSS dan JavaScript di PageSpeed Insights, Lighthouse, dan WebPageTest, perbedaan antara async dan defer di detail, inlining critical CSS, scoping stylesheets dengan media kueri, dan memperbaiki “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” warning langkah oleh langkah.

untuk metrics ini path drives, see Core Web Vitals, Largest Contentful Paint (LCP), dan pertama Contentful Paint (FCP). untuk bagaimana Googlebot’s rendering langkah berfungsi sebagai bagian dari bigger pipeline, see JavaScript SEO dan Bagaimana Penelusuran berfungsi cluster.

Add an expert note

Pin an expert quote

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