前言
今天來跟各位聊一個前端開發的工具，它叫做「PageSpeed Insights」。
就如同它字面上的意思，能夠幫你提升 (優化) 網站的載入速度。
一般來說，我覺得任何網站開發完成後，都要跑一下這個工具！
為什麼我會這樣說：因為有時候是「取決於客戶」要不要跑～
阿我本人是比較囉嗦一點，就算客戶說不用跑，我還是會給它偷跑一下。
這篇文章主要放在「工具」的教學，至於「優化技巧」要等我熟一點，才能分享給大家瞧瞧。
示範的網站只有用 HTML、CSS、BootStrap 進行設計，
對於前、後端的開發人員應該都可以輕鬆上手！
貼心提醒：如果圖片看不清楚，可以點開看大圖喔～
軟體資訊
【名稱】Google PageSpeed Insights (簡稱 PSI)
【性質】免費
【版本】無
【下載】無
【官網】https://pagespeed.web.dev/
實際操作
首先進入官網，然後把你要「優化的網站網址」丟上去，記得點擊「分析」。
讓它跑一下，最後產出「行動裝置」和「電腦」兩個報表。
按照我以前的經驗來看，電腦報表通常不會有大問題，反而是「行動裝置」可能不好看。
這是因為工程師在實際開發時，往往忽略 RWD 的部分 (覺得電腦螢幕看起來沒跑版就 OK)。
另外，下方 4 個圈圈，我猜有人會問：是不是要全部 100 分才合格？
請別為難自己，你只要保持 4 個「綠色」圈圈，就代表這個網站的載入速度夠快了。
我就以「電腦」報表來說，紅色三角形是我優先要處理的項目。
當然如果你很熟悉它的稽核指標，你也可以只挑重點處理：
1. FCP (首次顯示內容所需時間)：
使用者看到第一個元素顯示於網頁上所需要的時間。(最好在 1.8 秒以下)
2. LCP (最大內容繪製時間)：
使用者在可見區域看到最大元素 (通常是 img 元素) 所需要的時間。(最好在 2.5 秒以下)
3. 其他指標... (我沒有很熟悉)
我想特別提 LCP 這個指標，以前在 img 元素習慣直接加上 loading='lazy' 屬性值。
那時的我天真以為：因為圖片很大張，會拖慢載入的速度，所以我要「全部」慢慢載入。
好啦，這時候 FCP 和 LCP 就「難看」了，你問我為什麼：
因為網站「最上方」就剛好放了一張「最大張」的圖片，所以就悲劇了。
帶著大家看第一個優化項目，它叫我提供 next-gen 圖片格式，就是 WebP 圖片。
因為客戶的圖片不算機密資訊 (可以在網站公開)，所以我請他到 cloudconvert 轉檔。
這個工具蠻好用的，像是 PNG 或 JPG 都可以轉成 WebP 檔案，一個網站就搞定這個問題。
最後說一下，現代網站的組成通常少不了「圖片」這個元素，同時它也是最容易踩雷的地方。
其實 Google 有幫大家整理圖片優化的技巧，如果你卡關的時候可以進去看看。
今天就跟大家介紹到這邊，如果有問題可以在下方跟我聊～
我是 W 先生，我們下次見！
順便工商一下，我預計在 2025 上半年舉辦我的論文訪談，詳情可以參考這裡。
懶人包
延伸閱讀
🔥 馬上追蹤本站，千萬別錯過最新文章～
留言列表
軟體教學 (29)