网页核心指标优化指南和实操记录

✨ 前言与总结

✨

本文记录了基于 Next.js 构建托管于 Cloudflare 的博客站的优化过程，强调了优化的重要性和注意事项。

自用全专线，小贵但效果超好
Aifun 爱翻 - 机场测评

📝 主要内容

前言

本文以基于Next.js构建托管于Cloudflare的本博客站自己作为讲解分析对象，主要目的是记录本站的优化过程，具体更详细权威的优化还请参考

Web Vitals | Articles | web.dev

衡量网站是否运行正常的基本指标

https://web.dev/articles/vitals?hl=zh-cn

提供的具体解决方案有因框架/架构/网站/个人水平的局限性，敬请谅解，如有错误还请指正

优化要分大小

同样的工作量优化10ms和1000ms是完全不一样的，过度的优化反而会影响开发上的效率

是否遵循规范

有的规范你不遵守也没啥大影响，但有的就可能直接导致几秒的延迟

一切的优化，请基于实验和实际统计数据作为最终判断标准

核心网页指标分析

实验室环境指标

WebPageTest

PageSpeed Insights

lighthouse

用户实际情况指标（根据 Chrome User Experience Report 的数据）

https://search.google.com/search-console/core-web-vitals

性能优化是发现错误和妥协的过程

发现错误

没有正确使用框架的API和功能，反而起到反作用

取舍和妥协

没有使用上的错误，那就只能在性能和功能上做出取舍和妥协

Start Performance Budgeting

If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets…

https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3

具体问题具体分析

基于Next.js和Cloudflare的网页核心指标优化实操小记

基于 CI 实现自动化提交和 PR 级别性能测试

基于 CI 实现自动化提交和 PR 级别性能测试（以在Vercel部署为例）

📖 延伸阅读

基于Next.js和Cloudflare的网页核心指标优化实操小记

使用bundle-analyzer分析并优化Next.js包大小，加快网页加载速度

🤗 总结归纳

暂无