網站效能優化工具 | 前端效能優化

阿榮-avatar-img
發佈於前端
更新於 發佈於 閱讀時間約 2 分鐘
【shout out to 莫力全✨】
重點整理 & 重述 & 加一點點自己的補充

評估網站效能

要怎麼評估一個網站的效能呢?
只靠自我感受? (X)
考慮網速慢的環境 + 搜尋引擎判斷效能 (O)

單看上面的考量點還是會不知道實際該怎麼去判斷,對吧? 莫急莫荒莫害怕,已經有幾個檢測網站的工具可以使用了,它們使用一些特定且公認的指標來檢測網站的效能。



Google PageSpeed Insights

輸入需要檢測的網址就 OK 囉。

首先輸入 Vue 專題網址。好的,不出意料。分數非常非常的低...
在行動裝置和電腦分別獲得 55 和 57 分🥹🥹,無障礙功能分數也還有不小的改善空間。因為資料不會存在 Google 帳號中,測完後想要留資料,可以收藏存在網頁書籤,或複製連結存放,。

行動裝置網頁效能

行動裝置網頁效能

電腦網頁效能

電腦網頁效能


除了總分以外,也提供了各項指標的速度和一系列的診斷項目建議 (只截部分作為展示)。

raw-image
raw-image


PageSpeed 背後其實也是根據 Lighthouse 分析的研究資料計算出分數的。LH 資料比較完整和多元,相對的,使用方式比較不方便;PS 則非常容易使用,只要打開瀏覽器就可以,aka 也能用手機開!


WebPageTest

WebPageTest 最大的優勢就是「可以輕鬆檢測網站在不同瀏覽器下的狀況」。一樣輸入網站網址就 OK 了,環境部分可以選擇他預設的,或是進階設定成自己需要的。

raw-image


Google Lighthouse

莫大最常使用也最推薦的工具,介面圖表與網站檢測後的資訊都十分完整,除了效能以外,還提供如 Accessibility、Best Practices、SEO,還可以檢測是不是符合 PWA 的標準。

chatgpt 解釋:PWA 指的是「Progressive Web App」,是一種結合網頁和原生應用程式功能的應用程式開發方法。PWA 允許開發者建立具有快速載入速度、離線工作能力、推送通知等特性的 Web 應用程式,同時提供類似原生應用程式的使用者體驗。

2 種使用方法

  1. 安裝 Lighthouse Chrome Extension
  2. 使用 Devtool 的 Lighthouse

Lighthouse Chrome Extension

lighthouse-ci

最後有補充將 lighthouse 結合 CI/CD workflow,有興趣可以點擊下面連結查看完整文章。

參考/學習資源

留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
Thumbnail
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站SEO對於公司企業或個人站長而言,扮演著極為重要的角色。透過有效的SEO優化,你的網站將能提升搜尋引擎的關鍵字排名,獲得更多的自然流量,提升用戶體驗和成交轉化率,進而提高品牌曝光和知名度。只要掌握快速提升網站權重優化方法,正確執行SEO優化排名,即可為你的網站打開通往成功的大門。
Thumbnail
網站SEO對於公司企業或個人站長而言,扮演著極為重要的角色。透過有效的SEO優化,你的網站將能提升搜尋引擎的關鍵字排名,獲得更多的自然流量,提升用戶體驗和成交轉化率,進而提高品牌曝光和知名度。只要掌握快速提升網站權重優化方法,正確執行SEO優化排名,即可為你的網站打開通往成功的大門。
Thumbnail
※ 效能 What tools would you use to monitor or analyze your performance ? 中文意思:在監控或分析系統性能方面可能會使用哪些工具? ※ 解答: 常見的監控和分析工具,可分成以下6大類: 系統監控工具: 例如,Promethe
Thumbnail
※ 效能 What tools would you use to monitor or analyze your performance ? 中文意思:在監控或分析系統性能方面可能會使用哪些工具? ※ 解答: 常見的監控和分析工具,可分成以下6大類: 系統監控工具: 例如,Promethe
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News