以下介紹的免費測試工具,原意是給網站開發員使用,以改善網站編碼的。由於它易於使用,因此,小編也介紹給大家,作為一個參考工具。
不過,在使用這工具前,必須明白這工具有其限制(下文詳述),評分不代表一切,所以測試結果只能作為大方向的評比,不應過份執着於分數。 這一項工具名為PageSpeed Insights,是由 Google 提供的工具,可以測試一個網頁在手機和桌面電腦上的用戶體驗,並提供改進建議。 它的評分高低,代表了網頁的性能和優化程度,越高越好。 稍後會介紹如何使用這工具。現在先談談高性能網站對你有什麼好處。
![PageSpeed Insights測試結果](https://www.hkplatform.com/wp-content/uploads/pagespeed_insights-1024x778.jpg)
評分高,有什麼好處?
在 PageSpeed Insights 取得高分的網站,代表網站的性能好、優化程度高,對企業而言,最少有五項優勢。
1. 提高網站排名和流量
讓網站更容易被搜索引擎發現和索引,從而提高網站的排名和流量。因為網站性能優化,本來就是網站的 SEO(搜索引擎優化)中的重要一環。
2. 用戶滿意度和忠誠度提高
優化後的網站,載入速度快,減少用戶的等候時間,大大降低流失率;並提高用戶的體驗和滿意度,從而增加用戶對網站和品牌的信任和忠誠。
3. 提高轉化率和收入
網站性能優化後,可以增加用戶在網站上的停留時間和互動次數,提高用戶完成目標動作的可能性,從而增加網站的轉化率和收入。
4. 提升品牌形象和地位
藉着提升網站的專業度和質量,給用戶留下良好的第一印象,從而提高品牌的形象和地位。
5. 節省資源
經過優化的網站,長遠可以節省網站流量和伺服器資源,原因是網頁的大小和請求數量都減少了,讓網頁更快地加載和渲染。
如何使用PageSpeed Insights
PageSpeed Insights非常容易使用,步驟如下。
- 只需前往它的網址:https://pagespeed.web.dev/,輸入想要測試的網址URL,然後點擊 “Analyze” (分析)。
- 耐心等候工具分析網頁,可能需時幾秒至一分鐘,具體取決於頁面的複雜性和你的連線速度。
- 分析完成後,你將看到網頁的移動版(Mobile)和桌面版(Desktop)得分。
![評分結果的三個部分](https://www.hkplatform.com/wp-content/uploads/pagespeed_insights_ex2-1024x1148.jpg)
怎麼看評分
在評分版面上,大致可分為三個部分。 評分結果的三個部分。
1. 移動版和桌面版
這兩個選項,分別顯示網頁的移動版(即手機)和桌面版(即電腦)的模擬用戶體驗。 一般來說,移動版的評分較低,因為它模擬以慢速的4G載入,相對於桌面電腦的速度,一般都會較慢。
2. 網站體驗核心指標(Core Web Vitals)
這一部分未必有顯示。一些中小企網站,由於流量不大,未必有足夠數據展示這些數據。 這部顯示的「網站體驗核心指標」,是Google使用的技術性指標,主要給網站技術員參考。非技術人員可以直接跳過。
3. 診斷性能的評分
在「診斷性能問題」(Diagnose performance issues)標題下的部分,有四個圓圈,標示着四個分數。 這四個評分,就是我們最主要參考的分數。下面會逐一講解。 至於評分以下的詳情,純屬技術細節,非技術人員可以無須理會。
分數的解讀
在「診斷性能問題」下顯示的分數,分為四項,以四個圓圈顯示。評分範圍由0至100,以三種顏色標示;其中0到49 是紅色(差),50 到 89 是橙色(一般),90 到 100 是綠色(好)。 四類評分代表的意思如下:
性能表現(Performance)
這是最主要的參考評分,它代表了網頁在速度和技術優化方面的表現。雖然它是網頁的總體得分,但這評分的技術要求是最高的;即使其餘三項都超過70分,這一項也可以低於10分。
無障礙網頁(Accessibility)
便利視障人士使用的程度,在編寫網頁時,有沒有按照規範的準則,例如導航的便利性、圖像替代文本、用色對比等因素。
最佳作業(Best Practices)
在多大程度上,遵循了網站開發的最佳做法,比如使用現代網絡技術、優化代碼和安全連接等等。
搜索引擎優化(SEO)
針對搜索引擎的優化程度,這操作可以鼓勵Google等搜索引擎,更好地在網上搜尋結果(SERP, Search Engine Results Page)中顯示該網頁,考慮包括元數據、網站結構、便於手機使用等方面。 這些分數不是固定的,如多次測試結果有些微分別,屬於正常;若突然一次分數大跌,有可能是碰上了網絡擁塞(例如:DNS解析、伺服器、第三方軟件、CDN等,都有機會出現交通擠塞),不能作準,應以平均值為參考指標。
提高性能的成本
要達到提高網站性能和優化的目標,提高PageSpeed Insights 的評分,涉及以下幾方面:
- 使用一些複雜或特殊的技術,如壓縮、預渲染、伺服器端渲染、惰性載入等;因而需要額外的開發、測試時間,以確保網站的正常運作和兼容性。
- 不斷地調整和優化網頁的結構、內容、圖片、字體、代碼等;這些調整也可能影響網站的設計和功能,需要更多的測試和微調,並可能牽涉一些工具或平台的協調和整合。
- 在網站更新或維護時,因為上述技術的應用,有可能相對複雜,需要重新測試和調整。
- 採用表現良好的網頁寄存服務。
無可避免地,這些操作涉及額外成本。有外國資料顯示,如果要把一個網站,由零優化,改變成在PageSpeed Insights取得高分,可能需要數千至數萬美元!但這不是絕對的。 其實每一家企業、每一個網站,都應該進行網站優化,提升性能表現。過高的成本,可能令中小企處於不利位置。 因此,我們提出了適用於大部分企業,包括中小企的網站設計方案。
PageSpeed Insights的限制
儘管PageSpeed Insights分數是越高越好,但也只應作為參考。因為這工具有它的限制,分數不代表一切。
1. 只評估部分因素
一個網站的質素,受眾多因素影響,PageSpeed Insights只測試了其中一部分因素,而沒有涵蓋所有因素。 重要的因素如設計美感、互動效能,就沒有被考慮在內。 簡言之,一個簡陋的網頁,可以獲得100分,但相信它不會是你想要的網站。
2. 不能避免的矛盾
PageSpeed Insights的指標,是基於不同的規則和演算法進行計算的,本就可能存在矛盾。 而且在實際操作上,有些目標與另一些目標是有衝突的,例如為了符合不同大小裝置的最佳顯示,最新、最好做法是設定浮動大小;但Google卻指出你應該設定明確的尺寸–––而Google所說會出現的問題,其實已經處理了而不再存在。
3. 不反映連線速度
網頁使用者的連線速度,會影響他們瀏覽網頁的體驗,而PageSpeed Insights只預設了一個連線速度來進行測試,沒有提供不同連線速度的體驗評分。
4. 實驗室數據
它顯示的四個具體分數,是基於實驗室數據模擬出來的,並非真實世界的數據,因此,它與現實中使用者的感受或有不同。 若評分已經不俗,例如有90分,倘要求由90分再提升至100分,則當中牽涉的成本,有可能以倍數計。是否值得,取決於你的公司和網站的定位。
總結:成本與效益的衡量
對非技術人員來說,使用PageSpeed Insights的最大意義,在於大概掌握網站的技術及優化水平,例如一個只得幾分的網站、一個30分的網站,以及一個90分的網站,只需檢測一下,就知道如何分辨優劣。 如前述,網站性能高、表現優化的好處:
- 提高網站排名和流量
- 用戶滿意度和忠誠度提高
- 提高轉化率和收入
- 提升品牌形象和地位
- 節省資源
若不進行網站優化,公司將要付出無形的代價;相對於優化的成本,是否值得呢?