2026/06/05 依照有使用的區塊載入css

這個功能核心很單純，就是把不需要使用到的css給移除，而且直接wordpress直接有內建這樣的功能，直要開啟就可以了。因為我的網站內容全部都是改以區塊編輯器進行編輯，所以也把荊典編輯器使用到的也移除。

這個功能加上去之後，我的所有前端效能也有一部份的提升。

1. 啟用區塊樣式按需載入 (Separate Block Assets Loading)

• 相關程式碼：phpadd_filter(‘should_load_separate_core_block_assets’, ‘__return_true’);
• 原理說明： 在預設情況下，WordPress 會將所有 Gutenberg 區塊編輯器 (Block Editor) 的核心區塊樣式打包成一個龐大的 CSS 檔案並在前端一次性載入（不論該頁面是否有使用到這些區塊）。 透過將 should_load_separate_core_block_assets 過濾器掛鉤 (Filter Hook) 設定為 true，可以強制 WordPress 啟用獨立按需載入機制。如此一來，系統只會針對目前頁面中實際存在的區塊去載入對應的 CSS 樣式，大幅降低了首頁或單一文章頁面的 CSS 檔案體積。

2. 移除經典主題編輯器預設樣式 (Dequeue Classic Theme Styles)

• 相關程式碼：phpadd_action(‘wp_enqueue_scripts’, [$this, ‘remove_classic_theme_styles’], 20);public function remove_classic_theme_styles(): void { wp_dequeue_style(‘classic-theme-styles’);}
• 原理說明： WordPress 為了相容傳統主題，預設會在前端載入一個名為 classic-theme-styles 的樣式表。對於已經完全使用區塊編輯器 (Block Editor) 的現代網站而言，這個樣式表是多餘且無用的。 本模組透過在 wp_enqueue_scripts 動作掛鉤 (Action Hook) 中使用 wp_dequeue_style() 函式，將此經典主題相容性 CSS 從佇列中移除，從而減少一個不必要的 HTTP 請求與 CSS 體積。

三、 效能優化成效分析

1. 減少無用 CSS (Unused CSS)：僅載入當前頁面所需的區塊樣式，能通過 Google PageSpeed Insights 等工具中「減少未使用的 CSS」檢測項目。
2. 降低頁面阻塞時間 (Blocking Time)：減少了瀏覽器在轉譯 (Rendering) 網頁前需要下載與解析的 CSS 總量，有助於縮短最大內容繪製 (Largest Contentful Paint, LCP) 與首次內容繪製 (First Contentful Paint, FCP) 的時間。
3. 優化快取管理：搭配 LiteSpeed Cache 等快取外掛時，能讓產生的 HTML 結構與 CSS 載入更為乾淨，提升快取命中時的傳輸效率。