h5营销页应避免堆砌gif，须从格式替换（svg/css、lottie、webp）、精准压缩（降帧率、裁尺寸、去冗余）、加载控制（懒加载、播完卸载、离屏暂停）及cdn协同（独立域名、强缓存、自动转码）四层面系统优化。
营销页里堆满 GIF，是 H5 性能掉坑的典型操作。一张没处理的 GIF 动图动辄 2–5MB，首屏塞进三五张，光传输就吃掉十几 MB 流量；加载时解码又占内存，低端安卓机直接卡顿、闪退。优化不是“少放几张”，而是从格式、加载、渲染三个层面系统降压。
优先替换为更高效的动画格式
GIF 本质低效：256 色限制、无损但压缩率差、不支持硬件加速。能不用就不用：
- 静态场景用 SVG 或 CSS 动画：比如加载指示器、按钮悬停、数据增长动效，纯代码实现，体积几 KB，零解码压力；
- 简单动态图标用 Lottie（JSON + 渲染器）：设计师用 AE 导出 JSON，前端引入轻量库（如 lottie-web），体积通常比同效果 GIF 小 70% 以上，且可缩放不失真、支持暂停/控制帧；
- 必须用动图时，转 WebP 动画（支持 Chrome/Firefox/Edge/Safari 16.4+）：WebP 动画兼容现代主流浏览器，体积比 GIF 平均小 25–30%，支持半透明和有损压缩，且解码更省内存；
- 微信公众号等旧环境兜底用 GIF，但必须严格限参：宽高 ≤ 640px、帧数 ≤ 30、颜色数 ≤ 128、去除冗余帧——用 GIMP 或 Photoshop「导出为 Web 所用格式」精细控制。
对保留的 GIF 做精准压缩与裁剪
不能全换？那就把每张 GIF 压到“够用即止”：
- 删帧不删节奏：用 ezgif.com 或 ffmpeg 工具将帧率从 30fps 降到 15–18fps，人眼几乎无感，体积直降 40%；
- 缩放再压缩：先按实际展示尺寸（如 300×200）裁切分辨率，再压缩——别传 1080p 源图然后靠 CSS 缩小；
- 禁用半透明模拟：GIF 不支持 Alpha 过渡，所谓“毛玻璃”“光晕”效果会强制转为抖动噪点，导致体积暴增、观感变差；统一设为纯色背景或改用 PNG 序列 + JS 控制；
- 用智图（zhitu.tencent.com）或 Squoosh 批量处理：开启“颜色量化+抖动抑制+去重帧”，比一键压缩工具更可控。
控制加载时机与内存生命周期
即使单张 GIF 很小，同时解码 10 张也会撑爆内存。关键在“按需激活”：
-
首屏外 GIF 全部懒加载（Lazy Load）：用
loading="lazy"原生属性，或 IntersectionObserver 监听进入视口再设置src； -
播放完自动卸载：监听
animationend或用定时器，在 GIF 播放一轮后替换成静态封面图（<img src="cover.jpg">），释放解码内存； -
避免自动循环：去掉
loop=“infinite”，默认播一次即停；需要循环的，用 JS 控制并限制最大循环次数（如 ≤ 3 次），防止后台持续解码； - 离屏时暂停播放：滚动离开可视区后，用 canvas 替换 img 并清空帧，回到视口再恢复——需封装简易 GIF 播放器逻辑。
服务端与 CDN 协同减负
前端再努力，源头不控也白搭：
- 静态资源走独立域名（如 static.yoursite.com）：避免携带主站 Cookie，减少每次请求头体积；
- 所有 GIF 加上强缓存（Cache-Control: public, max-age=31536000）：配合文件名哈希更新，用户二次访问直接读本地缓存；
-
接入支持 WebP/GIF 自适应的 CDN：如腾讯云 COS、阿里云 OSS 的图片处理能力，URL 加参数（如
?imageView2/1/format/webp）自动转码下发； - 对微信生态特别处理：公众号内 GIF 会被腾讯图床二次压缩，上传前先用其平台预览链接测试最终画质，避开摩尔纹高频区域（如渐变文字、细线条）。
