谷歌 Web 开发最佳实践手册(4.1.8):PageSpeed 规则与建议

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


以下是 PageSpeed 黄金法则:优化关键的渲染路径时需要注意什么,以及其中缘由。

消除阻塞渲染的 JavaScript 及 CSS

为了尽快达到首次渲染,你想要最小化和(有可能的)消除关键资源的数量,最小化关键字节的下载,以及优化关键路径长度。

优化 JavaScript 的使用

JavaScript 资源默认是解析阻塞的,除非标记为异步,或者通过特殊的 JavaScript 片段加载。解析器阻塞 JavaScript 迫使浏览器等待 CSSOM ,暂停 DOM 的构建,大大延迟了首次渲染时间。

推荐用异步 JavaScript 资源

异步资源不阻塞文档解析,允许浏览器避开 CSSOM 优先级执行脚本。通常,脚本设置异步,也意味着它不是首次渲染必须的 —— 考虑在初始渲染之后加载异步脚本。

延迟解析 JavaScript

任何非必须的脚本(初次渲染时与构建可见内容无关的脚本)都应该被延迟,为了最小化浏览器渲染页面的工作量。

避免耗时运行的 JavaScript

长时间运行的 JavaScript 阻塞浏览器构建 DOM,CSSOM,及渲染页面。那么,任何与初次渲染无关的初始化逻辑和功能应该延迟执行。如果很长的初始化序列需要执行,考虑分割成几个阶段,让浏览器可以间隔处理其他的事件。

 

优化 CSS 使用

CSS 是构建渲染树必须的,在页面构建初期 JavaScript 常常会阻塞 CSS 。你应该确保任何不必要的 CSS 标记为非关键资源(例如 print 或者其它的 media queries 媒体查询),关键 CSS 的数量尽可能减少,传输时间尽可能的缩小。

把 CSS 放入文档的 head 标签内

所有 CSS 资源应该尽早指定在 HTML 文档中,这样浏览器可以尽早发现 标签,尽早派发 CSS 请求。

避免使用 CSS imports

CSS import(@import)从另一个样式表引入样式。这种用法应该避免,因为它会把额外的服务器往返引入关键路径:当带有 @import 的 CSS 样式表被接收和解析完以后,引入的 CSS 资源才会被发现。

内嵌阻塞渲染的 CSS

为获得最佳性能,你也许会把关键的 CSS 直接内嵌到 HTML 文档中。这样为关键路径消除了额外的服务器往返,如果做的正确,可用于实现“一次往返”的关键路径长度,其中只有 HTML 是一个阻塞资源。

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

打赏译者

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

任选一种支付方式

收藏 评论

关于作者:涂鸦码龙

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

相关文章

可能感兴趣的话题



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