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

✨ 前言与总结

✨

本文以优化网页核心指标为主题，记录了作者在构建基于 Next.js 并托管于 Cloudflare 的个人博客站过程中的实际优化经验。文章从性能测试、问题分析、解决方案实施以及优化效果评估等方面详细介绍了优化的过程和方法，包括通过提高图片加载优先级、减少不必要资源的加载、使用 Next.js 的 Image 组件等措施来提升网站的核心指标。

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

📝 主要内容

前言

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

Web Vitals | Articles | web.dev

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

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

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

优化要分大小

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

是否遵循规范

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

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

问题分析

使用 PageSpeed Insights 进行性能测试并结合服务器统计数据进行分析问题

初始性能表现惨不忍睹，作为一个基本纯静态的网站，这样的速度并不合格

💡

与Google Search SEO排名相关的首要指标 为

最大内容绘制（LCP）：衡量加载性能。为了提供良好的用户体验，请努力让 LCP 发生在页面开始加载的前 2.5 秒内。

与 Next Paint 交互（INP）：衡量响应能力。为了提供良好的用户体验，努力做到INP 小于 200 毫秒。

累积布局偏移（CLS）：度量视觉稳定性。为了提供良好的用户体验，请努力使 CLS 分数小于 0.1 。

但就本站而言，没有多少交互性，所以INP不是很重要，重点就是LCP和CLS

最简单的方法：不是很重要的功能能关就关，除非占用很小

LCP图片优化

顶部选择LCP相关的审计进行查看，可以发现LCP元素是一张图片，而最大的耗时部分是加载延迟，可以看出是因为LCP元素被延迟加载了，主要原因就是这个图片在代码中是默认优先级或者低优先级的，而我们要做的也很简单就是高优先级进行加载

最简单做法就是使用 Next.js提供的Image组件，于此同时还能进行图片优化

Components: Image

Optimize Images in your Next.js Application using the built-in `next/image` Component.

https://nextjs.org/docs/app/api-reference/components/image#priority

💡

Image 的 Priority 为 True 时，将在HTML中preload该资源，从而很好的解决了发现延迟和排队延迟的问题

A step-by-step guide on how to break down LCP and identify key areas to improve.

Optimize Largest Contentful Paint | Articles | web.dev

https://web.dev/articles/optimize-lcp#how-to-optimize-each-part

进行优化后依旧存在问题

但优化过后数据还是不太好看，那问题出在哪呢？通过使用 WebPageTest 发现问题在于网站图标所用的 FontAwesome 的 CSS

CSS本身较大，阻塞了主线程，导致加载速度变慢

后续请求大型字体，争用网络带宽，影响其他资源加载

FontAwesome的优化

FontAwesome的加载是为了使用图标，但是为了小图标的显示而付出这样的代价是不合适的，我宁愿付出CLS作为其他指标提升的代价，这就是取舍

解决方案：懒加载CSS

使用 useInsertionEffect – React Hook 进行加载


// 加载 font-awesome
  useInsertionEffect(() => {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = BLOG.FONT_AWESOME
    link.id = 'font-awesome'
    document.head.appendChild(link)
    // cleanup function
    return () => {
      const linkElm = document.getElementById('font-awesome')
      if (linkElm) {
        linkElm.remove()
      }
    }
  })

更多资源请参见：
How do I defer loading of an external CSS file in Next.js 14
I need to load Katex CSS to style math equations. I don't know ahead of time exactly which pages need it (it depends on which users include math in their posts), but I do know which routes might ne...
https://stackoverflow.com/questions/78649181/how-do-i-defer-loading-of-an-external-css-file-in-next-js-14

Defer Stylesheet Loading · vercel next.js · Discussion #52685
Summary I want to improve our lighthouse score, one of the things it complains about is that I should "Avoid chaining critical requests" and it provides this link How can I fix this on Ne...
https://github.com/vercel/next.js/discussions/52685