優(yōu)化前端數(shù)據(jù)加載性能的 9 個(gè)最佳實(shí)踐

有研究表明，用戶在 50 毫秒^[1] 的時(shí)間內(nèi)就會(huì)對(duì)訪問網(wǎng)站形成第一印象。也就是用戶只需 50 毫秒就可以決定出他們是留下還是離開。

由于前端優(yōu)化不佳，大多數(shù)網(wǎng)站無法提供令人滿意的用戶體驗(yàn)。其中最常見的原因是資源加載和圖像優(yōu)化不理想。因此，在本文中，我將討論九個(gè)有助于優(yōu)化前端資源加載的最佳實(shí)踐。

1. 壓縮 (Minify) 代碼

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

?

縮小 HTML、CSS 和 JavaScript 能有效減少前端加載時(shí)間，因?yàn)樗鼫p少了需要從服務(wù)器請(qǐng)求的代碼量。

?

下面是一些壓縮代碼資源相關(guān)的工具：

• 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 請(qǐng)求

通常，一個(gè)完整的 HTTP 請(qǐng)求需要經(jīng)歷 DNS 查找，TCP 握手，瀏覽器發(fā)出 HTTP 請(qǐng)求，服務(wù)器接收請(qǐng)求，服務(wù)器處理請(qǐng)求并發(fā)回響應(yīng)，瀏覽器接收響應(yīng)等過程。你的前端的 http 請(qǐng)求越多，相應(yīng)的所需的花費(fèi)時(shí)間就越多。但是其中真正的加載數(shù)據(jù)時(shí)間所占的百分比相當(dāng)小，其余大部分時(shí)間都一次次用來用來查找以及與服務(wù)器通訊了。你可以采用多種方法來減少網(wǎng)站的 http 請(qǐng)求數(shù)。

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

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

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

自定義字體已經(jīng)變得非常流行，因?yàn)樗兄跒榫W(wǎng)站添加個(gè)性化。但是，它們也以性能為代價(jià)。

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

以下是你必須在網(wǎng)站中使用字體時(shí)可以采取的一些優(yōu)化操作：

• 將字體轉(zhuǎn)換為最有效的格式：加載像 WOFF2 這樣的現(xiàn)代格式可以比其他格式減少約 30% 的文件大小。
• 使用字體子集，刪除字體集中未使用的字符：一個(gè)大而全的字體文件中包含許多可能永遠(yuǎn)不會(huì)使用的語言的字符。通過字體子集，我們可以從字體中刪除不需要的字符，只保留我們?cè)诰W(wǎng)站上編寫內(nèi)容所需的內(nèi)容。
• 預(yù)加載頁面中使用的字體。

對(duì)于網(wǎng)站使用自定義字體時(shí)，我們需要在性能與美觀中不斷權(quán)衡與評(píng)估。加載字體文件真的很慢。

4. 壓縮文件

帶寬量限制了在給定時(shí)間內(nèi)傳遞的數(shù)據(jù)量，就像一個(gè)水管。文件越大，加載時(shí)間越長(zhǎng)?，F(xiàn)代網(wǎng)站通常具有大量 HTML、CSS 和 JavaScript 以及圖片等資源。

通過使用合適的方法壓縮文件，你可以輕松地對(duì)縮短文件加載時(shí)間。以下是你可以使用的的兩個(gè)很好的文件壓縮選項(xiàng)：

• Gzip 流行的數(shù)據(jù)壓縮和解壓方法，目前所有現(xiàn)代瀏覽器都支持。Gzip 在服務(wù)器端壓縮站點(diǎn)的 HTML、CSS 和 JavaScript 包，然后將它們發(fā)送到瀏覽器，在客戶端，它解壓縮文件并交付內(nèi)容。
• Brotli 當(dāng)前壓縮比最高的工具。根據(jù) CertSimple^[9] 的研究，Brotli 壓縮后的 JavaScript 文件比 Gzip 小 14%，而 HTML 和 CSS 壓縮率比 Gzip 好 21% 和 17%。

5. 優(yōu)化圖片

對(duì)于大部分網(wǎng)站來說，圖像是至關(guān)重要的部分?；ヂ?lián)網(wǎng)上 93.7% 的網(wǎng)站使用至少一種圖像文件格式，因?yàn)樗鼈冇兄谪S富內(nèi)容，提高用戶參與度。然而，圖像的體積往往遠(yuǎn)大于代碼，它會(huì)對(duì)前端加載時(shí)間產(chǎn)生不利影響，因此我們需要時(shí)刻記住優(yōu)化圖片尺寸。

有幾種方法可以優(yōu)化圖像：

使用 WebP 或 AVIF

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

?

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

?

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

提供正確尺寸的圖像。

另一種減少圖像加載時(shí)間和提高網(wǎng)站性能的方法是使用響應(yīng)式圖像?，F(xiàn)如今超過 50% 的流量來自智能手機(jī)和平板電腦。將圖像縮放到流行的設(shè)備尺寸并使用srcset是適應(yīng)不同顯示設(shè)備加載不同體積的圖片。

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

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

