1.4 優化客戶網站

提高網站性能時，目標很簡單：減少傳輸的數據量。這樣做將減少站點在任何設備上加載的時間。這樣做對HTTP/1和HTTP/2服務器上的用戶都有好處。如果問有沒有最重要的一條建議，那就是：傳輸更少的字節意味著更快的加載速度。

減少請求數是一種辦法，下面介紹的一些性能提升技術也將鼓勵你這樣做。但請注意，這種方法最適合用于HTTP/1工作流。這個客戶網站的請求已經比較輕量了，減少請求數并沒有多大作用。

這些優化工作包括：首先要縮小網站資源，包括CSS、JavaScript和HTML本身；然后要在不損害其視覺完整性的前提下，優化網站上的圖像；最后要在服務器上壓縮文本資源。

1.4.1 縮小資源

縮小（minification）是從基于文本的資源中去除所有空白和非必要字符的過程，因而不會影響資源的工作方式。圖1-9闡明了對CSS應用縮小的基本思想。

許多人類可讀的文件，比如CSS和JavaScript，都包含了開發者在開發過程中插入的空白和非必要字符。我們在CSS和JavaScript中使用換行符和縮進，使它們更容易閱讀，并在源代碼中使用注釋進行文檔記錄。

Web瀏覽器讀取這些文件時不需要這樣的幫助。這些文件中不必要的字符越少，Web瀏覽器下載和解析它們的速度就越快。

本節首先要縮小網站的CSS，然后是JavaScript，最后是HTML。在繼續之前，先要使用npm下載幾個包，以便在命令行中縮小文件：

        npm install -g minifier html-minify

安裝過程可能需要一分鐘左右。軟件包安裝完成后，即可縮小網站資源。完成本節后，網站總大小可以減小173KB。

1．縮小網站的CSS

該網站的CSS大小是18.2KB，縮小后可以稍微減少頁面的總數據量。要縮小網站的CSS需要做兩件事：運行縮小程序，然后更新HTML，指向縮小的新文件。在命令行中打開網站的CSS目錄，然后運行這條命令來縮小CSS：

        minify -o styles.min.css styles.css

這條命令的語法很簡單。它用-o參數指定輸出文件（style.min.css）。這個參數之后是指定的輸入文件名（style.css）。命令執行完成后，檢查輸出文件的大小，你會發現文件大小為15.6KB，縮小了14%。縮小的量不算大，但這是個很好的開始。然后在index.html中更新這個文件的引用，方法是將<link>標簽的引用從styles.css更改為styles.min.css，如下所示：

        <link rel="stylesheet" type="text/css" href="css/styles.min.css">

接下來在Web瀏覽器中重新加載客戶網站，確保網站的樣式依然有效。可以通過檢查更新的瀑布圖，以及尋找對styles.min.css的引用，來驗證縮小的樣式是否到位。現在，客戶網站的CSS已經成功縮小了！

2．縮小網站的JavaScript

該網站的JavaScript比CSS占據了更大的數據份額。該網站使用了兩個JavaScript文件：jquery.js（jQuery庫）和behaviors.js（網站的行為處理，依賴于jQuery）。它們的大小分別是252.6KB和3.1KB。要縮小這些文件，可以像對網站CSS執行的操作一樣，對其運行minify命令：

        minify -o jquery.min.js jquery.js
        minify -o behaviors.min.js behaviors.js

.js文件縮小后，檢查輸出文件的大小，并與未縮小的版本進行比較。你將看到behaviors.js減少了46%，只剩1.66KB; jquery.js減少了66%，只剩84.4KB。這是個巨大的改進，大大減小了網站的總大小（本節末尾將對其進行計算和比較）。

你需要在index.html中更新對jquery.js和behaviors.js的引用，修改為jquery.min.js和behaviors.min.js。找到引用這些文件的<script>標簽，并將其更改為以下內容：

        <script src="js/jquery.min.js"></script>
        <script src="js/behaviors.min.js"></script>

然后重新加載頁面，并檢查Network選項卡，以查看縮小的文件是否被引用。確認無誤后，你就可以縮小最后一個資源，即網站的HTML。

3．縮小網站的HTML

網站的HTML是另一種可以縮小的資源，盡管縮小它沒有縮小網站的JavaScript節省的數據量多。這一次，使用htmlminify Node包代替minify（后者用于CSS和JavaScript文件）。

縮小網站的HTML之前，需要將網站根文件夾中的index.html復制到一個名為index.src.html的單獨的源文件中，以便保留原始文件并進行更改。復制完成后，可以使用htmlminify將其縮小，如下所示：

        htmlminify -o index.html index.src.html

縮小后的文件比原來小19%，從4.57KB變為3.71KB。雖然減小得不多，但確實騰出了很多空間，而且沒有費太多功夫。

隨著網站資源的縮小，你已經為網站精簡了173KB。由于網頁在所有類型的設備上工作都需要這些資源，因此對于任何設備的用戶來說，性能都得到了提升。圖1-10比較了表1-1中所有設備類型在文件縮小前后的加載時間。

通過適當的努力，你可以將加載時間減少31%～41%！雖然進步不小，但下面還會取得更大的進步。下一節將通過名為服務器壓縮的服務器端機制，進一步提高文本資源的收益率。

