Critical rendering Path

TL;DR — critical rendering path adalah list dari langkah sebuah browser memiliki untuk finish sebelum ini dapat tampilkan Anda apa pun pada screen — baca HTML, baca CSS, figure out apa goes di mana, dan paint pixels. beberapa files (stylesheets, scripts) memiliki untuk muat sebelum itu dapat happen; itu adalah “render-blocking.” (terjemahan) “render-blocking.” jika Anda’ve ever seen “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” di PageSpeed Insights, ini adalah apa ini adalah talking tentang.

Apa critical rendering path adalah

Ketika Anda open sebuah halaman, browser tidak hanya display file ini downloaded. ini memiliki untuk bangun halaman pertama, di order:

1. Baca HTML dan turn ini ke sebuah structure called DOM (sebuah map dari semuanya pada halaman).
2. Baca CSS dan turn ini ke sebuah structure called CSSOM (sebuah map dari bagaimana semuanya seharusnya look).
3. Combine itu dua ke sebuah render tree — hanya stuff itu’s sebenarnya terlihat.
4. Layout — berfungsi out persis di mana setiap hal goes dan bagaimana big ini adalah.
5. Paint — finally draw pixels pada Anda screen.

critical rendering path adalah subset dari itu berfungsi browser harus finish sebelum ini dapat paint pertama pixel. lebih cepat ini mendapatkan melalui, lebih cepat halaman muncul.

Apa arti “render-blocking” (terjemahan) “yang memblokir rendering”

beberapa files put brakes pada ini seluruh proses:

• CSS blocks painting. browser refuses untuk draw apa pun until ini memiliki baca semua blocking stylesheets — jika tidak halaman akan flash up unstyled.
• JavaScript blocks reading HTML. Ketika browser hits sebuah wajar <script> tag, ini berhenti membangun halaman, berjalan script, dan hanya lalu continues.

So sebuah sedikit berat stylesheets dan scripts di <head> dapat hold up entire halaman, bahkan jika rest dari ini adalah tiny.

Mengapa Anda harus care

moment browser paints pertama konten adalah sebuah metric called pertama Contentful Paint (FCP) — dan main hal ini menampilkan up sebagai adalah Anda biggest terlihat element, Largest Contentful Paint (LCP). LCP adalah satu dari Google’s Core Web Vitals, yang dapat memengaruhi rankings. So sebuah slow critical rendering path tidak hanya annoying untuk pengunjung — ini dapat diam-diam cost Anda di penelusuran.

baik news: Anda tidak memiliki untuk “perbaiki itu browser.” (terjemahan) “perbaiki browser.” Anda membuat path lebih singkat oleh memuat fewer hal up front, membuat them lebih kecil, dan tidak letting non-essential scripts dan styles block pertama paint.

ingin nyata versi — five-langkah pipeline di detail, bagaimana CSS blocking differs dari JavaScript blocking, three optimization levers, dan bagaimana Googlebot adalah affected? Switch untuk Advanced tab.

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.

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). From Google’s PageSpeed docs: “whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML,” and “in the case of an external script the parser is also forced to wait for the resource to download.” The net effect: “By default JavaScript blocks DOM construction and thus delays the time to first render.” A parser stall doesn’t mean the network goes idle, though — browsers run a secondary preload scanner that keeps discovering and fetching upcoming resources (images, other scripts, stylesheets) while the main parser is stuck on a script. The fix for the block itself is async/defer — but note async only removes the download block; the script still executes on the main thread when it arrives, so defer (which waits until parsing finishes and preserves order) is usually safer for the CRP.

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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, but it’s a milestone, not a full diagnosis. First Contentful Paint fires when the browser paints the first content, so a long critical rendering path tends to show up as a late FCP. But FCP is one observed paint event — it doesn’t by itself tell you which stage of the pipeline caused the delay, and a fast FCP doesn’t guarantee every dependency finished cleanly. Treat a late FCP as a signal that something on the path is slow, then go trace what.

• LCP can inherit the delay. Abby Hamilton (Dentsu) puts it well: “Optimizing the critical rendering path will typically have the largest impact on Largest Contentful Paint (LCP) since it’s specifically focused on how long it takes for pixels to appear on the screen.” web.dev gives you the diagnostic: “A large delta between TTFB and FCP could indicate that the browser needs to download a lot of render-blocking assets.” That delta is a CRP smell test, not a root-cause finding — confirm it with a waterfall or trace before you fix anything.
• TBT/INP feel the JavaScript. Scripts on the critical path compete for the main thread; long tasks after paint hurt interactivity. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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) is the part that trips people up. Google “processes JavaScript web apps in three main phases: Crawling, Rendering, Indexing,” and “Once Google’s resources allow, a headless Chromium renders the page and executes the JavaScript” using “an evergreen version of Chromium.” Same rendering engine as a real Chrome — which means blocking resources slow down Googlebot’s rendering too, the same way they’d slow down a real browser. That’s a reasonable inference from shared architecture, not a claim that every delay affects Googlebot identically to every user or that it translates directly into an indexing or ranking penalty — Google hasn’t published that level of equivalence, and confirming it for a specific page needs Search Console / indexing evidence, not just a CRP audit. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Three consequences worth internalizing:

