Ngôn ngữ

Render-Blocking Các tài nguyên

Điều gì render-blocking các tài nguyên là, cách CSS và synchronous JavaScript delay đó cốt yếu kết xuất path, vì sao đó hurts Core Web Vitals (và indirectly SEO), cách tìm them, và cách sửa them với async, defer, cốt yếu CSS, và media các truy vấn.

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

Render-blocking các tài nguyên là CSS và synchronous JavaScript files một trình duyệt phải download và xử lý trước điều này có thể paint bất cứ điều gì. An applicable stylesheet trong đó head là render-blocking theo mặc định; một <script> trong đó head không có async hoặc defer là parser-blocking theo mặc định (một related nhưng formally distinct mechanism từ đó HTML spec rõ ràng blocking="render" thuộc tính). async loads trong parallel và chạy khi ready (unordered); defer loads trong parallel và chạy sau phân tích cú pháp, trong order; module scripts defer theo mặc định. They có thể delay Đầu tiên Contentful Paint và Largest Contentful Paint, và LCP là dùng by Google Core Web Vitals xếp hạng các hệ thống — một tiebreaker, không một được ghi lại dominant xếp hạng factor. All eligible 200-status các trang enter Google kết xuất queue regardless of liệu JavaScript là present; Google fetches nhiều nhất 2 MB theo non-PDF URL (including các header), riêng cho mỗi referenced file, mà là một fetch limit, không một render-blocking-cụ thể hình phạt. Tìm them với đó hiện tại Lighthouse 13 'Render blocking các yêu cầu' Insight và đó Chrome DevTools Coverage tab; cách sửa by deferring non-cốt yếu JS, inlining chỉ cốt yếu CSS nơi một trace cho thấy đây là đó bottleneck, và dùng media các thuộc tính cho conditional stylesheets — thì re-kiểm thử on một repeated trace.

TL;DR — Render-blocking các tài nguyên delay một trang đầu tiên paint. An applicable CSS stylesheet trong đó <head> chặn theo mặc định (non-matching media, disabled, hoặc dynamic insertion với không rõ ràng blocking="render" không). MỘT parser-inserted classic <script> không có async/defer là parser-blocking by default — pausing HTML phân tích cú pháp — mà là một related nhưng distinct mechanism từ đó formal “render-blocking” (bản dịch) «render-blocking» thuộc tính model. async loads trong parallel và executes khi downloaded (unordered, có thể interrupt phân tích cú pháp); defer loads trong parallel và executes sau đó HTML là parsed (trong order); module scripts defer theo mặc định. Những delays có thể push lại FCP và LCP, và LCP là dùng by Google xếp hạng các hệ thống — nhưng đây là một tiebreaker, không một dominant factor, và Google documents không trực tiếp render-blocking xếp hạng weight. Google fetches nhiều nhất 2 MB theo non-PDF URL (including các header), riêng cho mỗi referenced JS/CSS file — một truncation boundary, không một render-blocking-cụ thể hình phạt — và all eligible 200-status các trang enter Google kết xuất queue liệu hoặc không they dùng JavaScript. Tìm blockers với đó hiện tại Lighthouse 13 “Render-blocking requests” (bản dịch) «Render-blocking các yêu cầu» Insight và đó DevTools Coverage tab; cách sửa với defer, cốt yếu CSS chỉ nơi một trace cho thấy đây là đó bottleneck, media các thuộc tính, và removing unused code — thì re-kiểm thử với một repeated, khớp trace.

Evidence for this claim Stylesheets participate in the critical rendering path and can block first render until CSS is processed. Scope: Current official or standards documentation. Confidence: high · Verified: web.dev: Critical rendering path Evidence for this claim Classic scripts without async or defer can block HTML parsing while fetched and executed. Scope: Current official or standards documentation. Confidence: high · Verified: MDN: script element

cốt yếu kết xuất path

