如何使用NextJs优化Total Blocking Time？新手求性能优化可行步骤

一、资源加载优化 #

• 图片优化
  • 改用Next.js自带的next/image组件，它会自动处理图片压缩、格式转换（WebP/AVIF）、懒加载和响应式适配，替代原生<img>标签
  • 给背景图设置固定宽高比，通过CSS的image-set实现多格式适配，避免加载超大尺寸资源
  • 清理项目中未被引用的冗余图片，减少不必要的资源请求
• 静态资源压缩
  • 在next.config.js中开启内置压缩功能：

    module.exports = {
      compress: true,
    }
    

  • 配置服务器（如Nginx）对CSS/JS文件启用Brotli或gzip压缩，进一步缩小传输体积
• 第三方脚本优化
  • 将非核心第三方脚本（统计、广告类）标记为strategy="lazyOnload"延迟加载，示例：

    import Script from 'next/script'
    
    export default function Home() {
      return (
        <>
          <Script src="https://example.com/script.js" strategy="lazyOnload" />
        </>
      )
    }
    

  • 清理未使用的第三方依赖，用npm ls分析依赖树，删除冗余包

二、代码层面优化 #

• 组件懒加载与代码分割
  • 使用Next.js的dynamic实现组件懒加载，避免一次性加载所有页面组件：

    import dynamic from 'next/dynamic'
    
    const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
      ssr: false,
      loading: () => <p>加载中...</p>
    })
    

  • 避免在全局入口文件导入非必要组件，依托Next.js自动路由代码分割特性，按需加载页面资源
• 优先使用服务器组件
  • 将数据请求、复杂计算等逻辑放在服务器组件中执行，减少客户端JS体积和渲染压力
  • 仅在需要交互时使用客户端组件，避免把所有组件都标记为'use client'
• 分析并优化打包体积
  • 用@next/bundle-analyzer分析打包产物，定位体积过大的依赖：

    // next.config.js
    const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
    })
    module.exports = withBundleAnalyzer({})
    

  • 替换体积庞大的依赖，比如用date-fns替代moment.js，用lodash-es按需导入替代完整lodash

三、构建与部署优化 #

• 启用增量静态再生（ISR）
  • 对静态页面配置ISR，兼顾静态页面的加载速度和内容时效性：

    export async function getStaticProps() {
      const data = await fetchData()
      return {
        props: { data },
        revalidate: 60 // 每60秒重新生成页面
      }
    }
    

• 优化编译配置
  • 确保开启SWC编译器（Next.js 12+默认启用），提升构建速度和运行性能：

    module.exports = {
      swcMinify: true,
    }
    

  • 生产环境禁用不必要的Source Map，减少打包文件体积
• CDN加速静态资源
  • 在next.config.js中配置assetPrefix，将静态资源托管到CDN：

    module.exports = {
      assetPrefix: 'https://your-cdn-domain.com',
    }
    

四、Lighthouse核心指标修复 #

• 优化LCP（最大内容绘制）
  • 确保页面主内容的图片/文本优先加载，避免阻塞渲染的资源，优化服务器响应时间
  • 对关键资源启用预加载，比如主背景图：<link rel="preload" as="image" href="/hero.jpg">
• 降低FID（首次输入延迟）
  • 拆分主线程长任务为多个小任务，避免JS执行阻塞用户交互
  • 延迟加载非必要的客户端逻辑，优先处理用户可能触发的交互代码
• 消除CLS（累积布局偏移）
  • 给图片、视频等元素设置固定宽高比，避免动态加载导致布局跳动
  • 用next/image时务必指定width和height属性，或通过fill配合容器宽高控制
• 优化字体加载
  • 使用next/font加载自定义字体，自动处理预加载、子集化和缓存：

    import { Inter } from 'next/font/google'
    
    const inter = Inter({ subsets: ['latin'] })
    
    export default function Home() {
      return <main className={inter.className}>...</main>
    }
    

内容的提问来源于stack exchange，提问作者Ahmer Safi