«- The render queue adds lag. Pages wait “a few seconds, but it can take longer than that” in the rendering queue. A slow CRP compounds that delay.

• WRS is stateless and effectively cold-cache. As I describe it in my JavaScript SEO guide, “Google loads each page stateless like it’s a fresh load.” Google’s own docs confirm WRS doesn’t retain state across page loads and “may ignore caching headers,” which “may lead WRS to use outdated JavaScript or CSS resources.” So you can’t lean on a warm cache to hide a heavy critical path — every render is essentially a first visit. (This also busts the “Google caches resources, so CRP only matters on the first visit” myth.)
• Don’t block critical resources in robots.txt. WRS needs your CSS and JS to render correctly. As I put it in 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.” Block them and you can break rendering entirely — Google sees a broken page. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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.

AI summary

sebuah condensed take pada Advanced versi:

• CRP = sebuah dependency model, tidak sebuah rigid schedule: HTML → DOM, CSS → CSSOM, DOM + CSSOM → render tree → layout → paint → composite/display. ini adalah sebuah berguna mental model; browser stream HTML progressively dan dapat pipeline, overlap, atau rerun bagian dari ini berfungsi.
• Dua distinct blocks, keduanya conditional: CSS blocks rendering ketika ini sebenarnya applies (media-mismatched stylesheets jangan block, tetapi dapat mulai applying kemudian jika conditions perubahan), dan synchronous JavaScript blocks DOM construction ( parser berhenti di setiap script — though sebuah preload scanner mempertahankan fetching lainnya resources selama stall). defer adalah biasanya safer daripada async untuk path.
• Three optimization levers: minimize angka dari critical resources, critical path length (network round trips di dependency graph), dan critical bytes. Tactics: inline critical CSS, async non-critical CSS melalui media kueri, defer JS, dan preload — tetapi hanya resources confirmed critical dengan sebuah waterfall; preload dan fetchpriority adalah berbeda alat (early fetch vs. sebuah priority hint) dan misuse wastes bandwidth.
• Core Web Vitals tautan: FCP tracks CRP completion tetapi adalah sebuah milestone, tidak sebuah root-penyebab diagnosis; sebuah besar TTFB-untuk-FCP delta adalah sebuah smell test untuk render-blocking assets; sebuah panjang CRP dapat delay LCP too. JS pada path juga pressures main utas (TBT/INP). LCP adalah sebuah sinyal peringkat, tetapi field outcomes perlu mereka own evidence.
• Googlebot: Web rendering Service berjalan sebuah stateless, evergreen, effectively cold-cache headless Chromium, so blocking resources slow -nya rendering yang sama cara mereka’d slow sebuah nyata browser’s — though tepat pengguna-equivalence dan apa pun pengindeksan/peringkat impact tidak proven oleh itu alone; render queue menambahkan lag; WRS dapat ignore cache headers; dan critical CSS/JS harus tidak menjadi blocked di robots.txt.
• Edge case: sebuah early shell paint (umum di client-dirender apps) dapat satisfy FCP tanpa nyata konten menjadi ready — periksa apa sebenarnya pada screen, tidak hanya ketika pertama pixel appeared.
• Di mana Anda memenuhi ini: PageSpeed Insights “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit. Baca WebPageTest waterfall’s “Start Render” (terjemahan) “Mulai Render” line atau DevTools Coverage tab — dan treat apa pun single trace sebagai sebuah sample, tidak sebuah jaminan, since ketiga-party/consent/service-worker/cache perilaku varies jalankan untuk jalankan.

Dokumentasi resmi

Utama-sumber documentation pada rendering pipeline dan render-blocking resources.

Google / web.dev

• Critical rendering path (overview) — concept dan mengapa optimizing ini improves time untuk pertama render.
• Constructing Object Model — DOM dan CSSOM construction (bytes → characters → tokens → nodes → object model).
• Render-tree Construction, Layout, dan Paint — combining DOM + CSSOM, box model, dan display:none vs visibility:hidden.
• Render-Blocking CSS — mengapa CSS blocks rendering dan bagaimana media kueri membuat beberapa CSS non-blocking.
• hapus Render-Blocking JavaScript — bagaimana parser berhenti di scripts, dan async/defer.
• Optimizing Critical rendering Path — three variables: critical resources, path length, bytes.
• mengoptimalkan Largest Contentful Paint — TTFB-untuk-FCP delta dan render-blocking’s effect pada LCP.

