如何令網站更快更吸引？(一)
更新於 2023/06/02閱讀時間約 4 分鐘
淺談 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：
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
內容交付網路（CDN）是一種網路架構，旨在提高用戶訪問網站內容的速度和效能。其基本原則是將網站內容分佈在全球的伺服器節點上。當使用者訪問網站時，CDN會根據使用者的地理位置和網路狀況，自動從最近的節點傳送內容，降低數據傳輸。
根據 Amazon 研究統計指出，網頁每延遲 100 毫秒就會導致銷售額減少 1%。也就是說，過慢的網頁速度會影響你在網路上的生意。因此，本篇文章將教你如何透過 instant.page 技術讓你的網站在一分鐘內變快！
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
在現代競爭激烈的市場中，網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名，還能提供更好的用戶體驗，從而吸引更多的目標客戶。
在現代網絡世界中，網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗，還能改善搜索引擎排名和轉換率。為了優化網站速度，我們可以從以下10個面向進行改進，包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
使用者體驗的三個核心指標 Core Web Vitals：LCP、INP、CLS，以及 RAIL Model 介紹。
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
在現代數位時代，架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而，要建立一個成功的網站不僅僅是擁有吸引人的設計，還需要考慮多方面的因素，以確保網站的效能和使用者體驗達到最佳化。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
內容交付網路（CDN）是一種網路架構，旨在提高用戶訪問網站內容的速度和效能。其基本原則是將網站內容分佈在全球的伺服器節點上。當使用者訪問網站時，CDN會根據使用者的地理位置和網路狀況，自動從最近的節點傳送內容，降低數據傳輸。
根據 Amazon 研究統計指出，網頁每延遲 100 毫秒就會導致銷售額減少 1%。也就是說，過慢的網頁速度會影響你在網路上的生意。因此，本篇文章將教你如何透過 instant.page 技術讓你的網站在一分鐘內變快！
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
在現代競爭激烈的市場中，網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名，還能提供更好的用戶體驗，從而吸引更多的目標客戶。
在現代網絡世界中，網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗，還能改善搜索引擎排名和轉換率。為了優化網站速度，我們可以從以下10個面向進行改進，包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
使用者體驗的三個核心指標 Core Web Vitals：LCP、INP、CLS，以及 RAIL Model 介紹。
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
在現代數位時代，架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而，要建立一個成功的網站不僅僅是擁有吸引人的設計，還需要考慮多方面的因素，以確保網站的效能和使用者體驗達到最佳化。