有研究表明，用戶在 50 毫秒[1] 的時間內就會對訪問網站形成第一印象。也就是用戶隻需 50 毫秒就可以決定出他們是留下還是離開。

由於前端優化不佳，大多數網站無法提供令人滿意的用戶體驗。其中最常見的原因是資源加載和圖像優化不理想。因此，在本文中，我將討論九個有助於優化前端資源加載的最佳實踐。

1. 壓縮 (Minify) 代碼

壓縮代碼是指從 HTML、CSS 和 JavaScript 中刪除不需要加載的不必要的冗餘數據。這包括消除代碼註釋和格式、空白字符、未使用的代碼、換行符等。

❝

縮小 HTML、CSS 和 JavaScript 能有效減少前端加載時間，因為它減少了需要從服務器請求的代碼量。

❞

下面是一些壓縮代碼資源相關的工具：

HTML：PageSpeed Insights[2]，HTML Minifier[3]。
CSS：cssmin.js[4], Coverage tool in Chrome Dev Tools[5], YUI Compressor[6].
JavaScript：JSMin[7], Coverage tool in Chrome Dev Tools[8]

2. 減少 HTTP 請求

通常，一個完整的 HTTP 請求需要經歷 DNS 查找，TCP 握手，瀏覽器發出 HTTP 請求，服務器接收請求，服務器處理請求並發回響應，瀏覽器接收響應等過程。你的前端的 http 請求越多，相應的所需的花費時間就越多。但是其中真正的加載數據時間所占的百分比相當小，其餘大部分時間都一次次用來用來查找以及與服務器通訊了。你可以采用多種方法來減少網站的 http 請求數。

使用 CSS Sprites 這是減少服務器調用次數的最簡單方法之一。sprite 我們不再將多個圖像單獨加載到站點，而是加載一個使用圖像集合組合的單個圖像文件。你可以使用 CSS 中的 background-image 和 background-position 屬性來展示所需的圖像片段。通過這樣做，你可以減少所需的服務器請求數量。
減少使用不可控的發出大量外部請求的第三方插件。
防止使用指向不存在的文件的無用鏈接。

除此之外，現如今 SPA 應用十分多，在單頁面應用中我們還可以啟用服務器端渲染以加快應用程序的首屏加載。往往首屏的加載速度是對用用戶感知影響巨大的。

3. 刪除不必要的自定義字體

自定義字體已經變得非常流行，因為它有助於為網站添加個性化。但是，它們也以性能為代價。

自定義字體的大小可能非常大（中文字體則會相當巨大！），並且諸如 Google 字體之類的 Web 字體會將 HTTP 請求添加到外部資源。這會增加頁面的加載渲染的速度。

以下是你必須在網站中使用字體時可以采取的一些優化操作：

將字體轉換為最有效的格式：加載像 WOFF2 這樣的現代格式可以比其他格式減少約 30% 的文件大小。
使用字體子集，刪除字體集中未使用的字符：一個大而全的字體文件中包含許多可能永遠不會使用的語言的字符。通過字體子集，我們可以從字體中刪除不需要的字符，隻保留我們在網站上編寫內容所需的內容。
預加載頁面中使用的字體。

對於網站使用自定義字體時，我們需要在性能與美觀中不斷權衡與評估。加載字體文件真的很慢。

4. 壓縮文件

帶寬量限制了在給定時間內傳遞的數據量，就像一個水管。文件越大，加載時間越長。現代網站通常具有大量 HTML、CSS 和 JavaScript 以及圖片等資源。

通過使用合適的方法壓縮文件，你可以輕松地對縮短文件加載時間。以下是你可以使用的的兩個很好的文件壓縮選項：

Gzip 流行的數據壓縮和解壓方法，目前所有現代瀏覽器都支持。Gzip 在服務器端壓縮站點的 HTML、CSS 和 JavaScript 包，然後將它們發送到瀏覽器，在客戶端，它解壓縮文件並交付內容。
Brotli 當前壓縮比最高的工具。根據 CertSimple[9] 的研究，Brotli 壓縮後的 JavaScript 文件比 Gzip 小 14%，而 HTML 和 CSS 壓縮率比 Gzip 好 21% 和 17%。

5. 優化圖片

對於大部分網站來說，圖像是至關重要的部分。互聯網上 93.7% 的網站使用至少一種圖像文件格式，因為它們有助於豐富內容，提高用戶參與度。然而，圖像的體積往往遠大於代碼，它會對前端加載時間產生不利影響，因此我們需要時刻記住優化圖片尺寸。

有幾種方法可以優化圖像：

使用 WebP 或 AVIF

使用 WebP 和 AVIF 等新圖像格式，他們比 JPEG 和 PNG 等舊格式能提供更好的性能。

❝

WebP 比 PNG 小 26%，比 JPEG 小 25-35%。AVIF 比 JPEG 小 50%，比 WebP 小 20%。

❞

但是，目前它們的瀏覽器支持還不是太好。WebP 最近獲得了所有最新版瀏覽器的支持，舊版本可能不支持它。而 AVIF 僅在 Chrome 和 Opera 中受支持。因此，你需要使用 <picture> 元素來為不同的顯示設備場景提供不同的圖像版本。

提供正確尺寸的圖像

