页面渲染速度优化Speed Index

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

页面渲染过程-Speed Index

优化Speed Index主要从两方面入手:优化内容效率、优化关键渲染路径。如何获取Speed Index参数,可以参考网站页面性能优化检测工具

优化内容效率(Optimizing Content Efficiency)

web应用程序通过输入URL就可以运行了——这是web的一个关键特性。然而,要实现这一点,常常需要获取几十个,甚至数百个各种类型的资源,这些资源加起来可能达到数兆字节,并且必须在数百毫秒内聚集在一起,以满足我们所追求的web即时体验。

要满足这些需求以实现即时web体验并非易事,因此,优化内容效率至关重要:消除不必要的下载,通过各种压缩技术优化每个资源的传输编码,并尽可能利用缓存来消除冗余下载。

延迟加载图像

在用户向下滚动时加载内容称为“延迟加载”。此技术通常为节省带宽,如果网页的顶端有段文字,利用这种方式实现是比较理想的。但如果实现不正确,延迟加载实际上可能会降低整体性能。因此,应使用经过验证的可靠解决方案,并确保在实施之前和之后进行测试性能。

添加图片占位符

占位图片不会加快图像加载时间,但可以帮助用户保持耐心。如果有一个包含大量图像的网页,占位是必须的。占位符可以是空白空间或与实际图像尺寸相同的纯色块,低分辨率版本的图像也是如此。

渐进式图片

渐进式图片允许图像以低分辨率近似值开始,然后变成一幅完整的图像。图像格式不同设置此过程会略有不同。

压缩数据

压缩网站资源是一种简单有效的方法,可以节省空间,减少加载时间并提高网站的整体速度。无论是使用经过验证的压缩算法Gzip,还是最新的压缩算法Brotli,都可以完成数据压缩。

加入缓存

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

先进行调查以确定每个资源的最佳缓存周期。

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

加入缓存清除程序。

使用中间缓存,如CDN。

优化图像

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

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

优化字体

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

只加载所需的字符。将Gzip压缩应用于EOT和TTF格式,因为默认情况下字体不会被压缩。

由于字体是静态的并且很少需要更新,因此您可以通过指定重新验证令牌来优化缓存策略。

Speed Index限制

使用Ajax获取数据单页面应用程序,Speed Index的分数通过被人为地夸大,因为不会刷新页面。另一方面,自动轮播图会降低Speed Index分数,因为它们会在页面加载完成后不断变化。

永远不要凭空分析Web性能指标。虽然Speed Index受诸多个因素的影响,但是像render start和document complete这样的东西还没有过时。随着技术的进步,用户的体验阀值被不断推高,因此,开发人员需要与时俱进,甚至要领先最新技术趋势两步,以便能够满足用户体验。

优化关键渲染路径(Critical Rendering Path)

优化关键呈现路径是指优先显示与当前用户操作相关的内容。

提供快速的web体验需要浏览器做大量的工作。但是浏览器是如何把HTML、CSS和JavaScript变成屏幕上的像素呢?这就是浏览器渲染页面时所要的工作。

优化性能就是理解浏览器在接收到HTML、CSS和JavaScript后,将它们转换为像素所需的中间步骤——这是关键的呈现路径。

通过优化关键渲染路径,可以显著提高页面首次呈现的时间。此外,理解关键的呈现路径也是构建性能良好的交互应用程序的基础。交互式更新过程是相同的,只需在连续循环中完成,理想情况下每秒60帧!