页面渲染速度优化 - 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帧!