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

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

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

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

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

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

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

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

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

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

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

下面是實例：

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

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

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

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