Google Search Central — Googlebot / WRS

• memahami JavaScript SEO basics — crawl → render → indeks, rendering queue, evergreen headless Chromium.
• Perbaiki Penelusuran-Related JavaScript masalah — WRS resource fetching, stateless rendering, dan cache perilaku.

Bing / Microsoft

• Tidak Bing-spesifik “critical rendering path” (terjemahan) “critical rendering path” documentation ada. Bing Webmaster guidelines merekomendasikan mempertahankan JavaScript minimal dan ensuring critical konten adalah di awal HTML — yang sama principle, dengan sebuah tighter rendering budget daripada Google’s.

Quotes dari sumber

pada—record statements dari Google/web.dev dan named industry experts. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

web.dev — pipeline

• “Bytes → characters → tokens → nodes → object model.” (terjemahan) “Bytes → characters → tokens → nodes → object model.” Jump untuk quote
• “The CSS bytes are converted into characters, then tokens, then nodes, and finally they are linked into a tree structure known as the ‘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).” Jump untuk quote
• “The CSSOM and DOM are independent data structures!” (terjemahan) “ CSSOM dan DOM adalah independent data structures!” Jump untuk quote
• “The DOM and CSSOM trees combine to form the render tree.” (terjemahan) “ DOM dan CSSOM trees combine untuk form render tree.” Jump untuk quote
• “The output of the layout process is a ‘box model,’ which precisely captures the exact position and size of each element within the viewport.” (terjemahan) “ output dari layout proses adalah sebuah ‘box model,’ yang precisely captures tepat position dan size dari setiap element di dalam viewport.” Jump untuk quote

web.dev / Google — render-blocking

«- “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.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Both HTML and CSS are render-blocking resources.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh lima, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Media types and media queries allow us to mark some CSS resources as non-render blocking.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh lima, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML.” — Google PageSpeed Insights docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh lima, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “By default JavaScript blocks DOM construction and thus delays the time to first render.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh lima, bagian kecil lima: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

web.dev — three variables

«- “A critical resource is a resource that could block initial rendering of the page.” Jump to quote

• “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.” Jump to quote
• “A large delta between TTFB and FCP could indicate that the browser needs to download a lot of render-blocking assets.” — web.dev, Optimize LCP. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«Google Search Central — Googlebot / WRS » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«- “a headless Chromium renders the page and executes the JavaScript.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Googlebot and its Web Rendering Service (WRS) component continuously analyze and identify resources that don’t contribute to essential page content and may not fetch such resources.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Abby Hamilton, SEO Director di Dentsu (melalui mesin pencari Journal)

• “Optimizing the critical rendering path will typically have the largest impact on Largest Contentful Paint (LCP) since it’s specifically focused on how long it takes for pixels to appear on the 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.” Jump untuk quote

Critical-rendering-path audit — checklist

sebuah lulus untuk konfirmasi browser (dan Googlebot) dapat paint Anda di atas—fold konten fast:

• Jalankan URL melalui PageSpeed Insights / Lighthouse dan review “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” di bawah Diagnostics.
• Critical (di atas—fold) CSS adalah inlined di <head>; penuh stylesheet memuat asynchronously (non-blocking).
• Non-critical stylesheets adalah scoped dengan media kueri (media="print", dan seterusnya.) so mereka download tetapi jangan block pertama paint.
• Tidak synchronous <script> tags di <head> itu tidak truly diperlukan untuk pertama render — gunakan defer (atau async di mana order tidak penting).
• Critical bytes minimized — CSS/JS minified, text compressed (Brotli/gzip), Tidak unused CSS/JS shipped pada critical path (periksa DevTools Coverage tab).
• Critical path length dipertahankan pendek — fewer dependency-chained round trips; preload resources Anda know pertama paint perlu.
• di WebPageTest, tidak ada apa pun penting memuat setelah “Start Render” (terjemahan) “Mulai Render” line.
• Di atas—fold / LCP elements adalah tidak hidden dengan display:none (yang menghapus them dari render tree) ketika mereka seharusnya render immediately.
• CSS dan JS adalah tidak blocked di robots.txt — WRS harus fetch them untuk render.
• TTFB-untuk-FCP delta diperiksa di data lapangan — sebuah besar kesenjangan poin untuk render-blocking assets.

mental models

1. pipeline adalah sebuah fixed sequence — temukan yang langkah adalah slow. Bytes → DOM, CSS → CSSOM, render tree → layout → paint. setiap langkah menunggu pada satu sebelum ini. Ketika pertama paint adalah late, jangan guess — locate yang langkah adalah bottleneck (menunggu pada CSS? sebuah blocking script? sebuah giant DOM?).

2. Dua blocks, dua mechanisms — perbaiki right satu. CSS blocks painting (Tidak render until CSSOM adalah menyelesaikan). JavaScript blocks parsing ( parser berhenti di setiap synchronous script). Treating sebuah CSS masalah like sebuah JS masalah (atau vice versa) wastes effort. tanyakan yang gate adalah closed.

3. three levers. setiap CRP perbaiki reduces satu dari: angka dari critical resources, length dari critical path (round trips), atau bytes pada ini. jika sebuah perubahan tidak move satu dari itu three, ini tidak sebuah CRP optimization.

4. FCP adalah scoreboard untuk path. pertama Contentful Paint adalah CRP completing. sebuah besar TTFB-untuk-FCP delta adalah diagnostic itu render-blocking assets adalah penyebab — mulai di sana sebelum touching apa pun else.

5. Googlebot renders like sebuah (stateless, cold) browser. WRS menggunakan yang sama mesin, dengan Tidak warm cache dan Tidak retained state. So mengoptimalkan path untuk bot yang sama cara Anda melakukan untuk pengguna — dan tidak pernah block CSS/JS ini perlu untuk render di robots.txt.

«## Critical rendering path — cheat sheet » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Apa blocks apa

async vs defer vs synchronous

** three levers**

Fast facts

• FCP = pengukuran dari CRP completion; besar TTFB→FCP delta = render-blocking assets.
• display:none → dihapus dari render tree; visibility:hidden → di tree, masih laid out.
• WRS = stateless, evergreen headless Chromium, dapat ignore cache headers.
• tidak pernah block critical CSS/JS di robots.txt — ini dapat break Google’s render.

alat untuk diagnosing critical rendering path

• PageSpeed Insights / Lighthouse — “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit di bawah Diagnostics lists pertama- dan ketiga-party CSS/JS delaying pertama paint. paling umum starting poin.
• Chrome DevTools — performa panel — record sebuah muat dan watch DOM/CSSOM/layout/paint events; flame chart menampilkan di mana main utas adalah blocked.
• Chrome DevTools — Coverage tab — surfaces unused CSS dan JavaScript Anda dapat defer atau hapus dari critical path.
• WebPageTest — baca waterfall dan “Start Render” (terjemahan) “Mulai Render” line; apa pun memuat sebelum ini adalah pada critical path. Filmstrip view menampilkan ketika pertama paint sebenarnya happens.
• Google Search Console — pemeriksaan URL (dirender HTML / screenshot) — see apa WRS sebenarnya dirender, untuk catch blocked atau slow critical resources.
• CrUX / PageSpeed Insights data lapangan — nyata-pengguna FCP dan TTFB-untuk-FCP kesenjangan itu flags render-blocking di production.

Resources worth Anda time

My related writing

• JavaScript SEO Issues & Best Practices — rendering side: WRS sebagai sebuah stateless muat, tidak blocking resources Google perlu, dan konten itu harus menjadi di DOM oleh default.
• Largest Contentful Paint (LCP) — reordering resource memuat dan inlining critical CSS — CRP optimizations, described di LCP istilah.
• Beginner’s Guide untuk SEO teknis — di mana rendering dan performa fit di bigger picture.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — crawling, rendering, pengindeksan, dan peringkat. (My standing disclaimer applies: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

Official

• web.dev’s critical-rendering-path series — overview, object model, render tree, render-blocking CSS, dan optimizing CRP.
• hapus Render-Blocking JavaScript (Google PageSpeed Insights).

dari others

• Identify & Reduce Render-Blocking Resources (mesin pencari Journal, Abby Hamilton / Dentsu) — strong operational guide pada CRP→LCP tautan dan reading PageSpeed audit.
• r/TechSEO — community untuk rendering dan Core Web Vitals debugging.

Yang critical-path bottleneck seharusnya Anda perbaiki pertama?

Critical-rendering-path mistakes

Deferring setiap script tanpa memeriksa dependencies

Mengubah execution order dapat break code itu expects sebelumnya globals atau parsed elements. Map dependencies dan validate perilaku sebelum dan setelah timing perubahan.

Inlining sebuah entire stylesheet

Inlining menghapus sebuah permintaan tetapi dapat bloat setiap HTML respons dan discard repeat-view caching. Inline hanya sebuah diukur, kecil critical set ketika tradeoff adalah justified.

Blocking CSS atau JavaScript dari Googlebot

Google’s renderer perlu resources itu bangun halaman. sebuah robots aturan itu hides them dapat mencegah Google dari seeing dirender konten correctly.

Optimizing permintaan count tanpa measuring path length

Fewer files adalah tidak secara otomatis lebih cepat jika satu besar resource delays semuanya. mengukur critical bytes, dependency depth, dan arrival timing together.

Uji pemahaman Anda: Critical rendering Path

Five quick pertanyaan pada bagaimana sebuah browser turns bytes ke pixels. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan