避免CSS @Import

第一部分 – 第17章

CSS

錯誤的方式

CSS @ import是將外部CSS文件包括進移動網站頁面的方法之一。典型的語法看起來就如同下面的例句。 

@import url("style.css")

移動網站應該避免使用CSS @ import，因為對CSS文件的這種檢索方法會減緩頁面的加載速度。

  • CSS @ import方法是按照順序加載CSS文件的，並不支持並行加載。這意味著當頁面必須加載多個CSS文件時，一個文件必須等到另一個文件加載完成。
  • 這種序列的文件加載會耗費更多不必要的時間，並使移動網站頁面加載速度比實際慢得多。

正確的方式

利用外部CSS文件的正確方式是正常請求這些文件。例如，假設你的外部CSS文件命名為style.css，那對應你的網站頁面就應該通過head部分link標籤的方法請求這個CSS文件。 

<head>
<link rel="stylesheet" href="style.css" />
</head>

移動網站性能技術白皮書在2017年3月正式出版。

英文版：Avoid CSS @Import – 簡體中文版：避免CSS @Import






移動網站性能技術白皮書上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book