英文 | https://javascript.plainenglish.io/how-to-improve-your-websites-page-load-speed-8fa81caf3ed2

翻譯 | 小愛(ài)

如果你曾經(jīng)遇到過(guò)網(wǎng)站加載緩慢的問(wèn)題，那么，你今天需要來(lái)了解一下頁(yè)面速度如何影響用戶體驗(yàn)。沒(méi)有人愿意等待10秒鐘甚至更長(zhǎng)的時(shí)間來(lái)訪問(wèn)他們正在尋找的信息或者網(wǎng)頁(yè)。

快速加載的頁(yè)面具有更好的用戶留存率和更低的跳出率，并且更快地贏得了用戶的信任。

無(wú)論你的設(shè)計(jì)或內(nèi)容有多強(qiáng)，如果你的網(wǎng)站加載速度過(guò)慢，用戶都不會(huì)在你的網(wǎng)站上投入更多時(shí)間。

有數(shù)據(jù)研究發(fā)現(xiàn)，延遲一秒鐘的電子商務(wù)網(wǎng)站，“頁(yè)面瀏覽量將減少11％，客戶滿意度下降16％，轉(zhuǎn)化次數(shù)減少7％”。

因此，網(wǎng)站的用戶體驗(yàn)非常重要，Google會(huì)積極跟蹤負(fù)載速度指示器，例如大內(nèi)容涂料（LCP），首次輸入延遲（FID）和累積布局偏移（CLS）。必須在三個(gè)因素上取得良好的成績(jī)。你可以通過(guò)Google Search Console中的核心網(wǎng)絡(luò)生命力報(bào)告來(lái)衡量網(wǎng)站的效果。

3種測(cè)量頁(yè)面速度的工具

你必須先了解自己的效果如何，才能優(yōu)化網(wǎng)站速度。你可以使用三種簡(jiǎn)單的工具來(lái)完成這項(xiàng)工作：

1、Google Search Console

盡管從技術(shù)上講它不能衡量站點(diǎn)速度，但是，你可以使用新的核心網(wǎng)絡(luò)生命力報(bào)告來(lái)查找需要解決的加載問(wèn)題。Google Search Console將為你的整體網(wǎng)站評(píng)分，并為你提供需要優(yōu)化的URL列表。

2、PageSpeed

由Google開(kāi)發(fā)的PageSpeed Insights是一個(gè)站點(diǎn)速度測(cè)試儀，能夠識(shí)別潛在的負(fù)載速度問(wèn)題。輸入要檢查的URL即可，該工具將對(duì)你的站點(diǎn)進(jìn)行爬網(wǎng)并創(chuàng)建完整的報(bào)告。

該工具將生成“桌面和移動(dòng)”得分，以及一些優(yōu)化頁(yè)面的建議。這是我們的目標(biāo)：

這是我們需要避免的事情：

3、GTmetrix

如果你需要更高級(jí)的功能，或者要在特定位置測(cè)試頁(yè)面速度，GTmetrix是一個(gè)有用的工具。

它將測(cè)試來(lái)自不同位置的網(wǎng)站的頁(yè)面加載速度，因此，你可以專注于在目標(biāo)地理位置內(nèi)增加網(wǎng)站的用戶體驗(yàn)。高級(jí)設(shè)置工具非常有用。你可以設(shè)置位置，設(shè)備，屏幕分辨率等，以執(zhí)行更準(zhǔn)確的信息。

改善網(wǎng)站頁(yè)面加載速度的8個(gè)步驟

在不了解基礎(chǔ)知識(shí)的情況下，讓我們探索提高站點(diǎn)加載速度的八種方法：

1、優(yōu)化圖像

在談?wù)撫槍?duì)站點(diǎn)速度的圖像優(yōu)化時(shí)，我們指的是三件事：

圖像文件大小

圖像是添加上下文，解釋復(fù)雜主題或只是在內(nèi)容塊之間提供喘息空間的好方法。但是，沉重的圖像會(huì)減慢你的頁(yè)面加載速度。

你應(yīng)該將文件的大小盡可能地縮小。大圖像的好標(biāo)記是每幅圖像150kb至500kb。畢竟，你可能會(huì)有幾張圖像，它們都會(huì)對(duì)你頁(yè)面的整體大小有所幫助。

如果你需要壓縮它們，TinyPNG是一個(gè)很好的免費(fèi)工具，可以開(kāi)始使用。只需從服務(wù)器下載圖像，對(duì)其進(jìn)行壓縮，然后重新加載。

提示：借此機(jī)會(huì)優(yōu)化其名稱，alt屬性和格式。

文件格式

創(chuàng)建內(nèi)容時(shí)使用PNG圖像并不少見(jiàn)。畢竟，它們更易于處理。

