很多 Web 開發(fā)者都希望做出加載速度很快的網(wǎng)頁。在移動設備瀏覽占比越來越大的背景下，使用響應式設計使得網(wǎng)站在小屏幕下看起來更漂亮只是其中一個方面。Browser Calories 可以展示網(wǎng)頁的加載時間 —— 這不單單關系到用戶，還會影響到通過加載速度來進行評級的搜索引擎。這個系列的文章介紹了如何使用 Fedora 提供的工具來給網(wǎng)頁“瘦身”。

準備工作

在你開始縮減網(wǎng)頁之前，你需要明確核心問題所在。為此，你可以使用 Browserdiet. 這是一個瀏覽器插件，適用于 Firefox、Opera、 Chrome 和其它瀏覽器。它會對打開的網(wǎng)頁進行性能分析，這樣你就可以知道應該從哪里入手來縮減網(wǎng)頁。

然后，你需要一些用來處理的頁面。下面的例子是針對 getferoda.org 的測試截圖。一開始，它看起來非常簡單，也符合響應式設計。

Browser Diet - getfedora.org 的評分

然而，BroserDiet 的網(wǎng)頁分析表明，這個網(wǎng)頁需要加載 1.8MB 的文件。所以，我們現(xiàn)在有活干了！

Web 優(yōu)化

網(wǎng)頁中包含 281 KB 的 JavaScript 文件、203 KB 的 CSS 文件，還有 1.2 MB 的圖片。我們先從最嚴重的問題 —— 圖片開始入手。為了解決問題，你需要的工具集有 GIMP、ImageMagick 和 optipng. 你可以使用如下命令輕松安裝它們：

sudo dnf install gimp imagemagick optipng

比如，我們先拿到這個 6.4 KB 的文件：

首先，使用 file 命令來獲取這張圖片的一些基本信息：

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced

這張只由白色和灰色構成的圖片使用 8 位 / RGBA 模式來存儲。這種方式并沒有那么高效。

使用 GIMP，你可以為這張圖片設置一個更合適的顏色模式。在 GIMP 中打開 cinnamon.png。然后，在“圖片 > 模式”菜單中將其設置為“灰度模式”。將這張圖片以 PNG 格式導出。導出時使用壓縮因子 9，導出對話框中的其它配置均使用默認選項。

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced

輸出顯示，現(xiàn)在這個文件現(xiàn)在處于 8 位 / 灰階 + aplha 模式。文件大小從 6.4 KB 縮小到了 2.8 KB. 這已經(jīng)是原來大小的 43.75% 了。但是，我們能做的還有很多！

你可以使用 ImageMagick 工具來查看這張圖片的更多信息。

$ identify cinnamon2.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000

它告訴你，這個文件的大小為 2831 字節(jié)。我們回到 GIMP，重新導出文件。在導出對話框中，取消存儲時間戳和 alpha 通道色值，來讓文件更小一點?，F(xiàn)在文件輸出顯示：

$ identify cinnamon.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000

下面，用 optipng 來無損優(yōu)化你的 PNG 圖片。具有相似功能的工具有很多，包括 advdef（這是 advancecomp 的一部分），pngquant 和 pngcrush。

對你的文件運行 optipng。 注意，這個操作會覆蓋你的原文件：

$ optipng -o7 cinnamon.png
** Processing: cinnamon.png
60x60 pixels, 2x8 bits/pixel, grayscale+alpha
Reducing image to 8 bits/pixel, grayscale
Input IDAT size = 2720 bytes
Input file size = 2812 bytes
 
Trying:
 zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920
 
Selecting parameters:
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920
 
Output IDAT size = 1920 bytes (800 bytes decrease)
Output file size = 2012 bytes (800 bytes = 28.45% decrease)

-o7 選項處理起來最慢，但最終效果最好。于是你又將文件縮小了 800 字節(jié)，現(xiàn)在它只有 2012 字節(jié)了。

要壓縮文件夾下的所有 PNG，可以使用這個命令：

$ optipng -o7 -dir=<directory> *.png

-dir 選項用來指定輸出文件夾。如果不加這個選項，optipng 會覆蓋原文件。

選擇正確的文件格式

當涉及到在互聯(lián)網(wǎng)中使用的圖片時，你可以選擇：

• JPG 或 JPEG
• GIF
• PNG
• aPNG
• JPG-LS
• JPG 2000 或 JP2
• SVG

JPG-LS 和 JPG 2000 沒有得到廣泛使用。只有一部分數(shù)碼相機支持這些格式，所以我們可以忽略它們。aPNG 是動態(tài)的 PNG 格式，也沒有廣泛使用。

可以通過更改壓縮率或者使用其它文件格式來節(jié)省下更多字節(jié)。我們無法在 GIMP 中應用第一種方法，因為現(xiàn)在的圖片已經(jīng)使用了最高的壓縮率了。因為我們的圖片中不再包含 aplha 通道，你可以使用 JPG 類型來替代 PNG。 現(xiàn)在，使用默認值：90% 質(zhì)量 —— 你可以將它減小至 85%，但這樣會導致可見的疊影。這樣又省下一些字節(jié)：

$ identify cinnamon.jpg
cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000

只將這張圖轉(zhuǎn)成正確的色域，并使用 JPG 作為文件格式，就可以將它從 23 KB 縮小到 12.3 KB，減少了近 50%.

PNG vs JPG: 質(zhì)量和壓縮率

那么，剩下的文件我們要怎么辦呢？除了 Fedora “風味”圖標和四個特性圖標之外，此方法適用于所有其他圖片。我們能夠處理的圖片都有一個白色的背景。

PNG 和 JPG 的一個主要區(qū)別在于，JPG 沒有 alpha 通道。所以，它沒有透明度選項。如果你使用 JPG 并為它添加白色背景，你可以將文件從 40.7 KB 縮小至 28.3 KB.

現(xiàn)在又有了四個可以處理的圖片：背景圖。對于灰色背景，你可以再次使用灰階模式。對更大的圖片，我們就可以節(jié)省下更多的空間。它從 216.2 KB 縮小到了 51 KB —— 基本上只有原圖的 25% 了。整體下來，你把這些圖片從 481.1 KB 縮小到了 191.5 KB —— 只有一開始的 39.8%.

質(zhì)量 vs 大小

PNG 和 JPG 的另外一個區(qū)別在于質(zhì)量。PNG 是一種無損壓縮光柵圖形格式。但是 JPG 雖然使用壓縮來縮小體積，可是這會影響到質(zhì)量。不過，這并不意味著你不應該使用 JPG，只是你需要在文件大小和質(zhì)量中找到一個平衡。

成就

這就是第一部分的結尾了。在使用上述技術后，得到的結果如下：

你將一開始 1.2 MB 的圖片體積縮小到了 488.9 KB. 只需通過 optipng 進行優(yōu)化，就可以達到之前體積的三分之一。這可能使得頁面更快地加載。不過，要是使用蝸牛到超音速來對比，這個速度還沒到達賽車的速度呢！

最后，你可以在 Google Insights 中查看結果，例如：

在移動端部分，這個頁面的得分提升了 10 分，但它依然處于“中等”水平。對于桌面端，結果看起來完全不同，從 62/100 分提升至了 91/100 分，等級也達到了“好”的水平。如我們之前所說的，這個測試并不意味著我們的工作就做完了。通過參考這些分數(shù)可以讓你朝著正確的方向前進。請記住，你正在為用戶體驗來進行優(yōu)化，而不是搜索引擎。