使用 Edge Function 生成 OG 图，构建时间缩短 90%
随着博客文章逐渐增多，静态生成压力也随之上升，例来说在日常开发会需要近 10 分钟的时间，大多是生成图片占据大多时间，建构预览图的数量是：`(语言 x 文章数量)`。延续最大程度的静态渲染是合理的选择，而针对 OG 图片渲染可以包成 Serverless Function 在需要时呼叫。
随着博客文章逐渐增多，静态生成压力也随之上升，例来说在日常开发会需要近 10 分钟的时间，大多是生成图片占据大多时间，建构预览图的数量是：`(语言 x 文章数量)`。延续最大程度的静态渲染是合理的选择，而针对 OG 图片渲染可以包成 Serverless Function 在需要时呼叫。
先前面试时面试官询问到我早期制作的一个 SPA 网站在换页后图片载入体验不太好的问题，当时我把脑袋能想的所有答案都提出来了😅，最终有答到一点边缘知识，但太少用所以回答的不是很确定，因此这次来补齐这方面浏览器提供的机制，主要介绍浏览器如何处理安排资源的加载。
图片是丰富网页内容避不可少的元素之一，大家都会在网页中添加图片，并且大多数网站中图片与影片是传输资料中最繁重的存在，了解如何改善它们是最划算的选择，如果网站效能或加载速度出现问题，第一步可以从图片或影片开始改善。让我们先从简单的例子一步一步找出潜在的问题以及如何解决，了解图片实际上有很多有趣的细节可以调整。
指标就是为了能够客观的测量网站体验而生的统计数值，本篇文章挑战用自己的方式去理解并解释所有Google 提出网页体验相关的指标，我发现没有必要一次性的记忆所有种类的指标，因此制作了一个懒人包与该文章，方便你我查询与学习。