品牌在建立自己的官網(wǎng)前，除了視覺(jué)化的網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)排版之外，也要將「網(wǎng)站速度」這點(diǎn)考量進(jìn)去，因?yàn)榫W(wǎng)站速度跟使用者體驗(yàn)有高度關(guān)聯(lián)。
設(shè)想一下，當(dāng)品牌好不容易藉由數(shù)位行銷將客人帶進(jìn)官網(wǎng)，結(jié)果發(fā)現(xiàn)只要在品牌官網(wǎng)執(zhí)行一個(gè)動(dòng)作就要Loading 很久，想必對(duì)這個(gè)網(wǎng)站不會(huì)留下什么好印象，最終的結(jié)果就是造成客戶的流失，因此，提升網(wǎng)站速度就成為經(jīng)營(yíng)網(wǎng)站必須做的功課之一，而以下就用Google Page Speed Insights這個(gè)工具教學(xué)如何優(yōu)化網(wǎng)站速度，增加網(wǎng)頁(yè)運(yùn)轉(zhuǎn)效能，進(jìn)而提供客戶良好的使用體驗(yàn)
Google Page Speed Insights 是什么？
?Google Page Speed Insights是一款常用于檢測(cè)網(wǎng)站速度的工具，是由Google開發(fā)團(tuán)隊(duì)所制作，只要將網(wǎng)址放入測(cè)試軟體中，系統(tǒng)就會(huì)針對(duì)該網(wǎng)址分別在「電腦」以及「行動(dòng)裝置」提供?網(wǎng)站速度?相關(guān)資訊，包含「網(wǎng)站體驗(yàn)核心指標(biāo)」以及「效能診斷」。
網(wǎng)站擁有者可以透過(guò)這兩項(xiàng)檢測(cè)網(wǎng)站速度指標(biāo)，利用實(shí)際數(shù)據(jù)去檢測(cè)自身的網(wǎng)站到底快或慢，具體知道網(wǎng)站速度改如何優(yōu)化。
Google Page Speed Insights 指標(biāo)
網(wǎng)站體驗(yàn)核心指標(biāo)（Core Web Vitals）
網(wǎng)站體驗(yàn)核心指標(biāo)會(huì)搜集網(wǎng)站在過(guò)去28天內(nèi)的三組數(shù)據(jù)（LCP、FID、CLS），進(jìn)而評(píng)估該網(wǎng)址劃分不同的等級(jí)：「優(yōu)良的網(wǎng)址」、「待改善的網(wǎng)址」、「不良的網(wǎng)址」
LCP（Largest Contentful Paint）：計(jì)算網(wǎng)頁(yè)中最大元件載入時(shí)花費(fèi)的時(shí)間，例如一個(gè)網(wǎng)址中有一張尺寸較大的圖片，這個(gè)圖片也是需要載入時(shí)間最久的元件，LCP就會(huì)計(jì)算載完這張圖所需要的時(shí)間。
FID（First Input Delay）：當(dāng)使用者進(jìn)入網(wǎng)頁(yè)，并在該網(wǎng)頁(yè)進(jìn)行的第一個(gè)互動(dòng)中，可能是點(diǎn)了連結(jié)、按鈕、上傳資料…等，網(wǎng)頁(yè)需要花多久的時(shí)間才能反應(yīng)使用者的互動(dòng)，簡(jiǎn)單來(lái)說(shuō)，這是一個(gè)Google衡量網(wǎng)頁(yè)跟用戶「互動(dòng)性」的指標(biāo)。
CLS（Cumulative Layout Shift）：又稱為「累計(jì)版面配置轉(zhuǎn)移」，當(dāng)網(wǎng)頁(yè)中的元素載入時(shí)，很容易因?yàn)榫W(wǎng)頁(yè)速度不穩(wěn)造成畫面跳動(dòng)，為了視覺(jué)的「穩(wěn)定性」并且提供給使用者良好的網(wǎng)站體驗(yàn)，CLS越低越好。
優(yōu)良網(wǎng)址待改善網(wǎng)址不良網(wǎng)址
| 優(yōu)良網(wǎng)址 | 待改善網(wǎng)址 | 不良網(wǎng)址 | |
| LCP | <2.5sec | 2.5-4.0sec | >4.0sec |
| FID | <100ms | 100-300ms | >300ms |
| CLS | <0.1 | 0.1-0.25 | >0.25 |
效能診斷（Performance diagnostics）
?Google Page Speed Insights結(jié)合Lighthouse分析模擬網(wǎng)站在FCP、LCP、CLS…等指標(biāo)權(quán)重后，給予檢測(cè)的網(wǎng)址一個(gè)分?jǐn)?shù)，如果計(jì)算出來(lái)的分?jǐn)?shù)介于0-50分，則會(huì)顯示「紅色」，代表網(wǎng)頁(yè)還有多處需要加強(qiáng)；分?jǐn)?shù)介于5-89分，則會(huì)顯示「橘色」；分?jǐn)?shù)超過(guò)90分，則會(huì)顯示「綠色」，代表是優(yōu)良的網(wǎng)址。
雖然效能診斷是透過(guò)「模擬」的環(huán)境進(jìn)行測(cè)試，但是仍然網(wǎng)站擁有者然仍可以根據(jù)提供的指標(biāo)項(xiàng)目進(jìn)行優(yōu)化，讓網(wǎng)頁(yè)更符合Google網(wǎng)頁(yè)速度的標(biāo)準(zhǔn)。
Google Page Speed Insights 教學(xué)
1. 至Google Page Speed Insights填入網(wǎng)址
2. 查看該網(wǎng)址在「電腦」以及「行動(dòng)裝置」的成效
3. 查看網(wǎng)站體驗(yàn)核心指標(biāo)
4. 查看效能診斷分?jǐn)?shù)
5. 針對(duì)優(yōu)化建議做網(wǎng)址改善
Google Page Speed Insights 整體結(jié)論
網(wǎng)站速度是每一個(gè)經(jīng)營(yíng)網(wǎng)站者本身必須考量的問(wèn)題，除了用「體感」的方式感受網(wǎng)頁(yè)速度之外，?Google Page Speed Insights提供了數(shù)據(jù)、指標(biāo)來(lái)評(píng)估網(wǎng)頁(yè)快與慢，讓網(wǎng)頁(yè)經(jīng)營(yíng)者在優(yōu)化上可以更有方向。
一個(gè)對(duì)于Google 來(lái)說(shuō)使用者體驗(yàn)優(yōu)良、網(wǎng)頁(yè)速度快，也會(huì)有助于在SEO 上的排名，Google也會(huì)更愿意推薦該網(wǎng)站在指定搜尋結(jié)果中，不過(guò)即便如此，也要提醒Google Page Speed Insights只是一個(gè)參考的數(shù)據(jù)指標(biāo)，在進(jìn)行網(wǎng)頁(yè)速度優(yōu)化時(shí)，也要搭配其他網(wǎng)站速度監(jiān)測(cè)的軟體同步進(jìn)行，讓網(wǎng)頁(yè)速度的優(yōu)化效果更加全面。
如果對(duì)于網(wǎng)站速度或是自家網(wǎng)站在Google Page Speed Insights?數(shù)字有任何疑問(wèn)，都?xì)g迎與我們?展曜網(wǎng)頁(yè)設(shè)計(jì)?聊聊，我們將提供您最完整的?網(wǎng)頁(yè)速度優(yōu)化?建議。
如果您能訪問(wèn)，你點(diǎn)擊試試。https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect
