刚接手的这独立站，是老板四年前找人做的，建完后没动过，打开速度超级慢。

进后台看了下，果然没有优化痕迹。

大量过期架构，代码臃肿，CSS和JS大量冗余，数据库调用异常。

经过两天深度优化后，手机打开速度提高到3秒，恢复正常。

1.代码拆分、摇树：利用Webpack构建工具，对自定义的JS和CSS进行了重构。通过Tree Shaking移除未被引用的代码，将非首屏关键的代码（如产品筛选逻辑、轮播库）拆分，打包成独立的chunk文件，按需加载。

2.关键路径渲染优化：使用如Critical提取出用于渲染首屏内容所必需的关键CSS，并将其内嵌到HTML的中。其余的非关键CSS则被异步加载。这确保了用户能瞬间看到可交互的页面内容。

3.延迟加载第三方JS：Google Analytics、聊天插件等非核心第三方脚本，使用defer异步加载，推迟到DOMContentLoaded之后执行。

4.设置对象缓存：在服务器上配置Redis/Memcached作为对象缓存，将数据库查询结果缓存到内存中，降低因动态内容果多、数据库查询频繁造成的渲染延迟。

5.启用Gzip/Brotli压缩：服务器端开启Brotli压缩（比Gzip效率更高），降低文本资源（HTML、CSS、JS）的传输体积。

6.启用懒加载：移除主题自带的懒加载，使用更高效的原生JS loading="lazy"属性。首屏以下的图片（如产品列表、底部内容），只有在用户滚动到其视口附近时才会开始加载，减少首次加载的请求数。

7.数据库清理：执行OPTIMIZE TABLES指令，清理过期transients，降低请求查询时间。

8.字体本地化：使用woff2格式精简了字符集，缩小谷歌FONT文件，并进行本地化，加快字体文件加载。

9.预加载关键资源：添加 ，对首屏背景图、关键CSS和Web字体进行预加载，缩短最大内容绘制LCP的时间。

网站加载速度，是谷歌搜索引擎进行收录和索引的第一权重，也是SEO优化的前提，一定要重视起来。