页面渲染速度优化 - Speed Index

Speed Index是衡量页面性能的指标,Speed Index代表页面内容渲染所消耗的时间,该值越低越好。

页面渲染过程-Speed Index

优化Speed Index主要从两方面入手:优化内容效率、优化关键渲染路径。

如何获取Speed Index参数,可参考网站页面性能优化检测工具

优化内容效率

web应用一个页面常常包含几十甚至数百个各种类型的资源,这些资源加起来有时可能达到数兆,且须在数百毫秒内聚集在一起,以满足用户的即时体验。

要满足这些即时体验的并非易事,优化内容效率至关重要:消除不必要的下载,使用压缩技术优化每个资源的传输编码,尽可能利用缓存消除冗余下载。

延迟加载图像

用户向下滚动时加载内容称为“延迟加载”。

此技术通常为节省带宽,如果网页顶端有一段文字,这种方式实现较为理想。

如果实现不当,延迟加载可能会降低整体性能。应使用已验证过的解决方案,确保在实施前和实施后进行性能测试。

添加图片占位符

图片占位不会提升图像加载时间,但能让用户保持耐心。

如果有一个包含大量图片的网页,占位是必须的。

占位符可以是空白或与实际图片尺寸相同的纯色块,低分辨率版本的图像也可以。

渐进式图片

渐进式图片允许图像以低分辨率近似值开始,然后,变成一幅完整清晰的图片。

图像格式不同,设置会略有不同。

压缩数据

压缩网站资源是种简单有效的方法,能节省空间减少加载时间,提高网站整体速度。

无论是经过验证的压缩算法Gzip,还是最新的压缩算法Brotli,都能很好的完成数据压缩。

加入缓存

尽可能利用缓存,根据需要在不同层面引入缓存策略,常见的缓存策略:

1.先调查并确定每个资源的最佳缓存周期。

2.在服务器端安装缓存程序。

3.加入缓存清除程序。

4.使用中间缓存,如:CDN。

优化图像

使用矢量格式,它的分辨率和尺度无关。

使用无损或有损压缩减小图像的整体大小。

优化字体

1.限制使用的字体数量,尽可能少使用变体。

2.只加载所需的字符。将Gzip压缩应用到EOT和TTF格式,默认字体不会被压缩。

3.字体是静态的且很少需要更新,通过指定重新验证令牌优化缓存策略。

Speed Index限制

使用Ajax获取数据的单页应用,因为不会刷新页面,Speed Index的分数通常被人为地夸大。

另一方面,自动轮播图会降低Speed Index分数,因为,它们在页面加载完成后不断变化。

永远不要凭空分析Web性能指标。

虽然影响Speed Index的因素很多,但像render start和document complete这样的东西仍没有过时。

随着技术的进步,用户的体验阀值被不断推高,开发人员需要与时俱进,甚至要领先最新技术趋势一两步,以满足用户体验。

关键渲染路径

页面渲染的关键路径,是指浏览器从获取html到最终呈现,中间所经历的过程。

优化关键渲染路径

优化关键渲染路径,通常是指优化html、css、javascript三者间的依赖关系。

浏览器从上往下解析html页面,遇到外部的css、javascript文件,默认会立即发出加载请求,然后等待返回,相对于解析html,这是一个漫长的过程。

优化关键渲染路径,即:只加载当前页面渲染所需的必要资源,将次要资源放在页面渲染完成后加载。

如:当前页面引用了一个common.css文件,它是全站共用的,当前页面的css占据了文件的十分之一,加载common.css占用了页面渲染时间的二分之一,那么,优化这个文件将有效缩短当前页面的渲染时间。

至于如何优化视情况而定,如:优化加载静态文件的网络、压缩文件、拆分文件、内联样式、分段放置内联样式。

js文件的优化通常将不影响页面渲染的文件标记为defer,或者async。

<script type="text/javascript" src="demo_defer.js" defer"></script>
<script type="text/javascript" src="demo_async.js" async="async"></script>

优化性能需理解浏览器在接收到HTML、CSS、JavaScript后,到将它们转换为像素,中间所经过的步骤。

优化关键渲染路径,能显著提高页面首次呈现的时间。

理解关键的呈现路径是构建性能良好应用的基础。

交互式更新过程也是一样的,只需在连续循环中完成,理想情况下每秒60帧!