您当前的位置： 首页 > 学无止境 > seo优化 网站首页seo优化

Web性能优化系列（1）：Web性能优化分析

发布时间：2015-07-08 16:22:54编辑：雪饮阅读（）

如果你的个人博客在1000ms内加载完成，那么会有平均一个用户停留下来。2014年，平均网页的大小是1.9MB。看下图了解更多统计信息。



个人博客的核心内容需要在1000ms内呈现出来。如果失败了，用户将永远不会再访问你的个人博客。通过降低页面加载的时间，很多著名公司的收入和下载量有显著的提升。比如

• Walmart 每降低100ms的加载时间, 他们的收入就提高1%；
• Yahoo 每降低400ms的加载时间，他们的访问量就提升9%。
• Mozilla 将他们的页面速度提升了2.2秒，每年多获得了1.6亿firefox的下载量。

个人博客优化的步骤

1. 设定性能预算。
2. 测试当前的性能。
3. 找出导致性能问题的地方。
4. 最后，duang，使用优化特技。

下面有几种方法可以提升你的页面性能，让我们来看看

速度指标

速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式，并且取决于viewport的大小。请看下图（用视频帧的形式展现页面加载时间，以秒为单位）。

速度指标越低越好。



速度指标可以通过Webpagetest来测试（由Google维护）

长话短说

Webpage test 有很多特性，比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间，dom元素的数量，首字节时间等等…

例如：查看amazon在webpagetest上的测试结果。

可以看看这个视频（https://www.youtube.com/watch?v=euVYHee1f1M)，了解由 Patrick Meenan 讲解的关于webpagetest的更多信息（需要翻墙）。

渲染阻塞

如果你知道浏览器如何运行，那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道，请看下图。



点击how a browser works了解更多浏览器工作原理（作者为Tali Garsiel 和Paul Irish）.

浏览器渲染的步骤

1. 首先浏览器解析HTML标记去构造DOM树（DOM = Document Object Model 文档对象模型）
2. 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
3. 在将DOM和CSSOM树结合成渲染树之前，JS文件被解析和执行。

现在你知道浏览器如何进行解析了，让我们看看是哪一部分阻塞了渲染树的生成。

1. 阻塞渲染的CSS

有人认为CSS阻塞了渲染。在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面中被使用。

为了解决这个渲染阻塞，跟着下面的两个步骤做

1. 将关键CSS内嵌入页面中，即将最重要的（首次加载时可见的部分页面所使用到的）style写入head中的 <style></style>里。
2. 移除没用到的CSS。

那么我是如何找出没用到的CSS的呢。

1. 使用Pagespeed Insight去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的统计数据。例如：Flipkart的Pagespeed Insight统计结果。
2. 使用Gulp任务，如gulp-uncss或是使用Grunt 任务，如grunt-uncss。如果你不知道他们是什么，请阅读我之前的文章。

##专业小贴士

1. 使用CSS Stats保证页面中完全没有未被用到的元素，唯一的样式和字体等等。
2. Pagespeed Insight Chrome 插件.
3. Tag Counter Chrome 插件.

注：相关个人博客建设技巧阅读请移步到建站教程频道。