忘记密码?

一键登录

草根吧源码论坛

Web性能优化系列(1):Web性能优化分析

查看: 47|回复: 0

Web性能优化系列(1):Web性能优化分析

[复制链接]

247

主题

552

热度

9

贡献

终身赞助ViP

Rank: 7Rank: 7Rank: 7

发表于 2015-10-24 17:23:55 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
Web性能优化系列(1):Web性能优化分析                                                                如果你的网站在1000ms内加载完成,那么会有平均一个用户停留下来。2014年,平均网页的大小是1.9MB。看下图了解更多统计信息。
草根吧 Web性能优化系列(1):Web性能优化分析  SEO优化 1435546553152
网站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的网站。通过降低页面加载的时间,很多著名公司的收入和下载量有显著的提升。比如
  • Walmart 每降低100ms的加载时间, 他们的收入就提高1%;
  • Yahoo 每降低400ms的加载时间,他们的访问量就提升9%。
  • Mozilla 将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。
网站优化的步骤
  • 设定性能预算。
  • 测试当前的性能。
  • 找出导致性能问题的地方。
  • 最后,duang,使用优化特技。
下面有几种方法可以提升你的页面性能,让我们来看看
速度指标
速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。
速度指标越低越好。
草根吧 Web性能优化系列(1):Web性能优化分析  SEO优化 1435546553162
速度指标可以通过Webpagetest来测试(由Google维护)
长话短说
Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…
例如:查看amazon在webpagetest上的测试结果
可以看看这个视频(https://www.youtube.com/watch?v=euVYHee1f1M),了解由 Patrick Meenan 讲解的关于webpagetest的更多信息(需要翻墙)。
渲染阻塞
如果你知道浏览器如何运行,那么你应该知道HTML, css, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。
草根吧 Web性能优化系列(1):Web性能优化分析  SEO优化 1435546553817
点击how a browser works了解更多浏览器工作原理(作者为Tali Garsiel 和Paul Irish).
浏览器渲染的步骤
  • 首先浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型)
  • 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  • 在将DOM和CSSOM树结合成渲染树之前,JS文件被解析和执行。
现在你知道浏览器如何进行解析了,让我们看看是哪一部分阻塞了渲染树的生成。
1. 阻塞渲染的CSS
有人认为CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用。
为了解决这个渲染阻塞,跟着下面的两个步骤做
  • 将关键CSS内嵌入页面中,即将最重要的(首次加载时可见的部分页面所使用到的)style写入head中的 <style></style>里。
  • 移除没用到的CSS。
那么我是如何找出没用到的CSS的呢。
  • 使用Pagespeed Insight去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据。例如:Flipkart的Pagespeed Insight统计结果。
  • 使用Gulp任务,如gulp-uncss或是使用Grunt 任务,如grunt-uncss。如果你不知道他们是什么,请阅读我之前的文章
##专业小贴士
  • 使用CSS Stats保证页面中完全没有未被用到的元素,唯一的样式和字体等等。
  • Pagespeed Insight Chrome 插件.
  • Tag Counter Chrome 插件.
                                注:相关网站建设技巧阅读请移步到建站教程频道。
                              

帖子地址: 

回复

举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表