問(wèn)題是這些是較重的圖像類型，導(dǎo)致加載速度較慢。在不對(duì)圖像擴(kuò)展進(jìn)行全面討論的情況下，我們建議使用JPG。這些已成為網(wǎng)絡(luò)上圖像的標(biāo)準(zhǔn)格式。它們不會(huì)丟失圖像數(shù)據(jù)信息，損失圖片質(zhì)量，并且圖像文件很小。

注意：WebP是一種備受關(guān)注的半新格式。這種格式非常輕巧，比JPG輕33％。不利之處是該格式仍與某些瀏覽器存在兼容性問(wèn)題。

圖片尺寸

是的。你的圖像分辨率很重要。但是，除非它覆蓋了用戶的所有屏幕空間，否則你實(shí)際上并不需要4000 x 4000像素的圖像。

確保上傳的圖像在縮放時(shí)不會(huì)失去質(zhì)量。即，文章上最常見(jiàn)的是800 x 1200的圖像。

此外，你必須在image標(biāo)簽內(nèi)直接聲明圖像的尺寸。瀏覽器將計(jì)算圖像在加載之前需要“保存”的空間，從而減少頁(yè)面的CLS（累積布局偏移）。

你可以添加width和height屬性。例如：

<！—設(shè)置640：360，即16：9的長(zhǎng)寬比→

2、縮小CSS和JavaScript

最小化CSS和JavaScript文件旨在減少瀏覽器加載顯示網(wǎng)站所需的每個(gè)元素所花費(fèi)的時(shí)間。

由于機(jī)器對(duì)樣式選擇不敏感，因此我們可以通過(guò)刪除空格，刪除注釋，使用較短的名稱，以及基本上除去我們的機(jī)器運(yùn)行它，所不需要的任何代碼來(lái)創(chuàng)建較小尺寸的文件。

當(dāng)然，你不想縮減正在使用的實(shí)際代碼，因?yàn)樗鼘⒆兊脦缀鯚o(wú)法閱讀。

你想創(chuàng)建文件的縮小版本，然后在你的實(shí)時(shí)項(xiàng)目中實(shí)現(xiàn)它們。為此，我們建議使用兩個(gè)簡(jiǎn)單的工具：

https://cssminifier.com/
https://javascript-minifier.com/

這些簡(jiǎn)單易用的工具只需要你在“輸入”框中添加代碼，然后單擊“縮小”即可將代碼轉(zhuǎn)換為可復(fù)制并粘貼到項(xiàng)目上的縮小版本。

提示：除了縮小文件之外，你還可以啟用Gzip壓縮以進(jìn)一步減小文件大小。

3、當(dāng)心第三方腳本

如果你使用的是Google Analytics（分析）之類的工具，那么你已經(jīng)在使用第三方腳本。

這些腳本對(duì)于將新功能添加到你的站點(diǎn)非常有幫助。但是，它們?nèi)匀皇切枰诳蛻舳虽秩净蜃x取的代碼片段，從而增加了頁(yè)面速度的加載時(shí)間。確保要添加的代碼經(jīng)過(guò)優(yōu)化且必不可少。刪除所有未使用的東西。

4、使用VPS托管服務(wù)

你的托管服務(wù)提供商使用的服務(wù)器對(duì)于你的站點(diǎn)速度至關(guān)重要。如果機(jī)器對(duì)用戶請(qǐng)求的響應(yīng)速度很慢，則無(wú)論用戶的互聯(lián)網(wǎng)連接速度有多快，瀏覽器都會(huì)緩慢接收信息。

另一個(gè)因素是你使用的計(jì)劃。通常是共享計(jì)劃是廉價(jià)的，因?yàn)橥泄芊?wù)提供商會(huì)為多個(gè)客戶端租用同一臺(tái)服務(wù)器，這對(duì)于流量低的站點(diǎn)來(lái)說(shuō)綽綽有余。

但是，如果你確實(shí)需要提高站點(diǎn)速度，則需要從服務(wù)器訪問(wèn)更多資源。更重要的是，你將需要站點(diǎn)可訪問(wèn)的資源數(shù)量保持一致。

首先，我想到的是專用服務(wù)器。你基本上是在為自己租用整個(gè)服務(wù)器。但這可能會(huì)很昂貴，而且對(duì)于大多數(shù)用例而言，它遠(yuǎn)遠(yuǎn)超出了你的需求。

本質(zhì)上，托管服務(wù)提供商在服務(wù)器的操作系統(tǒng)上創(chuàng)建一個(gè)層，使你可以完全控制虛擬機(jī)的資源，并將其與其他用戶分開(kāi)。這樣可以防止其他站點(diǎn)從你的資源中獲取資源，并允許你以所需的方式自定義服務(wù)器。