Để draw một trang, một trình duyệt chạy một fixed sequence: parse đó HTML vào đó DOM, parse đó CSS vào đó CSSOM, combine them vào một render tree, lay điều này out, và paint. Đó sequence là đó cốt yếu kết xuất path, và bất cứ điều gì đó stalls điều này delays đó đầu tiên pixel. As Google Ilya Grigorik được diễn đạt điều này, “optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.” (bản dịch) «optimizing đó cốt yếu kết xuất path refers để prioritizing đó display of nội dung đó relates để đó hiện tại người dùng hành động.» Render-blocking các tài nguyên là đó điều sitting trong đó path với của họ hand lên, đang làm đó trình duyệt chờ.

CSS là render-blocking theo mặc định — Khi nó applicable

Đó trình duyệt sẽ không paint styled nội dung until điều này có đó CSSOM được xây dựng từ mỗi applicable blocking stylesheet, và MDN’s <link> reference là rõ ràng về đó phạm vi: “only link elements in the document’s <head> can possibly block rendering. By default, a link element with rel="stylesheet" in the <head> blocks rendering when the browser discovers it during parsing.” (bản dịch) «chỉ elements trong đó document thẻ head có thể possibly block kết xuất. Theo mặc định, một element với trong đó thẻ head chặn kết xuất khi đó trình duyệt discovers điều này during phân tích cú pháp.» Từ web.dev Optimize LCP hướng dẫn: “Style sheets loaded from the HTML markup will block rendering of all content that follows them.” (bản dịch) «Style sheets loaded từ đó HTML markup sẽ block kết xuất of all nội dung đó follows them.» Này là intentional — việc vẽ unstyled HTML đầu tiên và re-styling điều này produces an ugly flash — nhưng “theo mặc định” có real edges:

  • stylesheet với non-matching media thuộc tính (e.g. media="print" on screen visit) là fetched nhưng không block.
  • stylesheet với disabled đặt không phải loaded hoặc applied cho đến khi bạn clear thuộc tính.
  • stylesheet đã thêm dynamically qua script không phải render-blocking trừ khi bạn cũng đặt blocking="render" on nó explicitly — dynamic insertion opts out của default.

Trong của nó applicable phạm vi, bloated blocking stylesheet có thể vẫn hold toàn bộ trang hostage: Khi nó takes lâu hơn để load hơn của bạn LCP image itself, LCP element có thể’t render ngay cả sau khi của nó own tài nguyên có finished downloading.

Scripts: parser-blocking theo mặc định, formally render-blocking on yêu cầu

MỘT parser-inserted classic <script> trong đó <head> không có async hoặc defer là parser-blocking theo mặc định: đó trình duyệt dừng building đó DOM, fetches đó script, executes điều này, và chỉ thì resumes. Google legacy PageSpeed tài liệu spell out đó cost: “whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.” (bản dịch) «bất cứ khi nào đó parser encounters một script điều này có để dừng và execute điều này trước điều này có thể continue phân tích cú pháp đó HTML. Trong đó case of an external script đó parser là cũng forced để chờ cho đó tài nguyên để download, mà có thể incur một hoặc hơn network roundtrips và delay đó time để đầu tiên render of đó trang.» As đó Optimize LCP hướng dẫn diễn đạt điều này bluntly, “it is almost never necessary to add synchronous scripts… to the <head> of your pages.” (bản dịch) «điều này là gần như không bao giờ necessary để thêm synchronous scripts… để đó thẻ head of của bạn các trang.»

Worth đang precise ở đây: parser-blocking và đó HTML spec formal render-blocking thuộc tính model là related nhưng distinct mechanisms. Theo MDN’s <script> reference, đó blocking="render" token “explicitly indicates that certain operations should be blocked until the script has executed,” (bản dịch) «explicitly indicates đó certain operations nên là blocked until đó script có executed,» và “only script elements in the document’s <head> can possibly block rendering” (bản dịch) «chỉ elements trong đó document thẻ head có thể possibly block kết xuất» này way — “if such a script element is added dynamically via script, you must set blocking = "render" for it to block rendering.” (bản dịch) «nếu such một element là đã thêm dynamically qua script, bạn phải set cho điều này để block kết xuất.» Trong thực tế, một default parser-blocking <head> script đã stalls đó pipeline đủ đó phân biệt rarely thay đổi điều gì bạn làm về điều này; điều này matters mainly cho dynamically inserted scripts, mà cần đó rõ ràng thuộc tính để participate, và trình duyệt hỗ trợ cho blocking="render" là vẫn limited và worth kiểm tra trước khi bạn rely on điều này.

