Render-blocking Resources
阻塞渲染資源會延遲首屏渲染（影響 FCP/LCP）。常見是同步載入的 CSS/JS 或第三方 script。
定義
Render-blocking resources 是指會阻止瀏覽器繼續渲染首屏的資源，常見為未優化的 CSS 與同步載入的 JavaScript。它會延遲 FCP/LCP，讓使用者看到白屏更久，也影響 Core Web Vitals 表現。
為什麼重要
- 直接拖慢 FCP 與 LCP，使用者看到白屏更久
- 增加主執行緒負擔，間接影響 INP
- 是 Lighthouse 最常見的效能警告之一
- 每個阻塞資源都會增加首屏渲染的等待時間
- 第三方 script（廣告、分析）常是最大元兇
- CSS 必須完全載入後瀏覽器才開始渲染
- 改善 render-blocking 是投資報酬率最高的優化之一
怎麼做（實作重點）
- 把非必要 JS 延後：使用 defer、async 或動態 import()
- 拆分 CSS：內嵌 critical CSS + 延後載入其餘樣式
- 減少第三方 script 或使用 async/defer 載入
- 把 <script> 放在 </body> 前而非 <head>
- 使用 <link rel="preload"> 預載關鍵資源
- 避免 CSS @import（會造成串聯阻塞）
- 監控：用 Lighthouse 的 'Eliminate render-blocking resources' 審計
範例
html
<!-- 阻塞渲染（避免） -->
<script src="/app.js"></script>
<!-- defer：DOM 解析完成後執行，保持順序 -->
<script src="/app.js" defer></script>
<!-- async：下載完立即執行，不保證順序 -->
<script src="/analytics.js" async></script>
<!-- 動態載入：完全不阻塞 -->
<script>
const script = document.createElement('script');
script.src = '/chat-widget.js';
document.body.appendChild(script);
</script>html
<!-- 關鍵 CSS 內嵌 -->
<style>
/* 首屏必要樣式 */
.hero { ... }
</style>
<!-- 非關鍵 CSS 延後載入 -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>常見問題
關於這個詞彙的常見問答。