使用 Edge Function 生成 OG 圖，建構時間縮短 90%
隨著部落格文章逐漸增多，靜態生成壓力也隨之上升，舉例來說在日常開發會需要花費近 10 分鐘的時間，大多是生成圖片佔據大多時間，建構預覽圖的數量是：`(語言 x 文章數量)`。延續最大程度的靜態渲染是合理的選擇，而針對 OG 圖片渲染可以包成 Serverless Function 在需要時呼叫。
隨著部落格文章逐漸增多，靜態生成壓力也隨之上升，舉例來說在日常開發會需要花費近 10 分鐘的時間，大多是生成圖片佔據大多時間，建構預覽圖的數量是：`(語言 x 文章數量)`。延續最大程度的靜態渲染是合理的選擇，而針對 OG 圖片渲染可以包成 Serverless Function 在需要時呼叫。
先前面試時面試官詢問到我早期製作的一個 SPA 網站在換頁後圖片載入體驗不太好的問題，當時我把腦袋能想的所有答案都提出來了😅，最終有答到一點邊緣知識，但太少用所以回答的不是很確定，因此這次來補齊這方面瀏覽器提供的機制，主要介紹瀏覽器如何處理安排資源的加載。
Lighthouse 是一款開源的自動化網頁效能檢測工具，通常都是遇上網頁效能問題才一個一個開網頁開來測試效能，手動測試總是會有：單次的測驗結果不穩、耗時費力、不利於團隊開發的問題，今天來嘗試使用 Lighthouse CI 自動化的在每次代碼更動時檢測網頁的效能問題吧！
圖片是豐富網頁內容避不可少的元素之一，大家都會在網頁中添加圖片，並且大多數網站中圖片與影片是傳輸資料中最繁重的存在，了解如何改善它們是最划算的選擇，如果網站效能或加載速度出現問題，第一步可以從圖片或影片開始改善。讓我們先從簡單的例子一步一步找出潛在的問題以及如何解決，了解圖片實際上有很多有趣的細節可以調整。
指标就是为了能够客观的测量网站体验而生的统计数值，本篇文章挑战用自己的方式去理解并解释所有Google 提出网页体验相关的指标，我发现没有必要一次性的记忆所有种类的指标，因此制作了一个懒人包与该文章，方便你我查询与学习。