行銷人員也應該了解什麼是 「渲染阻塞請求」 與 「版面偏移」

前一篇 「Chrome 102 在 DevTools 中新增了 Performance Insights」 文章中,提到了「渲染阻塞請求(Render Blocking Requests)」 與 「版面偏移(Layout Shifts)」,這是比較偏技術的問題,所以大部分的商家或行銷人員,應該都沒聽過,因為坊間講行銷的文章或課程,好像很少論及這部分,但這不代表它不重要,在 MarTech 時代,行銷已需要結合大量的技術元素或工具,建議不要畏懼,因為大部分的行銷技術,也不需要行銷人員精通,了解即可。

網頁的效能,算是 SEO 極重要的排名因素,每個人都想布置文案豐富又視覺美美的頁面,但通常這樣的頁面就會造成載入時間拉長,影響效能分數表現。

這裡舉一個情境,當您的網頁使用了網路字型(web font),可是瀏覽器載入網路字型需要一點時間,因為有些中文字型甚至需要好幾 MB,所以網頁內容會先以瀏覽器的預設字型來顯示,而當網路字型下載並可以使用之後,網頁內容會再以指定的字型重新替換過(重新渲染),但由於字型的變動(不同字型有時候並不等寬,尤其是英數字),原本 10 列的文字縮成 9 列,可能就會造成網頁內容版面有變動,這就是版面遷移(Layout Shifts)。

而某些情境下,瀏覽器為了避免版面遷移(Layout Shifts)的狀況發生,甚至會先 Hold 住這個可能會發生版面遷移的區塊,直到資源到位(例如字型檔下載完成)才顯示,這種情況就叫做渲染阻塞請求(Render Blocking Requests)。

Performance Insights 的功能就是讓您能更方便找到影響網頁效能的關鍵點,例如這篇文章提到的 渲染阻塞請求(Render Blocking Requests) 與 版面偏移(Layout Shifts),以便讓你快速找到影響效能之處,思考如何因應調整。

=====================================================
行銷科技深度洞察社團 - GA4, SEO, GDS, CRM, CDP, 電商, 內容, 社群, 廣告
OpenCart 台灣技術支援 - OpenCart 網站代管、客製、維護
OpenCart 台灣電商社團 - 台灣 OpenCart 使用者交流
=====================================================