提高網頁加載速度的十個竅門

C M Pandey 原做，受權 New Frontend 翻譯。

在這篇文章裏，我會跟你們分享我是如何讓本身的做品集網站在 0.8 秒內加載完成的。

1. 不要使用太大的 DOM 樹

個人做品集網站包含 487 個 DOM 元素，DOM 樹的深度是 13，每層最多 20 個子元素。

太大的 DOM 樹會拖慢網頁：

• 內存

  在過大的 DOM 樹上應用查詢選擇器（好比 document.querySelectorAll('li')）會保存多個節點的引用，這可能佔用大量設備內存。

• 網絡效能和加載速度

  巨大的 DOM 樹包含許多節點（有些節點在初次加載時不可見），這會拖慢加載速度，消耗用戶的網絡流量。

• 用戶或腳本與網頁產生交互時的運行時性能

  此時瀏覽器須要從新計算節點的位置和樣式，所以 DOM 樹過大時渲染會變慢。若是樣式規則很複雜，渲染性能會雪上加霜。

2. 不要使用巨大的網絡載荷

個人做品集網站的網絡載荷（payload）大小隻有 764 KB。

你的網站的網絡載荷大小應該低於 1600 KB。
爲了達成這一目標，你能夠從如下幾個方面着手：

• 延遲請求，按需加載。
• 極簡化（minify）、壓縮（compress）網絡載荷。
• 將 JPEG 圖像的壓縮級別設置爲 85。

永遠不要忘記，更大的網絡載荷會帶來更多的流量成本。

3. 不要使用 GIF

靜態圖像用 PNG 或 WebP。動畫內容考慮使用 MPEG4 或 WebM 視頻格式，GIF 圖像存儲效率低、顯示效果差。

你也許會說你須要：

• 自動播放
• 循環播放
• 無聲播放

HTML5 的 video 標籤徹底能夠實現這些效果：

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

4. 預加載關鍵請求

假設頁面正加載一個 JS 文件，這個 JS 文件自己會獲取另外一個 JS 文件和一個 CSS 文件，那麼直到這些資源下載、解析、執行完畢前，頁面都不會完整顯示。

若是瀏覽器可以在更早的時候發起這些請求，就能節省許多時間。很幸運，預加載連接能夠作到這一點。

<link rel="preload" href="style.css" as="style">

5. 少用重定向

重定向會拖慢網頁的加載速度。瀏覽器請求某個重定向資源時，服務器會返回一個 HTTP 響應。接着瀏覽器必須發起另外一個 HTTP 請求，重新的地址獲取資源。這些額外的網絡往返會拖慢資源的加載速度，可能會拖慢幾百毫秒。

與其將移動端用戶重定向到移動端版本的頁面，不如將網站從新設計成響應式。

6. 預鏈接重要的第三方站點

使用 preconnect 告訴瀏覽器提前和重要的第三方站點創建鏈接。

<link rel="preconnect" href="https://www.google.com">

以上代碼會和站點創建鏈接，並告知瀏覽器你但願在儘量早的時候啓動這一進程。

7. 使用高效的圖像編碼

JPEG 圖像的壓縮級別設爲 85 就已經足夠好了。你還可使用多種方式優化圖像大小：

• 壓縮圖像。
• 使用優化圖像的 CDN。
• 避免使用 GIF。
• 響應式圖像。
• 按需加載圖像。

8. 極簡化 JavaScript 文件

極簡化指移除空格和非必需的代碼以建立更小的代碼文件的過程。

極簡化 JavaScript 文件能夠縮小載荷，節省解析時間。

JavaScript Minifier 是一個能夠極簡化 JavaScript 的在線工具。

9. 極簡化 CSS 文件。

相比其餘文件，CSS 文件的空格更多。極簡化確定能省下一些字節。再好比顏色值能夠極簡化成等價的簡寫形式，好比 #000000 和 #000 是等價的。

CSS Minifier 是一個能夠極簡化 CSS 的在線工具。

10. 調整圖像分辨率

我打賭在網站優化的建議中，這是最常提到的一條。由於圖像的大小通常來講要比任何腳本文件大不少，因此儘可能避免使用分辨率過大的圖像。

你永遠不該該上傳分辨率大於屏幕渲染尺寸的圖像，這毫無心義。

你能夠直接修改圖像的分辨率，或者使用：

• 響應式圖像。
• 支持優化圖像的 CDN。
• SVG 圖標。