1.4.2 使用服務器壓縮

你一定收到過包含壓縮文件的電子郵件。這些文件通常用于在線通信，是將多個文件打包為單個文件的簡便方法。壓縮文件除了方便合并外，還可以減小文件體積。服務器壓縮在減小文件體積方面的工作原理與之類似，Web瀏覽器能夠代表用戶接受和解壓縮內容，如圖1-11所示。

服務器壓縮的工作方式是用戶從服務器請求網頁。用戶的請求附帶一個Accept-Encoding頭部信息，向服務器告知瀏覽器可以使用的壓縮格式。如果服務器能夠按照Accept-Encoding頭中的指示對內容進行編碼，它將用一個描述壓縮方法和壓縮內容的Content-Encoding頭部信息進行回復。

這非常實用，因為從網站下載的大部分內容往往是文本，可壓縮性很好。幾乎所有通用的瀏覽器都支持一種名為gzip的壓縮方法，它在減小文本資源的體積方面非常有效。在優化客戶端網站的這一步中，你需要配置服務器以提供壓縮內容。通過這些努力，頁面大小將減少70KB，加載速度將提高18%～32%（具體取決于訪問者的設備）。但是，執行此操作之前，請轉到命令行并按Ctrl+C停止Web服務器。然后鍵入如下命令以安裝compression模塊：

        npm install compression

安裝完成后，在文本編輯器中打開http.js，并添加代碼清單1-1中的粗體文本行。

代碼清單1-1 配置Node HTTP服務器以使用compression

完成上述修改后，重啟Web服務器。重新加載頁面并查看瀑布圖，以查看結果。表1-2比較了壓縮前后的文本資源。

文件的體積顯著減小：壓縮前，所有文本資源的大小合計為106.5KB；壓縮后，體積大約減小66%，低至36KB！那么這對加載時間有什么影響呢？答案是影響不小。圖1-12比較了不同設備的加載時間。

這個簡單的操作顯著提高了網站的加載速度。需要注意的是，不同的Web服務器需要不同的操作來配置資源壓縮。代碼清單1-2顯示了如何在Apache Web服務器的httpd.conf配置文件中，為常見的資源媒體類型啟用壓縮。

代碼清單1-2 在Apache Web服務器上啟用服務器壓縮

在微軟的Internet信息服務（IIS）中，可以通過inetmgr可執行文件進入管理面板，轉到特定網站，并通過實用工具的GUI編輯壓縮設置來配置壓縮。無論使用哪種Web服務器，壓縮帶來的好處基本都一樣。某些服務器的可配置項可能更豐富，也可能更少。

應用壓縮并在客戶網站上工作后，可以繼續進行此優化計劃的最后一部分：優化圖像。

1.4.3 壓縮圖像

自從Photoshop的Save for Web（存儲為Web格式）對話框問世以來，圖像優化發展已久。如今的圖像優化方法在減小全色圖像的文件大小方面非常高效，最終結果通常與源圖像難以分辨。然而，縮小文件是非常重要的。圖1-13比較了優化前后的兩個圖像。

如果你看不出這兩張圖像之間的區別，那這種方法的使用目的就達到了。這種類型的優化背后的理念是盡可能保留源圖像的視覺質量，同時丟棄不必要的數據。

這并不是說這種優化不會導致不合預期的結果。過度優化會導致明顯的質量損失。第6章不僅會探討PNG文件的圖像優化，而且還會探討JPEG和SVG圖像的優化。經驗法則是將任何優化的結果與原始圖像進行比較，并確保你對結果滿意。

有許多服務可以壓縮圖像，包括第6章和第12章介紹的一些命令行和自動化工具。為了簡單起見，你可以使用名為TinyPNG的Web服務，如圖1-14所示。

盡管名字中帶有PNG，但這個網站不僅能壓縮PNG圖像，而且還能壓縮JPEG圖像。根據訪問者的設備不同，桌面端視圖中顯示4個圖像，而移動端視圖中僅顯示3個圖像。這些圖像的大小取決于查看它們的屏幕類型。高DPI屏幕（如蘋果設備上的視網膜屏幕）需要更大的圖像集來提供最佳的視覺體驗，而標準DPI屏幕可以使用更小的圖像集。第5章將介紹這些屏幕之間的差異，以及基于設備功能的服務方式。此刻，我們的目標是獲取img文件夾中的所有圖像，使用TinyPNG服務對其進行優化，并觀察獲得的效果。

要壓縮這些圖像，請將它們上傳到TinyPNG網站，該網站將自動進行優化。完成后，下載所有文件，并將其復制到網站的img文件夾。出現提示時，為所有沖突選擇Overwrite（覆蓋）選項。然后重新加載頁面，在Chrome的開發者工具中再次檢查瀑布圖，以查看這些較小的圖像所產生的差異。表1-3列出了優化前后的網站圖像。

表面看來，所有圖像都在不同程度上受益于這種優化，當然，某些圖像受益更多一些。但真正的問題是，這將如何影響頁面加載時間？圖1-15比較了這次圖像優化工作前后的加載時間。

優化圖像對加載時間有顯著影響。所有設備的加載時間都已減少到2秒以下，這是非常重要的，尤其是對于3G網絡環境！完成優化工作后，下面看看總體的工作成果。