合併多個CSS文件


第一部分 – 第09章

CSS

移動網站頁面使用多個外部CSS文件是一個非常普遍的現象。

單一CSS文件

使用CSS最常用的方式就是將CSS放到外部文件中,並將這個外部CSS文件包含到網站頁面的head部分中。例如,外部CSS文件名為main.css。

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

多個CSS文件

大多數情況下,一個單一移動網站頁面的head部分中會含有多個外部CSS文件。這種方式並不好,因為下載每個外部CSS文件會增加一個額外卻不必要的http請求,從而降低頁面的加載速度。

例如,如下移動網站頁面head部分有6個外部文件。

<head>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="style3.css" />
<link rel="stylesheet" href="style4.css" />
<link rel="stylesheet" href="style5.css" />
<link rel="stylesheet" href="style6.css" />
</head>

減少HTTP請求

頁面要求網絡瀏覽器下載的外部資源越少,頁面加載的速度越快。

當網絡瀏覽器必須下載的外部CSS文件變少時,移動網站頁面就可以更快加載。為達成這個目標,可以將多個CSS文件合併為更少的文件甚至是一個單一文件。這樣的操作將減少http請求的數量。假定你可以合併所有的外部CSS文件為一個單一文件(例如combined.css)。

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

合併多個CSS文件為一個文件

合併所有CSS文件為一個單一文件:

  • 打開所有6個CSS文件。例如main.css、style2.css、style3.css、style4.css、style5.css、以及style6.css。
  • 拷貝並粘貼6個CSS文件中所有的內容到一個新的文件中,例如combined.css。
  • 更新head部分link標籤的內容以請求新文件combined.css。
  • 移除所有用於請求其他5個CSS文件的link標籤的內容。


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

英文版:Combine Multiple CSS Files – 簡體中文版:合併多個CSS文件







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

Gordon Choi's Mobile Website Book