Một nhiều hơn default worth knowing: type="module" scripts defer theo mặc định (không defer thuộc tính needed) trừ khi async là đã thêm để thay đổi đó scheduling.

async so với defer — họ không phải giống nhau

Đây là single phần lớn hữu ích phân biệt cho sửa render-blocking JS. Cả hai download script trong parallel với HTML phân tích cú pháp, so neither là parser-blocking during download. họ differ trong execution:

  • async — executes immediately Khi download finishes, mà có thể interrupt phân tích cú pháp, và chạy trong không guaranteed order. Good cho truly independent thứ ba-party scripts (phân tích, quảng cáo) đó không touch của bạn DOM hoặc phụ thuộc on mỗi khác.
  • defer — executes sau khi HTML là fully parsed, trong document order. Good cho scripts đó phụ thuộc on DOM hoặc on mỗi khác (phần lớn của bạn own code).
  • Module scripts (type="module") — deferred theo mặc định; thêm async nếu bạn cụ thể muốn module-ready-order execution thay vì.

nếu bạn remember một rule: defer cho bất cứ điều gì ordered hoặc DOM-phụ thuộc, async chỉ cho fire-và-forget thứ ba-party scripts.

Cách điều này ảnh hưởng SEO

chain là thực nhưng có thực boundaries. không overstate nó trong either direction:

  1. Render-blocking các tài nguyên delay Đầu tiên Contentful Paint — khi bất kỳ nội dung đầu tiên xuất hiện.
  2. They có thể delay Largest Contentful Paint — Google chính loading chỉ số — though một flagged tài nguyên không proof đây là đó dominant trường bottleneck, và removing điều này không bảo đảm một tốt hơn LCP; đó Lighthouse Insight các báo cáo một potential delay từ một observed trace, không một guaranteed trường effect.
  3. LCP là một Core Web Vitals chỉ số, measured tại đó 75th percentile of real trường dữ liệu over 28 days, và Google says Core Web Vitals “are used by our ranking systems.” (bản dịch) «là dùng by của chúng ta xếp hạng các hệ thống.» Đó “good” LCP ngưỡng là ≤2,5 s.
  4. Google trang-experience tài liệu không define một trực tiếp render-blocking xếp hạng weight, chain, hoặc tiebreaker, và cho không xếp hạng bảo đảm từ removing blockers — điều này says relevance vẫn wins, nhưng “having a great page experience can contribute to success in Search” (bản dịch) «có một great trang experience có thể contribute để success trong Tìm kiếm» khi có lots of similarly helpful nội dung để chọn từ.

Giữ đó weighting honest. Martin Splitt line là đó right calibration: “a fast website is a little more helpful than a slow website,” (bản dịch) «một fast website là một little hơn helpful hơn một chậm website,» nhưng “content is still the king.” (bản dịch) «nội dung là vẫn đó king.» Sửa một tài nguyên đó là genuinely delaying của bạn LCP là worth đang làm cho UX và as một input among nhiều Google các hệ thống weigh — đây là không một lever với một được ghi lại, dedicated xếp hạng multiplier.

crawl-efficiency angle — corrected

I previously được diễn đạt nặng render-blocking JavaScript as điều gì đó “pushes” hoặc “forces” các trang vào Google kết xuất queue. đó là không chính xác, và đây là worth correcting plainly: Google hiện tại JavaScript SEO tài liệu trạng thái đó “all pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” (bản dịch) «all các trang với một 200 HTTP mã trạng thái là đã gửi để đó kết xuất queue, không quan trọng liệu JavaScript là present on đó trang.» Mỗi eligible trang goes qua đó queue — render-blocking các tài nguyên không tạo một special on-ramp vào điều này.

