有研究表明：用戶(hù)打開(kāi)網(wǎng)站最滿(mǎn)意的時(shí)間是3秒以下，如果打開(kāi)時(shí)間超過(guò)10秒，就會(huì)有98%的用戶(hù)選擇直接關(guān)閉網(wǎng)站。如此嚴(yán)重的用戶(hù)流失對(duì)于企業(yè)來(lái)說(shuō)是非常嚴(yán)重的問(wèn)題。所以，我們要盡可能地提升網(wǎng)站打開(kāi)速度，接下來(lái)我從一名程序猿的角度來(lái)和您聊聊該怎么提速。

首先，我們要了解當(dāng)前頁(yè)面存在的問(wèn)題。這里借助Google 測(cè)速工具：PageSpeed Insights。將頁(yè)面鏈接粘貼到工具中進(jìn)行分析，可以看到對(duì)當(dāng)前網(wǎng)頁(yè)的診斷性能結(jié)果。90分以上為優(yōu)秀，我們的目標(biāo)也是將網(wǎng)頁(yè)性能提升至90+。

這里我們了解一下網(wǎng)站性能判定的5個(gè)指標(biāo)。

1、First Contentful Paint，它標(biāo)記了繪制出首個(gè)文本或首張圖片的時(shí)間。

2、Largest Contentful Paint，它標(biāo)記了繪制出最大文本或圖片的時(shí)間。

3、Total Blocking Time，它衡量頁(yè)面被阻止響應(yīng)用戶(hù)輸入（例如鼠標(biāo)點(diǎn)擊、屏幕點(diǎn)擊或鍵盤(pán)按下）的總時(shí)間。任何執(zhí)行時(shí)間超過(guò) 50 毫秒的任務(wù)都是長(zhǎng)任務(wù)。50 毫秒后的時(shí)間量是阻塞部分。例如，如果 Lighthouse 檢測(cè)到一個(gè) 70 毫秒長(zhǎng)的任務(wù)，則阻塞部分將為 20 毫秒。

4、Cumulative Layout Shift，?它旨在衡量可見(jiàn)元素在視口內(nèi)的移動(dòng)情況。這種情況呈現(xiàn)的結(jié)果就是您在網(wǎng)上閱讀一篇文章，結(jié)果頁(yè)面上的某些內(nèi)容突然發(fā)生改變，文本在毫無(wú)預(yù)警的情況下移位，導(dǎo)致您找不到先前閱讀的位置。或者您正要點(diǎn)擊一個(gè)鏈接或一個(gè)按鈕，但在您手指落下的瞬間，咦！鏈接移位了，結(jié)果您點(diǎn)到了別的東西！如同下面視頻展示的情況。

5、Speed Index，它是衡量頁(yè)面加載期間內(nèi)容以視覺(jué)方式顯示的速度。通常首先捕獲瀏覽器中頁(yè)面加載的視頻，并計(jì)算幀之間的視覺(jué)進(jìn)度。

我們對(duì)照以上指標(biāo)來(lái)解決問(wèn)題，修改網(wǎng)頁(yè)中的內(nèi)容，這些指標(biāo)會(huì)隨之改善。在分析結(jié)果下方，給予了我們優(yōu)化建議和診斷結(jié)果，可根據(jù)優(yōu)化建議來(lái)提升網(wǎng)站速度，通過(guò)優(yōu)化診斷結(jié)果來(lái)提升性能。

1、在上傳圖片或視頻時(shí)，要在確保清晰度的情況下，最大程度地壓縮，這樣圖片或視頻才能加載得更快，另外，WebP 和 AVIF 等圖片格式的壓縮效果通常優(yōu)于 PNG 或 JPEG，因而下載速度更快，這也是一種優(yōu)化方式。

2、內(nèi)嵌重要資源或推遲加載不太重要的資源。壓縮并移除多余的未使用的js代碼和css代碼，減少網(wǎng)頁(yè)容量。

下面是實(shí)例：

電腦設(shè)備性能90+：

手機(jī)端口性能79+，根據(jù)指標(biāo)來(lái)看，最大內(nèi)容繪制和可視內(nèi)容填充的時(shí)間有點(diǎn)長(zhǎng)，據(jù)此優(yōu)化建議，我們調(diào)整一下圖片格式和大小。

最終呈現(xiàn)效果，性能90+。

好了，本次分享到此結(jié)束，看上去稍復(fù)雜，但實(shí)際上并不難學(xué)會(huì)，您動(dòng)手試試給自己的網(wǎng)站提速？