一分鐘,測出網站性能

網站的編碼方式,最少在五方面影響着你是否能達成網站目標。 對一般人來說,要分辨一個網站的編碼的好壞,似乎是太難了。幸好,網上世界有免費工具,只需一個步驟,任何人都可以測試出一個網站的評分,作為評估網站編碼水平的參考。

A robot watching monitors

以下介紹的免費測試工具,原意是給網站開發員使用,以改善網站編碼的。由於它易於使用,因此,小編也介紹給大家,作為一個參考工具。

不過,在使用這工具前,必須明白這工具有其限制(下文詳述),評分不代表一切,所以測試結果只能作為大方向的評比,不應過份執着於分數。 這一項工具名為PageSpeed Insights,是由 Google 提供的工具,可以測試一個網頁在手機和桌面電腦上的用戶體驗,並提供改進建議。 它的評分高低,代表了網頁的性能和優化程度,越高越好。 稍後會介紹如何使用這工具。現在先談談高性能網站對你有什麼好處。

PageSpeed Insights測試結果
評分結果的三個部分。

評分高,有什麼好處?

在 PageSpeed Insights 取得高分的網站,代表網站的性能好、優化程度高,對企業而言,最少有五項優勢。

1. 提高網站排名和流量

讓網站更容易被搜索引擎發現和索引,從而提高網站的排名和流量。因為網站性能優化,本來就是網站的 SEO(搜索引擎優化)中的重要一環。

2. 用戶滿意度和忠誠度提高

優化後的網站,載入速度快,減少用戶的等候時間,大大降低流失率;並提高用戶的體驗和滿意度,從而增加用戶對網站和品牌的信任和忠誠。

3. 提高轉化率和收入

網站性能優化後,可以增加用戶在網站上的停留時間和互動次數,提高用戶完成目標動作的可能性,從而增加網站的轉化率和收入

4. 提升品牌形象和地位

藉着提升網站的專業度和質量,給用戶留下良好的第一印象,從而提高品牌的形象和地位。

5. 節省資源

經過優化的網站,長遠可以節省網站流量和伺服器資源,原因是網頁的大小和請求數量都減少了,讓網頁更快地加載和渲染。

如何使用PageSpeed Insights

PageSpeed Insights非常容易使用,步驟如下。

  1. 只需前往它的網址:https://pagespeed.web.dev/,輸入想要測試的網址URL,然後點擊 “Analyze” (分析)。
  2. 耐心等候工具分析網頁,可能需時幾秒至一分鐘,具體取決於頁面的複雜性和你的連線速度。
  3. 分析完成後,你將看到網頁的移動版(Mobile)和桌面版(Desktop)得分。
評分結果的三個部分
評分結果分為三部分。

怎麼看評分

在評分版面上,大致可分為三個部分。 評分結果的三個部分。

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分的網站,只需檢測一下,就知道如何分辨優劣。 如前述,網站性能高、表現優化的好處:

  1. 提高網站排名和流量
  2. 用戶滿意度和忠誠度提高
  3. 提高轉化率和收入
  4. 提升品牌形象和地位
  5. 節省資源

若不進行網站優化,公司將要付出無形的代價;相對於優化的成本,是否值得呢?

立即查詢/報價

相關文章

Web Design, 挑選網頁

網站的價值

為甚麼要做網站? 有些公司覺得人有我有,就做一個吧;卻未必深究過網站到底有甚麼用處。 網站的價值,可…

Online Marketing, SEO, Web Design, 挑選網頁

你的網站有沒有效用?

有時候,客戶會忽然氣餒,懷疑他們的網站到底有沒有效用?原因是好像沒有什麼來自網站的聲氣──即是沒有收…

Online Marketing, SEO, Web Design, 挑選網頁

傳統機構網上營銷的例子

講起「網上營銷/數碼營銷」,有些人可能覺得好深奧。 要深奧,可以講到多深奧,令人覺得那是大公司的專利…

Web Design, 挑選網頁

網頁設計貴與平,點揀?

「做一個網站要多少錢?」這是一個常見的問題。更重要的,是多少錢買的是什麼? 正如兩餸飯和五星級酒店,…

SEO, WordPress管理

SEO自學入門1

SEO(搜尋引擎優化, Search Engine Optimization)的大名,似乎已不用多作…

Web Design

Wix vs WordPress

「用Wix好,還是用WordPress好?」小編常被問到這問題。 最新發展:近年網站科技發展極快,W…

Web Design, 挑選網頁

網頁價錢包什麼、不包什麼?

網頁價錢包什麼、不包什麼? 設計和製作一個網頁的報價,到底包含了什麼、不包什麼?每家網頁公司都有不同…

WordPress管理, 挑選網頁

網站維護是做什麼的?

此文會先解釋一下網站更新的風險,然後再談談安全的更新網站做法。 有這麼多要更新? 為什麼更新網站會搞…

SEO, WordPress管理

SEO自學入門2: 如何寫好Meta Description

所謂Meta Description,就是你在Google搜尋時看到的簡介。如果你夠細心,你會發現有…

Web Design, 挑選網頁

客製化 vs 模板網站

網站是企業、組織在網上的門面,展現他們的形象,提供相關的重要資訊。當中小企決定做一個網站時,首先要決…