Evidence for this claim Google's current guidance says all eligible pages returning HTTP 200 enter its rendering queue regardless of whether JavaScript is present, so render-blocking JavaScript should not be claimed to force a page into that queue. Scope: crawling, rendering, indexing Confidence: high · Verified: Understand the JavaScript SEO basics

Điều gì đó tài nguyên loại làm thay đổi là cách nhiều hoạt động happens khi một trang reaches kết xuất. Onely thử nghiệm được tìm thấy Google needed 9× lâu hơn để fully crawl JavaScript-được kết xuất các trang hơn giống hệt HTML các trang (313 hours so với. 36 hours) trong của họ kiểm thử setup, vì “pages that require rendering have to wait in a rendering queue in addition to the crawl queue which applies to all pages.” (bản dịch) «các trang đó require kết xuất có để chờ trong một kết xuất queue ngoài ra để đó crawl queue mà áp dụng để all các trang.» Treat đó as evidence đó nội dung requiring client-side kết xuất carries một real time-để-chỉ mục cost trong đó nghiên cứu — không as proof đó một cụ thể render-blocking CSS hoặc JS file là điều gì triggers queueing.

On file size: Google crawling tài liệu mô tả một 2 MB fetch limit theo non-PDF URL, including HTTP các header, applied riêng để mỗi riêng lẻ tài nguyên điều này các yêu cầu — so một lớn <head> script hoặc stylesheet nhận của nó own 2 MB counter, không một shared budget với đó HTML. đó là một fetch/truncation boundary, không một “processing limit,” (bản dịch) «processing limit,» và Google không document một special crawl hoặc lập chỉ mục hình phạt tied cụ thể để render-blocking các tài nguyên beyond đó chung truncation risk.

Evidence for this claim Google currently fetches up to 2 MB, including HTTP headers, for each individual non-PDF URL; referenced resources such as JavaScript and CSS have separate per-URL counters and the same 2 MB fetch limit. This supports a per-resource fetch boundary, but not the article's 'processing limit' wording or a special crawl/indexing penalty for render-blocking resources. Scope: fetching and WRS Confidence: high · Verified: Inside Googlebot: crawling 101

Worth debunking trong khi chúng ta là ở đây: Google renderer có không fixed timeout. As I’ve được ghi lại trong my JavaScript SEO hướng dẫn, “there is no fixed timeout for the renderer. It runs with a sped-up timer to see if anything is added at a later time.” (bản dịch) «có không fixed timeout cho đó renderer. Điều này chạy với một sped-lên timer để see nếu bất cứ điều gì là đã thêm tại một sau đó time.» Đó concern không một 5-second cutoff — đây là đó queueing delay trước kết xuất ngay cả begins.

Này ngay cả reaches AI các crawler hiện tại. Gary Illyes argued trong 2026 đó “if sites used relatively good HTML and no JavaScript (or SSR), both base model training, and web and agentic RAG would be a piece of cake from raw data processing perspective.” (bản dịch) «nếu các trang dùng relatively good HTML và không JavaScript (hoặc SSR), cả hai base model training, và web và agentic RAG sẽ là một piece of cake từ thô dữ liệu processing perspective.» Nặng client-side JS là một vấn đề well beyond Googlebot.

