使用Gatsby与ReactJS的网站渲染慢 如何优化提升加载速度？

1. 优先定位性能瓶颈 #

• 打开浏览器F12开发者工具，切换到「性能」面板录制完整页面加载流程，先明确是静态资源加载耗时过长还是客户端JS执行阻塞主线程导致的渲染慢，两类问题优化方向完全不同
• 你提到的Algolia存储的图片板块建议也做耗时验证：查看网络面板中Algolia相关请求的返回时间、返回数据体积，排除大量数据返回阻塞渲染的可能

2. gatsby-config.js 必要优化配置 #

Gatsby默认配置未开启很多生产环境优化能力，你可以补充以下插件与配置：

• 配置gatsby-plugin-image + gatsby-source-algolia：哪怕图片存储在Algolia，也可以拉取图片元信息后自动生成响应式尺寸、转码为WebP/AVIF格式、开启懒加载，大幅降低图片加载体积
• 配置gatsby-plugin-minify：开启JS、CSS、HTML的生产环境压缩，减少打包后资源体积
• 配置gatsby-plugin-offline：开启静态资源本地缓存，非首次访问时不需要重新拉取JS、CSS等不变的静态资源
• 安装gatsby-plugin-webpack-bundle-analyser排查打包产物，拆分首屏不需要的超大依赖，用React.lazy做动态导入

3. Algolia相关优化逻辑 #

不需要额外使用Algolia缓存库，做以下调整即可：

• 图片列表不要一次性拉取全量数据，首屏只请求当前可视区域内的10-20条数据，滚动到页面底部时再加载下一页内容
• 如果是纯静态站点，可以在Gatsby构建阶段预拉取Algolia的基础数据存储为静态节点，首屏直接用预构建的静态数据渲染，不需要发起客户端请求

4. React 渲染层面优化 #

• 大量图片的列表项组件用React.memo包裹，避免父组件重渲染时不必要的子组件重渲染
• 图片组件的回调事件（onLoad、onError等）用useCallback包裹，减少引用变更导致的重渲染
• 移除首屏不需要的第三方统计、埋点脚本，这类脚本经常会阻塞主线程执行

内容的提问来源于stack exchange，提问作者bruce lee