页面性能的影响
性能非常重要,而具体反映到我们的业务场景中,可能会有如下影响:
不利于用户留存
站点页面的展现速度非常影响用户体验,很多用户会因等待的不耐而放弃站点。研究表明,47 % 的消费者希望页面能够在 2s 内打开。 移动端的页面应该在 3 秒钟内完成加载,若超过这个时间,53% 的用户会直接关闭页面。 不利于 SEO
谷歌搜索结果中,会给加载速度慢的页面一个较后的排名。 不利于产品信息分发
用户的空闲总时长是有限的,当花费更多的时间等待页面加载, 则用于消费价值信息的时间就会减少,从而信息消费量也会大幅减少。 其他等等
79% 的消费者在电商站点性能体验较差的情况下,不会再次访问这个站点。
如何优化
第一位不是具体手段,而是先收集数据收集数据之前需要了解页面从加载到呈现的步骤(越详细越好)有了数据可以很清晰的了解我们的短板如果不确定哪里是短板可以参考别家的数据结合我们的产品形态制定目标和基准根据目标“寻找”具体手段进行“优化”
如何分析
Analyzing Critical Rendering Path Performance 分析 关键 渲染 路径 性能
performance
总概念
蓝色(Loading):网络通信和HTML解析黄色(Scripting):JavaScript执行紫色(Rendering):样式计算和布局,即重排绿色(Painting):重绘灰色(other):其它事件花费的时间白色(Idle):空闲时间
关键资源分析
这么多指标,我们应该分析那个呢
1、减少网络请求
HTTP2多路复用 长链接 多资源并行请求 header压缩 body压缩 server主动推送 HTTP1 6个并发限制 雪碧图
2、提高打包速度
减少打包体积 重复依赖引用重复打包,代码压缩code split 优化首次加载 按需加载 懒加载bundle split分包 合理分包,充分利用缓存第三方依赖external 减少整体打包编译时间和体积
不适用场景需要按需引入的 npm 包, 对于按需加载的包没必要用 cdn 全量引入。cdn 引入的形式可能会造成全局污染问题,可根据项目实际情况适用。对于体积比较大且不是首屏用到的包,用 cdn 形式引入,可能会影响首屏加载速度。
nextjs/image图片解决方案
图片流量优化,通过格式自适应和分辨率自适应以达到提升站点性能并节省流量的目的;提升视觉稳定性,内置四种图片布局方式,涵盖绝大多数的图片渲染场景,避免累积布局偏移 CLS;更快的页面加载速度,支持过渡图占位+图片懒加载;可灵活处理图片资源,支持图片缩放、压缩、格式转换等能力
目标
因此,我们面向 Web 开发者提供了一套图片优化方案,核心目标包括:
降低流量成本:通过图片压缩,分辨率自适应,应用 WebP、AVIF 等高压缩率图片格式, 减小图片体积,降低站点 CDN 成本,同时也提升图片加载速度;提升图片用户体验:建立 Web 图片评估体系,支持对站点图片体验做出评估并给出优化建议, 在减小图片体积的基础上,通过懒加载、图片预占位、稳定性布局等手段提升图片加载的流畅性;降低开发成本:考虑实际图片场景,提供不同场景下图片优化的最佳实践,降低图片优化成本。
总体可归结为
图片多采用 PNG 格式,压缩率低预览图直接采用原始大小的图片,存在流量浪费且加载缓慢图片渲染抖动,加载不流畅,在完成渲染前未采用占位图过渡图片未进行懒加载
img引入方式
静态引入:代码中静态引入的图片,通常是跟随代码打包的图片, 此外也包括固定不变的远程URL; 代码中静态引入的图片,通常是跟随代码打包的图片,此外也包括固定不变的远程URL动态下发:服务端动态下发的图片,,这类 URL 相对较多且场景复杂
改造方案
引入图片优化组件,接入图片格式自适应、分辨率自适应、大小自适应 图片压缩等能力以减小图片大小,通过懒加载、过渡占位保证图片加载流畅性;
图片体积优化
主要通过图片压缩、格式自适应、分辨率自适应三种方式来减小图片体积
实现格式自适应
实现格式和分辨率自适应
发表评论