6. 延遲加載（懶加載）

延遲加載有助于進(jìn)一步改善前端加載時(shí)間。使用延遲加載，網(wǎng)頁首先只加載需要的內(nèi)容，然后在用戶需要時(shí)加載剩余的內(nèi)容。例如，在 Google 圖片搜索結(jié)果中，首先只加載一小部分圖片,更多內(nèi)容顯示為占位符圖像，而不是實(shí)際內(nèi)容，從而減少加載時(shí)間。如果用戶向下滾動(dòng)頁面，再加載呈現(xiàn)實(shí)際內(nèi)容。

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

7. 善用緩存

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

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

• 緩存服務(wù)器：用戶請(qǐng)求從緩存服務(wù)器集合中發(fā)送到最近的緩存服務(wù)器。（例如：內(nèi)容交付網(wǎng)絡(luò)。將在第 9 點(diǎn)中詳細(xì)討論）
• 內(nèi)存緩存：通過將數(shù)據(jù)的某些部分存儲(chǔ)在內(nèi)存中（例如：JavaScript 變量）
• 磁盤緩存：類似于內(nèi)存緩存，但它使用磁盤存儲(chǔ)文件，絕大部分的緩存都來自磁盤緩存。

8. 預(yù)加載 Prefetching

資源預(yù)加載是一種可用于優(yōu)化前端數(shù)據(jù)加載的性能增強(qiáng)技術(shù)。

?

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

?

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

鏈接預(yù)取

鏈接預(yù)取是一種瀏覽器機(jī)制，其利用瀏覽器空閑時(shí)間來下載或預(yù)取用戶在不久的將來可能訪問的文檔。網(wǎng)頁向?yàn)g覽器提供一組預(yù)取提示，并在瀏覽器完成當(dāng)前頁面的加載后開始靜默地拉取指定的文檔并將其存儲(chǔ)在緩存中。當(dāng)用戶訪問其中一個(gè)預(yù)取文檔時(shí)，便可以快速的從瀏覽器緩存中得到。但是，鏈接預(yù)取僅適用于圖像和 JavaScript 等可緩存資源。

DNS 預(yù)取

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

DNS 預(yù)取允許瀏覽器在用戶瀏覽當(dāng)前頁面時(shí)在后臺(tái)對(duì)網(wǎng)頁中的鏈接執(zhí)行 DNS 查找，以最大限度地減少用戶點(diǎn)擊鏈接時(shí)的延遲。

預(yù)渲染

使用預(yù)渲染，內(nèi)容被預(yù)取，然后由瀏覽器在后臺(tái)渲染，就好像內(nèi)容已經(jīng)渲染到一個(gè)不可見的單獨(dú)選項(xiàng)卡中一樣。當(dāng)用戶導(dǎo)航到預(yù)呈現(xiàn)的內(nèi)容時(shí)，當(dāng)前內(nèi)容會(huì)立即被預(yù)呈現(xiàn)的內(nèi)容替換。

9. 使用 CDN （內(nèi)容分發(fā)網(wǎng)絡(luò)）

CDN 是指一種透過互聯(lián)網(wǎng)互相連接的電腦網(wǎng)絡(luò)系統(tǒng)，利用最靠近每位用戶的服務(wù)器，更快、更可靠地將音樂、圖片、視頻、應(yīng)用程序及其他文件發(fā)送給用戶，來提供高性能、可擴(kuò)展性及低成本的網(wǎng)絡(luò)內(nèi)容傳遞給用戶。

當(dāng)用戶在地理位置上遠(yuǎn)離服務(wù)器的地方訪問網(wǎng)站時(shí)，網(wǎng)絡(luò)鏈路變得復(fù)雜，延遲也會(huì)越高。這時(shí)我們就可以使用 CDN 優(yōu)化前端內(nèi)容的加載速度。CDN 將用戶請(qǐng)求重定向到最近的服務(wù)器

結(jié)論

通常，響應(yīng)時(shí)間的 80-90% 都用于下載前端資源，例如圖像、樣式表、腳本等。因此，優(yōu)化前端數(shù)據(jù)加載對(duì)于降低跳出率和增加訪問者在網(wǎng)站上的停留至關(guān)重要。在本文中，我們討論了一些用于更好地加載前端資源的最佳實(shí)踐。

?

親愛的讀者，

感謝你的時(shí)間。如果你在評(píng)論區(qū)留下的想法或是點(diǎn)贊、關(guān)注、在看，我會(huì)十分高興。

?

Reference

往期精彩回顧：

關(guān)注公眾號(hào)回復(fù)【資源】可免費(fèi)領(lǐng)取學(xué)習(xí)資料！

左手代碼右手磚，拋磚引玉

記得點(diǎn)贊，分享，在看加關(guān)注喲