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

淺談 web.dev 2020 提出的網站性能基準(一):最大內容繪製LCP
Photo by Bench Accounting on Unsplash

今年因為全球肺炎持續肆虐,令到不少的公開活動都轉戰線上播放,而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/


聯絡我們:
主頁: 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

]]>

甚麼是前端開發?

(Ref:https://flatironschool.com/blog/front-end-vs-back-end-development/

如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。


Front-end 前端開發

(Ref: http://devana.rs/blog/front-end-interaction-designer/

前端包含所有用家能夠見到、繼而互動的畫面,而現今的網頁主要仍是利用HTML、CSS 和 Javascript 來建構這些畫面。

HTML相信即使不是程式員都不陌生,HTML 全名是 Hypertext Markup Language(超文件標示語言),是建立網頁的標準標示語言,簡單來說就是一個網頁的骨幹。早期的網頁,如這個有關WWW萬維網的網站(連結),主要只有文字,充其量會有一些圖像,所以畫面比較乏味,如下面的例子1a)。於是,就有CSS的誕生了。

1a) 只使用HTML的網頁 :https://codepen.io/OnesSoftware/pen/wVKvxx

CSS 於 1998年出現, 全名是 Cascading Style Sheets(層疊樣式表), 一種用來為例如HTML、XML 等這些結構化文件添加樣式的電腦語言,亦即是一個網頁的表皮/裝飾

在CSS 誕生前,要控制網頁如何顯示,就要在HTML檔案內包含顯示的資訊,例如字型的大小和顏色、背景應該是怎樣的、如何排列等等,這些都必須逐一在HTML檔案內列出。有時會因為資訊重複列出而令到網站過份冗長。CSS的出現使開發者可以將大部分這些顯示用的資訊中隔離出來,從而簡化 HTML 的檔案。這些資訊會被放在一個輔助的,用CSS語言寫的檔案中。理想來說, 現在的HTML檔案中應該只包含結構和內容的資訊,而CSS檔案中就包含樣式的資訊,以達致分工的目的。

1b) 使用了 HTML 和 CSS 的網頁: https://codepen.io/OnesSoftware/pen/rXOajM

在上面的例子1b),是將純粹使用HTML作為框架的 1a),加上 CSS 的裝飾,例如文字顏色、 邊框和背景顏色。

網頁的骨幹和表皮都有了,已經可以製作一些漂亮的靜態頁面,但如果要有一些能夠互動的部分,例如持續取得一些即時的資訊、儲存數據,甚至只是按下按鈕時彈出對話框,只用HTML和CSS的話都難以實行。 JavaScript 就正正能夠補充給予網頁「肌肉」並得以「活動」這個角色了。

1995 面世的 JavaScript 主要用作管理網頁的內容以及用戶的操作行為,而由於不同PHP、ASP的伺服器端手稿語言,不需要伺服器的支援也能夠在用戶的瀏覽器上運行,所以的確能夠減少對伺服器的負擔。

1c) 使用 HTML 、CSS 和 JavaScript 的網頁:https://codepen.io/OnesSoftware/pen/WVrwbv

在上面的例子 1c) 中,加了JavaScript 的輔助後,按下按鈕就會彈出「clicked」的對話框。

UI 與 UX 的比較

時至今日,前端的技術不斷轉變, 中間有過Flash、 Silverlight 這類 Web前端應用程式的開發解決方案曾經稱霸多年,卻因為手機平台不支援等因素而被淘汰。反而最基礎的 HTML、JavaScript、CSS不斷改進,以致如播放實時影片、繪圖、動畫等的功能都無須額外方案處理。而現在有不少 framework 和 library,如 ReactJS/Bootstrap 等等,能夠提供規格化的開發資源,使得開發的效率和水準得以大大提升。

前端開發者的主要職責,除了負責網頁的內容如何擺放,亦即所謂的 User Interface(使用者介面),也要照顧到用戶的瀏覽體驗,那就是 User EXperience(使用者體驗),這就要和專門的 UI、UX 設計師合作才得以處理得宜。前端開發者也要和後端開發者處理前後端之間的編程介面(API),使得有需要數據得以儲存、獲取和處理等等。

有興趣理解前端開發者的技術路線圖,可以看:

https://github.com/goodjack/developer-roadmap-chinese/blob/master/chinese-version/images/frontend.png

Ref:

https://zh.wikipedia.org/wiki/HTML

https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8

https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end

https://flatironschool.com/blog/front-end-vs-back-end-development/

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

ONES Publication
We share what we have learned about app and web development. Find us in ones.software. Email: hello@ones.software

聯絡我們:
主頁: 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

]]>