另一種減少圖像加載時間和提高網站性能的方法是使用響應式圖像。現如今超過 50% 的流量來自智能手機和平板電腦。將圖像縮放到流行的設備尺寸並使用srcset是適應不同顯示設備加載不同體積的圖片。

你還可以通過其他幾種方法通過圖像優化來減少前端加載時間。以下是你可以使用的一些其他最佳實踐：

圖像壓縮
使用漸進式 JPEG。
為連接速度較慢的用戶提供較小的圖像。
使用 HTTP/2 而不是 HTTP/1.1。
使用image-set。

6. 延遲加載（懶加載）

延遲加載有助於進一步改善前端加載時間。使用延遲加載，網頁首先隻加載需要的內容，然後在用戶需要時加載剩餘的內容。例如，在 Google 圖片搜索結果中，首先隻加載一小部分圖片,更多內容顯示為占位符圖像，而不是實際內容，從而減少加載時間。如果用戶向下滾動頁面，再加載呈現實際內容。

除了延遲占位符加載外，你還可以選擇其他的方式，例如原生的懶加載loading="lazy"和“模糊圖像效果”。

7. 善用緩存

每次訪問網站時，我們都需要從服務器上把 HTML、CSS、JavaScript、圖片等資源下載下來再顯示。每次加載都會很耗時。防止此問題的最佳方法是使用緩存。如果配置得當，瀏覽器會將文件緩存在本地，避免了不停地加載相同的資源。

瀏覽器緩存，是我們最常用的也是最有效提升加載速度的方式！

緩存服務器：用戶請求從緩存服務器集合中發送到最近的緩存服務器。（例如：內容交付網絡。將在第 9 點中詳細討論）
內存緩存：通過將數據的某些部分存儲在內存中（例如：JavaScript 變量）
磁盤緩存：類似於內存緩存，但它使用磁盤存儲文件，絕大部分的緩存都來自磁盤緩存。

8. 預加載 Prefetching

資源預加載是一種可用於優化前端數據加載的性能增強技術。

❝

作為開發人員，你比瀏覽器更了解你的應用程序。因此你可以使用預加載來告訴瀏覽器接下來可能需要的資源。

❞

預加載用戶接下來可能需要的資源以減少用戶點擊後的等待時間。預取主要有三種類型：鏈接預取(Link prefetching)、DNS 預取(DNS prefetch)、預呈現(prerender)

鏈接預取

鏈接預取是一種瀏覽器機制，其利用瀏覽器空閑時間來下載或預取用戶在不久的將來可能訪問的文檔。網頁向瀏覽器提供一組預取提示，並在瀏覽器完成當前頁面的加載後開始靜默地拉取指定的文檔並將其存儲在緩存中。當用戶訪問其中一個預取文檔時，便可以快速的從瀏覽器緩存中得到。但是，鏈接預取僅適用於圖像和 JavaScript 等可緩存資源。

DNS 預取

DNS-prefetch (DNS 預獲取) 是嘗試在請求資源之前解析域名。當瀏覽器從（第三方）服務器請求資源時，必須先將該跨域域名解析為 IP地址，然後瀏覽器才能發出請求。此過程稱為 DNS解析。DNS 緩存可以幫助減少此延遲，而 DNS解析可以導致請求增加明顯的延遲。對於打開了與許多第三方的連接的網站，此延遲可能會大大降低加載性能。

DNS 預取允許瀏覽器在用戶瀏覽當前頁面時在後臺對網頁中的鏈接執行 DNS 查找，以最大限度地減少用戶點擊鏈接時的延遲。

預渲染

使用預渲染，內容被預取，然後由瀏覽器在後臺渲染，就好像內容已經渲染到一個不可見的單獨選項卡中一樣。當用戶導航到預呈現的內容時，當前內容會立即被預呈現的內容替換。

9. 使用 CDN （內容分發網絡）

CDN 是指一種透過互聯網互相連接的電腦網絡系統，利用最靠近每位用戶的服務器，更快、更可靠地將音樂、圖片、視頻、應用程序及其他文件發送給用戶，來提供高性能、可擴展性及低成本的網絡內容傳遞給用戶。

當用戶在地理位置上遠離服務器的地方訪問網站時，網絡鏈路變得復雜，延遲也會越高。這時我們就可以使用 CDN 優化前端內容的加載速度。CDN 將用戶請求重定向到最近的服務器

結論

通常，響應時間的 80-90% 都用於下載前端資源，例如圖像、樣式表、腳本等。因此，優化前端數據加載對於降低跳出率和增加訪問者在網站上的停留至關重要。在本文中，我們討論了一些用於更好地加載前端資源的最佳實踐。

❝

親愛的讀者，

感謝你的時間。如果你在評論區留下的想法或是點贊、關註、在看，我會十分高興。

❞

Reference

[1] 50 毫秒:

https://www.tandfonline.com/doi/abs/10.1080/01449290500330448

[2] PageSpeed Insights:

https://pagespeed.web.dev/

[3] HTML Minifier:

https://github.com/kangax/html-minifier

[4] cssmin.js:

https://www.phpied.com/cssmin-js/

[5] Coverage tool in Chrome Dev Tools:

https://developer.chrome.com/docs/devtools/coverage/

[6] YUI Compressor:

https://yui.github.io/yuicompressor/

[7] JSMin:

https://www.crockford.com/jsmin.html

[8] Coverage tool in Chrome Dev Tools: