网页前端设计

学习SEO也有段时间了，也发现了不少。最近发现了page speed优化工具，对于前端设计师来说也是很重要的工具，对图片方面优化很重要

接下来来介绍Page Speed

什么是 Page Speed？

Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能，并获得有关如何改进性能的建议。

Page Speed是如何工作的？

Page Speed 对网站的网络服务器配置和前端代码执行若干测试。这些测试基于一组已知可增强网页性能的最佳实践。在网页上运行 Page Speed 的网站管理员会获得一组针对各网页的分数，以及有关如何改善网页性能的有用建议。

为什么要使用 Page Speed？

• 利用 Page Speed，您可以：
• 使您的网站更快速；
• 使互联网用户始终关注您的网站；
• 减少您的带宽成本和托管成本；
• 改善网络！

Page Speed的安装

首先“下载Page Speed:PageSpeed Insights for Chrome/PageSpeed Insights for Firefox”插件进行安装（需要firebug的可在这里本地下载）。当然你也可以去ff附加组件管理器中获取附加组件搜索"firebug"

Page Speed的运行

在运行Page Speed这个工具时，它会基于页面的状况生成分析结果。为了确保最精确的分析结果，你最好在页面完全载入完成后再运行Page Speed。 否则，Page Speed无法分析那些还没有载入的资源的情况，或者你可以选择激活，当载入完成后自动运行选项 而让Page Speed在任何页面载入完成后自动进行分析。 具体可参照下文：

• 运行Firefox；
• 选择 工具 > Firebug > 打开Firebug；
• 在FireBug窗口中, 选择 Page Speed 页签。

访问你需要进行分析的页面。等到浏览器状态栏里显示完成，并且进度条消失的时候开始使用Page Speed，如果页面上因为有流媒体视频而没有显示完成信息的情况下，等到视频开始播放时就可以开始使用Page Speed了。

点击性能分析(Analyze Performance)，当页面分析完成时，Page Speed会显示 网页性能最佳实践 的列表和当前页面针对每项结果的得分， 结果是按照当前页面的重要性和优先级排列的。

接下来就可以做以下这些事情了:

• 点击打开任意规则来看可改进的建议；
• 点击任何规则的标题来看针对该规则的文档；
• 点击 资源展示当前页面引用的资源的详细列表；
• 选择导出 > 生成JSON文件 把分析结果导出成为JSON格式的文件；
• 选择导出 > 发送得分到www.showslow.com 把分析的得分传送给show slow网站，show slow是一个开源的基于web的工具，用来收集从Page Speed获得的性能参数。如果想知道更多关于发送给Show Slow的数据的信息的话，可以参考Page Speed开源项目的 minimalBeacon页面上的Beacon文档。

对于Page Speed性能得分的注解

对于每个规则，Page Speed都会给出针对性的改进建议，并且会给当前页面一个基于一些因素的算法的”分数”，当然它也会给出当前页面的一个整体性能得分。

对于每个规则得分的注解

对于每个规则，都会有两种得分： 一个100以内的数字分数；和一个绿、黄、红的颜色分数，数字分数是一种原始得分，用来标注当前页面在当前规则下的表现， 得分基于某些量化的维度，例如：DOM元素的总数、 或者下载的文件数、颜色分数是综合了数字得分和该条规则的权重，这是一个综合了潜在影响因素和实施难度的复合参数。这就意味着没有数值得分和颜色得分之间一对一的对应关系，比如，一个得分是0/100的情况转换到颜色得分是是一个黄色的颜色分值，如果该条规则的权重没有那么高的话。因此，你应该总是以颜色分数作为更权威的判断依据。

以下是颜色得分的说明：

• 高优先级（红色原点）： 这些建议意味着相对小的开发成本就能换来非常大的潜在性能提升，你应该首要关注这些条目；
• 中优先级（红色三角形）：这些建议意味着较小的产出或者比较大的实施难度，你应当次要关注这些条目；
• 状况良好的或者低优先级的（绿色勾）：如果有显示相关建议的 (显示一个+号)，那他们或许只有非常小的产出，你可以在你完成了更高优先级的建议之后再来审视这些条目。
• 仅仅只是些信息（蓝色叹号），可能是这些条目无法在当前页面应用或者在测试过程中出了些小问题。

提示：如果你测试的结果中有大量的信息的话，很可能是因为你在完全载入前就试着分析这个页面了， 这时可以点击 重新分析 来重新进行页面分析。

对于总体得分的注解

Page Speed还给出了一个总体的数字得分和颜色得分，数字得分是当前页面所有数字得分的结算结果，基于所有规则的权重（包括和蓝色的信息， 就是没有得分的条目）。颜色得分是基于绿、黄、红色结果的数量根据一定规则计算出来的。

记录活动

Page Speed 活动面板展示了所有浏览器活动的时间线，包括了网络事件和JavaScript处理，你可以根据这个面板结合Page Speed的性能分析结果和真实的计时数据进一步分析你的页面。

注意： Page Speed活动的特性和HTTPWatch不兼容，在使用它之前，要保证禁用掉HTTPWatch：在Firefox中，可以通过工具 > 附加组件，从附加组件的列表中，点击禁用HTTPWatch。

注意Page Speed 活动面板会显示浏览器所有线程的浏览器事件，那我们可以通过下面的步骤让它只记录单页面的活动。

如何记录单页面活动：

启动(重启) Firefox并关闭所有的页签。

1、清除浏览器缓存；

2、通过在地址栏输入 about:blank 来访问一个空白页面以清除所有会被记录的浏览器活动；

3、选择 工具 > firebug > 打开firebug；

4、在Firebug窗口中，选择 Page Speed活动 页签；

5、点击 记录活动；

6、访问你想要记录的页面，事件就以时间线的形式显示出来了；

7、任何时间想要查看结果的话，只需要点击 停止 让移动的时间线停止下来。

提示：你也可以使用键盘的快捷方式来停止记录: Linux和Mac OS X上用Ctrl+R，Windows上用Alt+R。鼠标移动到资源信息上可以通过信息提示的方式查看资源的绝对地址。

8、要了解展示出来的时间的更多信息请继续往下看。

Page Speed活动事件的注解

活动面板根据时间线展示浏览器事件，当前页面所需要的每个资源都会被记录。以10毫秒的频率记录事件，如果浏览器事件没有使用完整的10毫秒的话，事件会以比较淡的阴影展示，在时间线中被展示成没有颜色的区块意味着浏览器正在处理其他的过程，比如DOM和CSS的解析， Flash ActionScript过程， 绘制， 操作系统时间等等。

下面的表格详细的描述了事件类型：

网络事件

• DNS：浏览器正在执行DNS查询资源的过程
• Wait：浏览器正在等待建立和网络服务器之间的网络(TCP)连接。因为浏览器限制了连接的上限，并一直处于打开状态，如果到达了限制的上限的话，那浏览器就必须等候有一个连接关闭才能重新打开一个连接。(如果想了解更多的浏览器连接信息, 可以参考后续的跨域名并行下载。) 这个事件显示了浏览器等候其他事件结束的时间。
• Connect：浏览器和网络服务器之间正在建立网络(TCP)连接。这个事件只会出现在产生新的连接时，而不会出现在连接被重用时。
• Send：浏览器已经发送了HTTP请求，仅仅是GET类型的请求会被展示。
• Connected：浏览器正在等候网络数据传输，浏览器结束TCP连接时这个事件结束。如果资源显示了漫长的已连接状态就意味着可以通过优化来减少荷载大小以获得更好的收益，比如压缩。

本地事件

• Cache Hit：浏览器成功的在缓存中定位到资源。
• Data Available：数据可被浏览器解析。当网络服务器大量返回数据时吗，如果数据是个很大的文件时，很多这样的事件会展示在单个资源上。
• Paint：浏览器正在渲染页面上的元素。
• JS Parse：浏览器正在解析JavaScript，这个事件能够和其他事件重叠，当这种情况发生时，这个事件以子行的形式在这个资源上展示。
• JS Execute：浏览器正在执行 JavaScript，这个事件能够和其他事件重叠，当这种情况发生时，这个事件以子行的形式在这个资源上展示，如果你能看到在JS解析和JS执行之间有固定的延迟，这意味着这个资源中包含的方法可能是延时的。

收集完整的JavaScript方法执行信息

默认状态下，Page Speed活动收集浅调用图，在每个调用堆栈的地步记录了方法的进入和退出的时间，这样把监控的影响最小化，改进了时间线的精确程度。但是，你可能想要收集完整的记录了所有方法调用的执行图。那显示未被执行方法的选项就可以满足你的要求。

获取一个未被调用方法的列表，有些方法被声明(解析)但是在你中断记录之前都没有被调用。

获取一个可延迟的方法列表，有些方法在你中断记录之前被调用了，它会显示每个方法实例化的时间和初次调用的时间之间的差值，以从最大到最小的方式排列。

在Linux和Mac OS X系统下，可以把完整的方法调用树，包含了解析和声明的时间的信息以Protocol buffer的格式保存到磁盘上的文件中，那么你可以对这些调用图进行更深入的分析，可以看后续的活动面板保存文件 以获得更多的关于文件的格式和如何从中获取数据的方法的信息。

比如：下面的截图是摄于7800ms，并且展示了在那个点上没有被调用的方法的列表， 以及它们被解析的时间：

下面的截图摄于7800ms，显示了在那个点上已被调用了的方法的列表，按照从最大到最小延迟的顺序展示；就是这些方法从解析到第一次调用的时间差从最大到最小的排序。

如何记录单个页面的活动和收集完整的执行图：

1. 启动(重启)Firefox并且关闭所有的页签；
2. 清除浏览器的缓存；
3. 通过在地址栏输入 about:blank 来访问一个空白页面以清除所有会被记录的浏览器活动；
4. 选择 工具 > firebug > 打开firebug；
5. 在Firebug窗口中，选择 Page Speed活动页签，点击下拉箭头来展示一个选项弹出菜单；
6. 在弹出菜单中，选择完整执行视图；
7. 点击记录活动；
8. 访问你想要记录的页面，事件以时间线的形式被显示。

在任何时候, 做以下任意事情（会中断记录）：

• 点击显示没有执行的方法 来展示还没有被执行到的方法列表；
• 点击显示延迟的方法来展示被执行了但是延迟了的方法列表（提示： 把鼠标移动到 原型 列通过提示框的形式可以看到方法的完整定义）；
• 点击保存将方法的完整调用数通过protocol buffer格式保存到文件（在window下无效）

查看绘制快照

从Page Speed 1.3(Firefox 3.5)开始，活动面板还能够展示出浏览器如何逐步渲染一个页面的快照。当绘制快照是激活状态的，并且你开始记录活动时，Page Speed用黄色高亮显示出它已经渲染完成的元素，以灰色显示的元素表示的是在当前窗口下没有滚动滚动条的情况下看不到的那部分元素，你可以用这些快照来帮助解决逐步渲染中产生的问题，优化页面上元素的渲染，如果想知道更多相关信息的话，可以查看 使用Page Speed 活动捕捉和分析浏览器绘制事件。

例如，下面的截屏显示了文字和图标元素最先被绘制，然后是表单输入域，在然后是表单的按钮：

如何记录活动和查看绘制事件:

1. 启动(重启)Firefox并且关闭所有的页签；
2. 清除浏览器的缓存；
3. 通过在地址栏输入 about:blank 来访问一个空白页面以清除所有会被记录的浏览器活动；
4. 选择 工具 > firebug > 打开firebug；
5. 在Firebug窗口中，选择 Page Speed活动 页签，点击下拉箭头来展示一个选项弹出菜单；
6. 在弹出菜单中，选择 绘制快照；
7. 点击记录活动；
8. 访问你想要记录的页面，事件以时间线的形式被显示，绘制快照在右边以一个分离的面板展示。

在任何时候, 想要查看结果, 点击 停止 来中断时间线。

Page Speed高级选项

选择 Page Speed 页签, 点击下拉箭头展示一个选项弹出菜单, 在那里可以看到 Page Speed 的附加选项：

其中的每一项将在下面进行解释：

页面加载完成时自动运行

这个选项可以让 Page Speed 能够在页面加载完成的同时开始自动分析，只要这个选项是被激活的，Page Speed会在后续访问的每个页面中自动执行。

如何让Page Speed 在页面载入完成时自动运行：

• 打开Firefug，选择 Page Speed 页签，然后点击下拉箭头展示一个选项弹出菜单；
• 在弹出菜单中，选择 页面加载完成时自动运行；
• 访问你想要分析的页面，当页面完成加载时，Page Speed 就开始自动分析了。

记录延迟的JavaScript

这个选项用来测试延迟加载的JavaScript，它一般是默认关闭的，这个测试从Firefox的JavaScript调试器中收集 JavaScript覆盖的范围内检查当前页面中在 onload 事件触发时哪些方法被调用，哪些没有，调试器服务在单块全局内存中跟踪完整的Firefox Session的状态，这个状态不是基于每个页面的加载，也不会在页面被重载时清除，这意味着你在firefox 一次会话中第一次访问这个页面时，记录器会精确的算出的得分，但是如果你继续使用这个页面，额外的JS被载入和执行，记录器就不会后续报告精确的结果了。而且，如果多个页面引用了同一个外链JS文件的话，记录器只会报告其中第一页面的结果。

为了保证你的性能得分的精确性, 你必须在刚打开Firefox时就要启用它：

1. 启动(重启) Firefox；
2. 选择 工具 > firebug > 打开firebug；
3. 在firebug窗口中，选择 Page Speed 页签，然后点击下拉箭头展示一个选项弹出菜单；
4. 在弹出菜单中，选择 记录延迟的JavaScript；
5. 访问你想要分析的页面；
6. 当页面完成加载后, 点击 分析性能；
7. 想要在另一个页面下使用记录器的话，关闭Firefox并重启程序。

注意：这个选项会让Firefox变慢甚至会让Firefox宕机，特别是你想要用多页签浏览，建议直到你准备好使用它再激活它，并且在用完后马上禁用它。

保存优化好的文件

Page Speed会在分析页面的时候自动优化页面上引用的 JavaScript，CSS以及图片， 默认状态下， 优化好的文件会保存到如下目录：

• Linux: /tmp/page-speed-[css | javascript | images]/
• Windows: C:\Documents and Settings\username\Local Settings\Temp\page-speed-[css | javascript | images]\
• Mac OS X: /Users/username/Library/Caches/page-speed=[css | javascript | images]/

但是，你可以更改Page Speed保存文件的路径：

1. 打开Firebug，选择 Page Speed 页签，然后点击下拉箭头展示一个选项弹出菜单；
2. 在弹出菜单中，选择 保存优化后的文件到，然后从预定义选项中选择一个目录，或者选择一个自定义路径来制定一个路径。

设置用户代理

Page Speed是通过页面在Firefox中载入来评判得分的，但是，为了适应更多的浏览器行为，很多网站针对用户自身的浏览器提供了不同的内容，网络服务器会根据浏览器发送的每个请求中的用户代理字符串来检查发出请求的浏览器，如果你的网站会根据用户代理来输出不同的内容，而你又想要Page Speed针对不同浏览器来给出评定，那你可以使用 设置用户代理 选项。

注意一个页面是在其他浏览器下工作，那他不一定能够在Firefox下工作，所以可能存在的情况是你使用不同的用户代理记录下的记录不一定是用户端使用同一个用户代理的浏览器所看到的结果。但是，通常情况下，这些差异只是装点门面用的，所以 Page Speed给出的建议同样适用。

如何选择不同的用户代理：

1. 打开Firebug, 选择 Page Speed 页签，然后点击下拉箭头展示一个选项弹出菜单；
2. 选择 显示所有用户代理 来看看其他的用户代理选项；
3. 在弹出窗口菜单中，选择你想要测试的用户代理；
4. 当页面载入完成后，点击分析性能；
5. 要先择其他的用户代理, 请重复第2到第4步。

注意：用户代理选项在某些页面会造成Firefox宕机. 所以我们推荐在基础应用中保留默认的设置。

Page Speed的卸载

1. 在Firefox中，选择 工具 > 附加组件；
2. 再出现的窗口中选择 Page Speed 并点击 卸载；
3. 重启Firefox。

好了大功告成了！你也来试试吧！

---