H5营销页面首屏加载优化实践手记：图片压缩、懒加载与资源拆分

H5营销页面首屏加载优化实践手记：图片压缩、懒加载与资源拆分

上个月帮一家做活动的客户优化 H5 营销页，反馈很直接："页面打开太慢，图半天出不来，用户等不了直接关了。"活动页是他们的转化入口，首屏慢意味着白花流量。这篇记录这次首屏加载优化的完整过程，给同样在做 H5 页面的朋友参考。

一、先定位问题：为什么首屏这么慢

打开页面前先做了个简单的体检，发现三个典型问题：

1. 页面体积过大：一张 Banner 原图直出 2MB+，整个页面首屏资源超过 6MB；
2. 同步阻塞：所有图片、脚本同步加载，首屏被"堵"在后面；
3. 无缓存策略：每次访问都重新下载全部资源。

用浏览器开发者工具的 Performance 面板测了下，移动端 4G 环境下首屏内容（LCP）耗时 4.8 秒，远超 2.5 秒的及格线。

二、图片压缩：体积先减一大半

首屏慢的第一大元凶就是图片。处理分三步：

1. 转 WebP 格式：现代浏览器对 WebP 支持已经很完善，同质量下体积比 JPEG 小 30%-50%；
2. 合理压缩质量：营销图视觉要求高，quality 调到 80 左右，肉眼几乎无差异；
3. 按展示尺寸出图：不要用 1920 宽的图去填一个 375 宽的移动端容器，按实际容器尺寸裁剪再上传。

处理后单张 Banner 从 2MB 降到 200KB 左右，页面总体积从 6MB 降到 1.5MB。

三、懒加载：非首屏资源先不加载

首屏之外的图片、组件，用懒加载处理：

<img src="banner.jpg" loading="lazy" />

loading="lazy" 让图片滚动到视口附近才开始加载，首屏只加载真正需要的内容。注意首屏主图不要加 lazy，否则反而拖慢 LCP，首屏资源用预加载（preload）优先拉取。

四、资源拆分与缓存：让二次访问"秒开"

• CSS/JS 拆分：首屏关键样式内联，非关键脚本延迟加载（defer）；
• 缓存策略：静态资源设置 Cache-Control，图片类资源缓存 7 天，JS/CSS 带版本号缓存 30 天；
• 预连接：对图片 CDN 域名加 preconnect，减少 DNS 与握手时间。

五、落地方式

这次的活动页是用乔拓云的微传单搭建的，它的后台内置了图片压缩与懒加载开关，我只需要把原图传上去、开启对应选项，就省掉了手动改代码的环节，剩下的精力都花在内容排版上。

六、复盘

优化完成后复测，移动端 LCP 从 4.8 秒降到 1.6 秒，页面跳出率明显下降。复盘三个要点：

1. 图片体积是首屏的大头，先压缩再谈其他；
2. 懒加载要"首屏预加载、非首屏后加载"，方向别搞反；
3. 缓存策略决定了老用户的二次访问速度，别忽略。

你们做 H5 页面时遇到过首屏慢的问题吗？都是怎么解决的？欢迎评论区聊聊。

以上是个人实践记录，各平台具体功能以官方实时信息为准。