5、使用內(nèi)容傳送網(wǎng)絡(luò)（CDN）

就像我們?cè)谏厦嬷赋龅哪菢?，你的托管只不過(guò)是一臺(tái)存儲(chǔ)你網(wǎng)站數(shù)據(jù)并在瀏覽器發(fā)出請(qǐng)求后就通過(guò)Internet傳遞數(shù)據(jù)的機(jī)器。

對(duì)于你的網(wǎng)站速度而言，意味著你的托管距離用戶越遠(yuǎn)，傳遞數(shù)據(jù)所需的時(shí)間就越多。這就是CDN或內(nèi)容交付網(wǎng)絡(luò)發(fā)揮作用的地方。

簡(jiǎn)而言之，CDN是一個(gè)遍布全球的服務(wù)器網(wǎng)絡(luò)，可將你的站點(diǎn)資產(chǎn)（例如圖像，HTML文件，JSON文件等）從最近的服務(wù)器傳遞給最終用戶。

你可以在其中找到一些選擇，但是如果你急于趕快，建議你探索Cloudflare。

如果你不使用內(nèi)容傳送網(wǎng)絡(luò)，則它可能是你獲得的最快捷徑。

6、推遲JavaScript加載

當(dāng)你的網(wǎng)站加載時(shí)，瀏覽器會(huì)下載你的網(wǎng)站所需的所有文件，包括JavaScript文件。

但是，你的主要重點(diǎn)是向用戶提供他們想要在頁(yè)面上看到的信息。這就是為什么推遲JavaScript對(duì)縮短頁(yè)面加載時(shí)間如此有用的原因。

簡(jiǎn)而言之，延遲文件可防止在加載其他（更重要的）元素之前將其加載。你可以先加載HTML和CSS，以便用戶可以更快地訪問(wèn)內(nèi)容，然后才加載腳本，以添加你為頁(yè)面設(shè)想的額外功能。

你可以使用defer屬性來(lái)執(zhí)行此操作。這是有關(guān)如何使用defer有效加載JavaScript的深入指南。

提示：另一種有效加載javascript的方法是在關(guān)閉body標(biāo)簽之前添加腳本。這將使瀏覽器在獲取并執(zhí)行腳本之前先解析整個(gè)站點(diǎn)。

7、啟用瀏覽器緩存

每次用戶訪問(wèn)你的網(wǎng)站時(shí)，瀏覽器都需要下載構(gòu)成你頁(yè)面的所有文件。如果可以使瀏覽器存儲(chǔ)數(shù)據(jù)，以便下次用戶鍵入U(xiǎn)RL時(shí)，瀏覽器已經(jīng)具有顯示其內(nèi)容所需的所有信息，該怎么辦？

為此，你需要通過(guò)設(shè)置資產(chǎn)的過(guò)期日期來(lái)從.htaccess文件中啟用瀏覽器緩存。

如何提高網(wǎng)站的頁(yè)面加載速度

3種測(cè)量頁(yè)面速度的工具

1、Google Search Console

2、PageSpeed

3、GTmetrix

改善網(wǎng)站頁(yè)面加載速度的8個(gè)步驟

1、優(yōu)化圖像

圖像文件大小

文件格式

圖片尺寸

2、縮小CSS和JavaScript

3、當(dāng)心第三方腳本

4、使用VPS托管服務(wù)

5、使用內(nèi)容傳送網(wǎng)絡(luò)（CDN）

6、推遲JavaScript加載

7、啟用瀏覽器緩存

8、使用延遲加載

結(jié)論

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

如何提高網(wǎng)站的頁(yè)面加載速度

3種測(cè)量頁(yè)面速度的工具

1、Google Search Console

2、PageSpeed

3、GTmetrix

改善網(wǎng)站頁(yè)面加載速度的8個(gè)步驟

1、優(yōu)化圖像

圖像文件大小

文件格式

圖片尺寸

2、縮小CSS和JavaScript

3、當(dāng)心第三方腳本

4、使用VPS托管服務(wù)

5、使用內(nèi)容傳送網(wǎng)絡(luò)（CDN）

6、推遲JavaScript加載

7、啟用瀏覽器緩存

8、使用延遲加載

結(jié)論

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

1、Google Search Console

2、PageSpeed

3、GTmetrix

1、優(yōu)化圖像

2、縮小CSS和JavaScript

3、當(dāng)心第三方腳本

4、使用VPS托管服務(wù)

5、使用內(nèi)容傳送網(wǎng)絡(luò)（CDN）

6、推遲JavaScript加載

7、啟用瀏覽器緩存

8、使用延遲加載

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)