Cách tìm them

  • Chrome DevTools Performance panel / Lighthouse 13 — đó hiện tại “Render blocking requests” (bản dịch) «Render blocking các yêu cầu» Insight (mà, as of Lighthouse 13, là nơi đó older “Eliminate render-blocking resources” (bản dịch) «Eliminate render-blocking các tài nguyên» audit moved) flags scripts trong đó <head> bị thiếu async/defer và stylesheets không có một disabled hoặc non-matching media thuộc tính, và estimates đó ms bạn’d save từ một observed trace. Connor Clark ghi-lên diễn đạt điều này plainly: “render-blocking requests are network requests that prevent a page’s initial render, potentially delaying Largest Contentful Paint.” (bản dịch) «render-blocking các yêu cầu là network các yêu cầu đó ngăn một trang ban đầu render, potentially delaying Largest Contentful Paint.» Nếu bạn là reading older PageSpeed Insights output đó vẫn says “Eliminate render-blocking resources,” (bản dịch) «Eliminate render-blocking các tài nguyên,» đây là đó giống nhau underlying tín hiệu dưới đó pre-Lighthouse-13 name.
  • Chrome DevTools Coverage tab — marks bytes green (cốt yếu — dùng cho đầu tiên paint) hoặc red (unused tại đầu tiên paint). Lots of red CSS/JS là của bạn candidate list.
  • WebPageTest waterfall — xem mọi thứ trước đó Bắt đầu Render line.
  • Chạy điều này hơn khi — một single trace reflects đó chạy consent-manager state, bên thứ ba tag load, bộ nhớ đệm state, và CSP behavior. Repeat đó trace (cold và warm) trước treating một flagged tài nguyên as một fixed fact.
Read a waterfall from left to right: first paint cannot cross the boundary until every required blocking request has finished.

An illustrative navigation contains HTML from 0 to 180 milliseconds, blocking CSS from 120 to 420 milliseconds, synchronous JavaScript from 210 to 610 milliseconds, a non-blocking analytics request from 250 to 500 milliseconds, and font loading from 420 to 610 milliseconds. First paint occurs at 610 milliseconds. The example explains timing mechanics; it is not a live trace.

Cách khắc phục them

JavaScript

  • defer non-cốt yếu scripts — <script src="app.js" defer></script>. Parallel download, ordered execution sau khi parse. safe default cho của bạn own JS.
  • async cho independent thứ ba-party scripts — <script src="analytics.js" async></script>. chỉ Khi order và DOM-readiness genuinely không quan trọng.
  • Move scripts để end của <body> — older fallback Khi Bạn có thể’t thêm các thuộc tính; parser reaches them cuối cùng.

CSS — as conditional decisions, không blanket patterns

  • Inline cốt yếu CSS chỉ khi một trace cho thấy CSS là đó thực tế bottleneck — extract đó styles needed cho trên-đó-fold nội dung vào an inline <style> block so đầu tiên paint cần không round-trip. Google own caution áp dụng: “inlining CSS is an advanced performance technique that can improve performance, but can also lead to bugs if not implemented properly.” (bản dịch) «inlining CSS là an advanced performance technique đó có thể improve performance, nhưng có thể cũng lead để bugs nếu không implemented properly.» Inline chỉ đó cốt yếu subset, name an owner cho regenerating điều này khi templates thay đổi, và kiểm tra cho drift trên trang trạng thái — một cốt yếu-CSS snapshot đó goes stale silently reintroduces flashes of unstyled nội dung hoặc bị thiếu styles.
  • Defer đó rest, matching đó yêu cầu chính xác — load đó đầy đủ stylesheet với đó <link rel="preload" as="style" onload="this.rel='stylesheet'"> pattern. MỘT preload chỉ nhận reused cho đó eventual yêu cầu nếu đó URL, as, type, và crossorigin/CORS chế độ match — một mismatched hint gây ra đó trình duyệt để fetch đó tài nguyên twice thay vì skipping đó round-trip.
  • media các thuộc tính — media="print" hoặc media="(min-width: 900px)" lets đó trình duyệt download một stylesheet không có blocking render khi đó query không match.
  • Xóa unused CSS và minify — ít hơn để block on, nhanh hơn downloads.
  • Verify trước shipping — re-kiểm tra cho duplicate/unused fetches, FOUC, và new layout shift sau bất kỳ cốt yếu-CSS hoặc preload thay đổi, on một repeated trace, không một single lucky chạy.

Nền tảng-cụ thể (WordPress) — WP Rocket (delay/defer JS, optimize CSS phân phối), Autoptimize (async/defer JS, inline cốt yếu CSS), và Async JavaScript implement all của trên qua plugin UI. họ’re applying giống nhau async/defer/cốt yếu-CSS techniques — knowing Điều gì mỗi setting làm là Cách bạn tránh breaking của bạn theme.

Add an expert note

Pin an expert quote

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