如何以及為什麼要介紹您的關鍵CSS-css教學-PHP中文網

首頁

web前端

css教學

如何以及為什麼要介紹您的關鍵CSS

尊渡假赌尊渡假赌尊渡假赌

Feb 20, 2025 am 11:52 AM

提升網頁性能：內聯關鍵 CSS 的策略與技巧

本文探討內聯關鍵 CSS（將 CSS 規則直接嵌入 HTML 文檔）以優化網站性能的方法。通過內聯關鍵 CSS，可以顯著加快網頁渲染速度，尤其能提升首屏內容的加載速度，避免因額外 HTTP 請求獲取外部 CSS 文件而導致的渲染延遲。

How and Why You Should Inline Your Critical CSS

關鍵要點：

精準識別關鍵 CSS： 關鍵 CSS 指的是渲染首屏內容所需的最小 CSS 代碼。這因頁面而異，需要藉助工具（如 Google PageSpeed Insights、Critical Path CSS Generator 和 Penthouse.js）進行識別和提取。
權衡利弊： 內聯關鍵 CSS 可提升加載速度，但也會增加 HTML 文檔大小，並可能導致代碼冗餘（尤其當相同 CSS 規則在多個頁面重複使用時）。因此，務必確保內聯的 CSS 確實對網頁至關重要。
自動化工具： Grunt、npm 模塊（如Critical）、Gulp，以及WordPress 插件（如Autoptimize、Above The Fold Optimization 和W3 Total Cache）等工具能自動化識別、提取和內聯關鍵CSS，簡化操作流程。

How and Why You Should Inline Your Critical CSS

互聯網早期，網站主要展示文本信息。隨著網速提升，用戶能夠快速下載高清圖片和視頻，網站功能也日益複雜，使用了各種 CSS 和 JavaScript 框架、插件等。加載所有必要文件需要時間，而更快的網站能帶來更好的用戶體驗，這對於網站成功至關重要。內聯關鍵 CSS 並異步加載非關鍵 CSS 是提升性能的關鍵策略。

什麼是關鍵 CSS？

關鍵 CSS 指的是用於樣式化網頁首屏內容（用戶首先看到的部分，包括導航和其他元素）的 CSS 代碼。快速渲染首屏內容至關重要。

需要注意的是，用戶使用各種設備和視窗訪問網站，因此，僅考慮首屏內容不足以解決所有問題。應將與基本佈局和排版相關的 CSS 也視為關鍵 CSS。

現代 Web 開發實踐建議內聯關鍵 CSS，例如：

<!DOCTYPE html>
<html>
<head>
  <title>优化后的网页</title>
  <style type="text/css">
    /* 你的最小化关键 CSS 代码 */
  </style>
</head>
<body>
  <!-- 你的标记 -->
</body>
</html>

為什麼需要內聯？

Google PageSpeed Insights 等工具可能會提示優化 CSS 加載，建議內聯關鍵 CSS 並異步加載阻塞渲染的樣式表。

瀏覽器只有加載所有 CSS 文件後才會渲染網頁首屏內容。當需要加載大量文件時，這會成為一個瓶頸。並非所有用戶都擁有高速網絡連接，在內容加載完畢前等待庫、CSS 和 JavaScript 加載會非常令人沮喪。即使是高速網絡用戶，也可能在某些情況下（例如穿過隧道）失去連接。如果網站內聯了關鍵 CSS 並且在顯示主要內容之前不加載其他文件，那麼即使在連接中斷的情況下，用戶仍然能夠訪問主要內容。

下圖展示了普通網頁和優化網頁的區別：優化版本可讓用戶提前約 0.5 秒訪問內容。當需要加載大量額外庫時，改進將更加明顯。

How and Why You Should Inline Your Critical CSS

是否應該內聯關鍵 CSS？

這取決於具體情況。如果未使用任何大型框架或庫，並且自己的 CSS 文件大小也較小，則可能不需要內聯 CSS。

如果使用 Bootstrap 等框架，可能並未用到框架的所有功能。在這種情況下，可以僅從框架樣式表中提取關鍵 CSS，並異步加載實際框架。這將顯著提高網站速度。

內聯樣式表可以被緩存，而 HTML 通常不會被緩存（通常不建議這樣做！）。這意味著兩者之間有時會有差異。在進行更新時請記住這一點！此外，每次用戶加載網站時，內聯 CSS 都會導致頁面大小增加。例如，如果網站每個頁面都有 30kB 的內聯 CSS，那麼單個用戶 10 次頁面瀏覽將消耗 300kB。這聽起來可能不算什麼大問題，但在世界某些地區（以及某些 3G/4G 數據計劃中），數據是昂貴的。確保你計劃內聯的 CSS 確實對你的網頁至關重要，並且不要內聯所有內容。

(以下內容與原文類似，為了避免重複，此處省略了關於如何查找關鍵CSS，使用Grunt、npm模塊、Gulp以及其他工具的詳細步驟，以及最後的FAQ部分。這些內容可以通過原文找到。)

總結

是否內聯關鍵 CSS 取決於用戶的訪問模式和網站結構。如果你的網站是一個單頁網站，訪問者不會頻繁訪問它，或者如果你有一個包含框架和插件的複雜網站，內聯關鍵 CSS 可以顯著提高性能。

內聯 CSS 的唯一顧慮是它會增加每次訪問的頁面大小。這可以通過使用 Cookie 來緩解，只在第一次訪問時發送關鍵 CSS，同時仍然異步加載完整的 CSS 文件並對其進行緩存。這有點複雜，但你可以同時獲得兩全其美的效果。

以上是如何以及為什麼要介紹您的關鍵CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn