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

阿榮
發佈於前端
閱讀時間約 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,有興趣可以點擊下面連結查看完整文章。

參考/學習資源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
網站速度優化10大技巧,提升 SEO 排名網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
avatar
littledog littlemonkey
2024-03-12
SEO與網站性能的交流:速度、安全性和效能的平衡在網站運營中,SEO(Search Engine Optimization)扮演著舉足輕重的角色,它不僅關乎網站在搜尋引擎中的排名,還直接影響到網站的流量和曝光度。然而,儘管追求SEO優化是必要的,但我們也必須注意網站性能,包括速度、安全性和效能,這三者之間的平衡對於網站的成功至關重要。 SEO公
Thumbnail
avatar
mckeon ayman
2024-02-09
架設網站的五大重要考量:提升網站效能與使用者體驗在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
avatar
Annachang
2024-01-24
社群專業必修課:JPG、JPEG、PNG圖檔怎麼選會提升網站效能?看完這篇就懂了在設計領域,圖片格式是重要的一環,不同的圖片格式有不同的優缺點,因此在選擇時需要根據不同的需求來考量。我們在網頁上瀏覽圖片、在社交媒體上分享圖片、甚至在工作中使用圖片。而圖像的檔案格式也有很多種,常見的有JPG、JPEG、PNG、GIF、TIFF等。
Thumbnail
avatar
小資女の職場生存之道
2023-11-24
Cloudways 評價:VPS主機加速提升WordPress網站效能! — Website Builder在大家都追求數位轉型升級的今天,為自己的網站選擇一家性能強大且可靠的網站主機服務提供商是至關重要的。對於許多 WordPress 網站架設者而言,想要讓自己的網站更加專業化,提升用戶體驗,進一步展現品牌形象的話,Cloudways 是一個值得考慮的網站主機服務提供商選擇。
Thumbnail
avatar
WebsiteBuilder TW
2023-10-03
【網站規劃必備工具】如何透過 AI 幫你自動生成 Sitemap 與 Wireframe?Relume 是一個網站元件資源庫,支援一鍵複製、貼上至 Webflow 或 Figma 等網站設計工具,讓網站規劃設計無需從 0 開始,大幅提升效率!新推出的 AI Site Builder 更可以運用 AI 自動生成網站架構內容、精美Wireframe。無需手動繪圖,只需輕拉就能調整為期待結果!
Thumbnail
avatar
NoTime NoCode|自動化工作流程
2023-10-01
網站標題、中繼說明、H標籤、ALT屬性:SEO優化的四大秘訣站內頁面的優化是提高網站SEO排名的關鍵步驟之一。這些調整可以幫助Google更好地理解您的網站內容,提高搜索結果中的可見性,並為讀者提供更好的用戶體驗。因此,確保每個網頁的標題、中繼說明、H標籤和圖片ALT屬性都經過適當的優化是至關重要的。
avatar
戰國策集團
2023-09-23
網站架設-從主機、內容規劃開啟做起成功的網站架設在一開始建立的時候,並不容易,特別是對於程式和設計網頁美感,比較沒任何概念的人可能會很慌亂,在打造個人品牌時代來臨,很多人甚至是部落客都紛紛開始有一個獨立的網站,而網站又是怎麼做到的? 由Ranking品牌介紹,一個網站是怎麼誕生的? 網站架設會有哪些費用、哪裡可以架站? 假如是自己建
avatar
林芯
2020-06-20
網站內容的SEO優化為什麼要做網站內容SEO優化?簡單來說,搜索引擎會分析你的網站的內容,並決定要不要將這個頁面推薦給用戶。清晰且優質的內容能夠提升網站的流量,讓更多人分享你的網站,進而增加搜索引擎對網站的信任度及網路的能見度。哈利熊本篇為大家介紹關於網站內容的SEO優化建議!
Thumbnail
avatar
哈利熊HoliBear
2019-09-02
網站企劃〜虛擬店面的空間規劃師 網站企劃其實就像是虛擬店面的裝潢設計師,一家店面或公司要有甚麼分類、產品、服務、規劃、系統 ,把實體的放在虛擬的網路上,只是負責寫企劃至於程式設計和美工就交給其他人!
Thumbnail
avatar
田埂邊的哲學家
2019-02-14