web性能优化之gif资源优化

最新推荐文章于 2025-04-22 18:13:09 发布

supremeJacob

最新推荐文章于 2025-04-22 18:13:09 发布

阅读量1k

点赞数 2

分类专栏：看了能直接用系列文章标签： javascript vue web android html

本文链接：https://blog.csdn.net/supremeJacob/article/details/120768196

版权

看了能直接用系列专栏收录该内容

9 篇文章

订阅专栏

博客讲述了作者通过lighthouse工具发现安卓用户页面加载慢的问题，原因是gif文件过大。遵循官方建议，作者将gif转换为webm格式以优化性能，并提供了转换工具和代码示例。尽管未达到最佳状态，但页面加载速度已有明显提升，解决了主要问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

某天做的活动页，安卓用户吐槽页面加载缓慢，lighthouse工具马上走一波，得到的性能评分如下：
在这里插入图片描述
看到下面Opportunity的那部分检测信息，发现原来是由于gif体积大的缘故拖慢了页面的加载速度，lighthouse给出的建议是将gif转换为webm（视频格式的文件，官方详细建议可以参考这里：gif官方优化建议）

这里官方优化建议会推荐使用FFmpeg工具进行gif文件转换，但是文档有些复杂而且都是英文，在网上另外再搜了一个：gif在线转换工具

参考代码

需要注意：

1、官方推荐是把视频文件放在source标签内，但是会有问题，这边直接放在video标签内
2、加个poster属性，用于展示视频没加载完时的默认封面，这里一定得加，不然在切换视频的时候，安卓手机切换瞬间会有个很大的播放图标，很影响用户体验
3、遗憾的是webm仅支持安卓手机，苹果手机播放不了(换成mp4格式也播放不了)，但这次的主要问题是在安卓手机上，那就先放着啦

	<video
        class="lamp-img"
        :src="
          'https://img.duomiyuanplay.com/image/aladdin/' + openBoxUrl + '.webm'
        "
        :poster="
          'https://img.duomiyuanplay.com/image/aladdin/' + openBoxUrl + '.jpg'
        "
        v-if="!isIos"
        preload
        autoplay
        loop
        muted
        playsinline
     ></video>