背景:详情页面First Contentful Paint (FCP)欠佳页面比例较大,影响SEO
流程
- 通过https://pagespeed.web.dev/report?utm_source=psi&utm_medium=redirect&url=https%3A%2F%2Fwww.shenlanbao.com%2Fzhishi%2F5-133984
网页性能看板,得出,官网H5端有不少优化空间
针对性的进行代码优化
-
对项目中的nuxt.config.js中的build设置以下属性
-
执行 以下脚本,进行项目间包体积的明细
-
执行结束可以看到包体积大小和占比
以下就是针对性的进行优化
1、删除辅助插件Vconsole.js
2、删除element-ui的引入
3、删除vue-qr
看一下包体积的对比
很明显已经减少了很多无用包的体积
看一下网站测速页面的对比
删除无用依赖之前
删除之后
打包提示中部分静态资源图片太大
优化操作:压缩图片替换原来的图片
优化后(剩下三张是公司的奖项图,已压缩过但还是很大)
性能诊断跟网速也有很大关系,下图为周六上班时的评分结果