如何令到網站更快更吸引?(一) | 文章 – 滙豐機滙

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一:Largest Contentful Paint 最大內容繪製吧。

科技  ·    ·  3 mins read

今年因為全球肺炎持續肆虐,令到不少的公開活動都轉戰線上播放,而Google 一年一度的 web.dev LIVE 亦不能倖免。不過,轉為線上舉辦活動並不代表內容有所失色。

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進,使得無論各類用家、企業、開發者在哪種網絡環境、使用哪種設備瀏覽也好,亦能獲得最佳的網站使用體驗。那讓我們來看看今年Google 提出的網站性能基準,Core Web Vital吧。

今年 的 Core Web Vital 有三項,包括:

  1. LCP — Largest Contentful Paint 最大內容繪製;
  2. FID — First Input Delay 首次輸入延遲;
  3. CLS — Cumulative Layout Shift 累計版面配置轉移;

Largest Contentful Paint 最大內容繪製 

LCP 是一個量度網頁載入速度的指標。相比起First contentful paint (FCP) 量度從頁面開始載入到屏幕上,呈現頁面內容任何部分的時間,LCP量度頁面載入時,主要或是最大的內容載入/繪製,並展示到網站用戶可見視野範圍的時間。快速的LCP象徵著能夠使用戶確信信該網頁頁面對他們有用

要理解甚麼是 LCP,我們可以透過在哪些狀況下,會影響網頁載入LCP 的速度:

  1. 緩慢的伺服器回應時間
  2. 阻礙網頁繪製的JavaScript 和 CSS 檔案
  3. 緩慢的資源載入時間
  4. 客戶端的網頁繪製

很多時,圖像往往是當網頁完成載入時所顯示的最大元素,亦是影響網頁載入速度的元兇。企業會傾向使用一些容量很大,但解析度較高的圖片,為求展示一些清晰、漂亮的產品照、宣傳圖像,吸引客戶的關注,或使客戶能夠更能理解產品的細節。

但其實在不少設備的Retina屏幕上,用戶都無法分辨高解析度和一般解析度的圖像,而太大容量的圖像,會阻礙網頁的載入,使得客戶的使用體驗質素下降。所以,要將圖像解析度,與網頁的載入速度作出相應的平衡,至為重要。將圖像轉為WebP 這類能夠減少檔案大小、但仍然維持和JPEG格式相同圖片品質的類型,亦能夠減少圖像檔案在網路上的傳送時間。

另外,JavaScript 、 CSS 這裡幫助網頁建構的檔案,它們的載入先後、所需時間,亦都和網頁載入的速度有關。Google 亦建議除了這些的檔案大小外,亦可以留意其放置來源的回應時間是否理想,例如放置在CDN(內容傳遞網路),就能夠利用最靠近每位網頁使用者的伺服器,更快、更可靠地將圖片、影片等檔案傳送給用家。

那什麽才能得到好的LCP分數? Google 建議網頁開發者,應該努力使得網頁在頁面開始載入的2.5秒內,完成最大內容繪製(LCP)。2.5秒-4.0秒被視為需要改進,而多過4.0秒去完成最大內容繪製則視為表現差劣。而為了確保達到滿足大多數用戶這個目標,衡量準則為在移動裝備和桌面設備上,整個網站的內容要有75百分位數能得到好的LCP分數。可以檢測實際環境和測試環境LCP的工具,有以下幾個:

Field tools

Lab tools

Ref:

https://www.youtube.com/watch?v=AQqFZ5t8uNc

https://www.chromestatus.com/feature/5666250908762112

https://web.dev/lcp/

更多資訊可以留意 ONES Publication 定期發佈的文章,亦可以聯絡我們,我們的網址是: https://ones.software 

原文: https://ones.software/blog/index.php/2020/07/12/web-dev-2020-001/

ONEs Software Limited
ONEs Software Limited