Alim Studio

博客

发布前的Next.js性能检查清单

Lighthouse、图片、字体和最常能节省性能分数的数据获取模式。

Alim Rahman

发布日期
阅读时间
6 分钟阅读
总浏览量
0 浏览

发布前,在移动端节流模式下运行Lighthouse,而不仅仅是桌面端。许多性能回退只出现在低端设备和慢速网络上。

优先处理字体和图片:字体子集化、display swap,以及与视口匹配的图片尺寸。如果对媒体资源进行了优化,全出血英雄图仍然可以快速加载。

将首屏内容与次要数据分离。懒加载视口以下的部分,避免无故在客户端产生瀑布式请求。

在与生产环境相近的暂存环境中测量Core Web Vitals。本地的好分数不能保证CDN、缓存和远程API保持健康。

  • nextjs
  • performance
  • web-vitals