谷歌 Web 开发最佳实践手册(4.1.7):优化关键渲染路径

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


为了尽快达到首次渲染,我们需要优化三个方面:

  • 关键资源数量最小化。
  • 关键字节最小化。
  • 关键路径长度最小化。

关键资源是任何可能阻塞页面初始渲染的资源。页面上这种资源越少,浏览器获取内容的工作越少,对CPU和其它资源的占用就越少。

同样,浏览器需要下载的关键字节越少,它处理内容并显示到屏幕的速度越快。减少字节数可以通过减少资源的数量(去掉它们或者把它们变成非关键资源),并且确保通过压缩和优化每个资源达到传输量最小化。

最终,关键路径的长度是所有页面的关键资源及其字节大小之间的依赖函数:一些资源下载后仅初始化一次,先前的资源已被处理,资源越大服务器往返次数越多,需要花时间下载它。

换言之,资源的数量,字节数,关键路径长度彼此依赖,但是它们并不完全相同。比如,你也许无法减少关键资源的数量,或者无法缩短关键路径长度,但是减少了关键字节数,这依旧是很重要的优化 —— 反之亦然。

优化关键渲染路径的一般步骤:

  1. 分析和描述你的关键路径:资源数量,字节,长度。
  2. 关键资源数量最小化:舍弃它们,延迟加载,标记为异步,等等。
  3. 优化剩余关键资源的加载顺序:越早下载所有的关键资源,越能缩短关键路径长度。
  4. 优化关键字节数,减少下载时间。(服务器往返次数)

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

收藏 评论

关于作者:涂鸦码龙

不高级前端攻城狮,原名金龙,不姓郭。【忙时码代码,无事乱涂鸦】http://jinlongz.lofter.com/,涂手:Alon 个人主页 · 我的文章 · 3 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部