什么是 Page Speed?
Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以运用 Page Speed 来评价他们网页的功能,并取得有关如何改良功能的建议。
上面是Google官方引见Page Speed的功用,以及站长如何运用Page Speed进步网站功能
Page Speed 是如何任务的?
Page Speed 对网站的网络效劳器配置和前端代码执行若干测试。这些测试基于一组已知可加强网页功能的最佳理论。在网页上运转 Page Speed 的网站管理员会取得一组针对各网页的分数,以及有关如何改善网页功能的有用建议。
为什么要运用 Page Speed?
应用 Page Speed,您可以:
使您的网站更疾速;
使互联网用户一直关注您的网站;
增加您的带宽本钱和托管本钱;
改善网络!
Page Speed的装置
以火狐阅读器为例子:首先,在火狐的附件组建,下搜索装置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,显示了在那个点上已被调用了的办法的列表,依照从最大到最小延迟的顺序展现;就是这些办法从解析到第一次调用的工夫差从最大到最小的排序。
如何记载单个页面的活动和搜集完好的执行图:
启动(重启)Firefox并且封闭一切的页签;
肃清阅读器的缓存;
经过在地址栏输出 about:blank 来拜访一个空白页面以肃清一切会被记载的阅读器活动;
选择 工具 > firebug > 翻开firebug;
在Firebug窗口中,选择 Page Speed活动页签,点击下拉箭头来展现一个选项弹出菜单;
在弹出菜单中,选择完好执行视图;
点击记载活动;
拜访你想要记载的页面,事情以工夫线的方式被显示。
在任何时分, 做以下恣意事情(会中缀记载):
· 点击显示没有执行的办法 来展现还没有被执行到的办法列表;
· 点击显示延迟的办法来展现被执行了但是延迟了的办法列表(提示: 把鼠标挪动到 原型 列经过提示框的方式可以看到办法的完好定义);
· 点击保管将办法的完好调用数经过protocol buffer格式保管到文件(在window下有效)
检查绘制快照
从Page Speed 1.3(Firefox 3.5)开端,活动面板还可以展现出阅读器如何逐渐渲染一个页面的快照。当绘制快照是激活形态的,并且你开端记载活动时,Page Speed用黄色高亮显示出它曾经渲染完成的元素,以灰色显示的元素表示的是在以后窗口下没有滚动滚动条的状况下看不到的那局部元素,你可以用这些快照来协助处理逐渐渲染中发生的成绩,优化页面上元素的渲染,假如想晓得更多相关信息的话,可以检查 运用Page Speed 活动捕获和剖析阅读器绘制事情。
例如,上面的截屏显示了文字和图标元素最先被绘制,然后是表单输出域,在然后是表单的按钮:
如何记载活动和检查绘制事情:
启动(重启)Firefox并且封闭一切的页签;
肃清阅读器的缓存;
经过在地址栏输出 about:blank 来拜访一个空白页面以肃清一切会被记载的阅读器活动;
选择 工具 > firebug > 翻开firebug;
在Firebug窗口中,选择 Page Speed活动 页签,点击下拉箭头来展现一个选项弹出菜单;
在弹出菜单中,选择 绘制快照;
点击记载活动;
拜访你想要记载的页面,事情以工夫线的方式被显示,绘制快照在左边以一个别离的面板展现。
在任何时分, 想要检查后果, 点击 中止 来中缀工夫线。
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时就要启用它:
启动(重启) Firefox;
选择 工具 > firebug > 翻开firebug;
在firebug窗口中,选择 Page Speed 页签,然后点击下拉箭头展现一个选项弹出菜单;
在弹出菜单中,选择 记载延迟的JavaScript;
拜访你想要剖析的页面;
当页面完成加载后, 点击 剖析功能;
想要在另一个页面下运用记载器的话,封闭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保管文件的途径:
翻开Firebug,选择 Page Speed 页签,然后点击下拉箭头展现一个选项弹出菜单;
在弹出菜单中,选择 保管优化后的文件到,然后从预定义选项中选择一个目录,或许选择一个自定义途径来制定一个途径。
设置用户代理
Page Speed是经过页面在Firefox中载入来评判得分的,但是,为了顺应更多的阅读器行为,很多网站针对用户本身的阅读器提供了不同的内容,网络效劳器会依据阅读器发送的每个恳求中的用户代理字符串来反省收回恳求的阅读器,假如你的网站会依据用户代理来输入不同的内容,而你又想要Page Speed针对不同阅读器来给出评定,那你可以运用 设置用户代理 选项。
留意一个页面是在其他阅读器下任务,那他不一定可以在Firefox下任务,所以能够存在的状况是你运用不同的用户代理记载下的记载不一定是用户端运用同一个用户代理的阅读器所看到的后果。但是,通常状况下,这些差别只是点缀门面用的,所以 Page Speed给出的建议异样适用。
如何选择不同的用户代理:
翻开Firebug, 选择 Page Speed 页签,然后点击下拉箭头展现一个选项弹出菜单;
选择 显示一切用户代理 来看看其他的用户代理选项;
在弹出窗口菜单中,选择你想要测试的用户代理;
当页面载入完成后,点击剖析功能;
要先择其他的用户代理, 请反复第2到第4步。
留意:用户代理选项在某些页面会形成Firefox宕机. 所以我们引荐在根底使用中保存默许的设置。
Page Speed的卸载
在Firefox中,选择 工具 > 附加组件;
再呈现的窗口中选择 Page Speed 并点击 卸载;
重启Firefox。
阅读"Google网站速度优化工具-Page Speed使用手册"的人还阅读
上一篇:返回列表
下一篇:Google网站分析工具功能详解