Front End - ONEs 文章

淺談 web.dev 2020 提出的網站性能基準(一)：最大內容繪製LCP

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

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

今年的 Core Web Vital 有三項，包括：

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

Largest Contentful Paint 最大內容繪製

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

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

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

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

但其實在不少設備的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.chromestatus.com/feature/5666250908762112

https://web.dev/lcp/

聯絡我們:
主頁: https://ones.software/hk/
電郵地址: hello@ones.software
電話號碼: (+852) 5538 3410
Contact us:
Homepage: https://ones.software/
Email address: hello@ones.software
Phone number: (+852) 5538 3410

在之前的文章提過，一個智能辦公室的建立，會議室／房間預約系統是基本元素，那麼有市面上林林總總的房間預約系統，怎樣選擇那些是值得投放資金購入的軟件？

如何能夠令管理者對公司資源運籌帷幄，預約系統的界面設計至為重要。假設公司有 50 間房間，一般坊間的預約系統就會把這 50 間房間的狀態、預約資料等，以列表的形式平白地列出。這樣的列表雖然能夠提供所有資訊，但是表現方式並不直觀，管理者往往要消化大量數據，容易過於疲勞，甚或看漏一些資訊，導致資源錯配等問題。

我司經過多番研究，銳意打破傳統用列表數據的形式，採用全新的界面概念去管理房間，通過自家開發的 3D 地地圖引擎，讓用戶可以直接管理房間，毋須花費時間在數百列數據中尋找所需的房間資訊。

我司經過多番研究，銳意打破傳統用列表數據的形式，於Bookings ONE採用全新的界面概念去管理房間，通過自家開發的3D地圖引擎，讓用戶可以直接管理房間，毋須花費時間在數百列數據中尋找所需的房間資訊。

簡化地圖設計

現時市面上普遍聲稱擁有地圖功能的軟件，都是利用客戶提供的圖片配合特定的軟件去製作地圖。我司認爲這些客制步驟過於耗時，亦牽涉不少人手操作，使製作這類地圖的成本大增。

爲減低企業使用 3D 地圖的成本，我司致力簡化地圖的製作步驟。我司成功研發出獨家技術，於 SVG 圖片中直接找出地圖以及房間的形狀，經過軟件處理後就能夠產生 3D 地圖。

跨平臺支援

Bookings ONE的地圖引擎硬件需求低，可在不同平台上運行，包括 iOS、Android、 Windows，以至 Smart TV，大大增加系統的應用範圍；我們的管理頁面支援手機界面，管理員可通過手機，進行大量的房間管理；

透過智能電視能夠顯示各樓層房間的狀態，例如使用狀況、房間容量等即時信息，用戶也能使用觸控式智能電視，透過地圖直接預約房間，使整體的預約過程更流暢直接；

Bookings ONE亦全面支援 IoT 儀器，通過與 IoT 儀器進行鏈接，顯示房間的即時資訊，例如溫度，濕度等。用戶能夠通過 3D 地圖，直接了解辦公室的實際環境情況。

除了以上所提到的細節外，Bookings ONE 還有更多的功能和優勢，務求提供最好的用戶體驗給企業，不論是管理層還是員工的需求都能一一滿足，從而提升公司形象和員工整體工作效率。

欲免向隅，馬上聯繫我們: hello@ones.software ／ (+852) 5538 3410，亦可到 Bookings ONE 官網了解更多：https://ones.software/hk/bookings-one/ 。

分類: Front End

如何令網站更快更吸引(一)？