相信有做前端的童鞋很了解这款扩展,PageSpeed Insights Chrome扩展是由Google官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的插件,安装以后会附加到Developer Tools(开发者工具)中。
Google在6月19号推出了PageSpeed Insights 2.0版,下面是Google的介绍:
PageSpeed Insights:
一、安装:
应用店:https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli
Tips:我每次点击进去都不会自动弹出安装的界面,都要现在左侧搜索然后再安装。
二、使用
上面已经说过了,安装完以后就会集成到Developer Tools(开发者工具)中,可以在页面中右键审查元素或者F12键。出现下图所示:
大家可以看见左侧有一个分析按钮,打开你要测试的网页,然后点击 “分析”。
分析完以后会出现上图中的内容,左侧是建议优化的分类,右侧则是具体内容,概述中还有一个Page Speed评分供大家参考。
我们可以点击左侧的分类查看具体优化的建议。
当然这款扩展并不是纸上谈兵,它会把优化的结果给你展现出来,如上图中,大家可以看到对于图片优化它会把优化后的图片给列出来,那么我们只要把建议后的图片替换本地的即可,当然了Css、Js等也都有优化后的文件供大家参考。
这款扩展真的可以说是做苦逼前端的神器了,不用天天被质问网站打开速度怎么那么慢,是什么影响网站的访问速度,要怎么优化等等了。
- 大小: 40.8 KB
- 大小: 50.9 KB
- 大小: 63.6 KB
- 大小: 88.8 KB
- 大小: 55.5 KB
分享到:
相关推荐
Performance Scorecard是社区支持的PageSpeed Insights Chrome扩展程序的继承者,该扩展程序以前是Google在Chrome Store中提供的。 它使用与以前相同的PageSpeed Insights SDK,仅更改了一些文本和图形。 此扩展...
chrome插件,拖至扩展程序即可安装。前端分析工具,亲测可用,有中文语言。
通过Google PageSpeed Insights的实时API调用,显示所有频道的网站性能得分摘要以及所需网站的Google PageSpeed站点的导航链接。 功能列表 •实时API调用 - 该扩展通过版本2调用GoogleApis来获取得分摘要 •桌面 - ...
PageSpeed Insights是一款可以分析网页打开速度的谷歌浏览器插件,通过PageSpeed Insights插件的分析并给出相应的优化建议,网站开发人员可以找出网站速度的瓶颈所在,并相应的网站优化,带给用户更好的用户体验。
只需单击一下即可获得网页的PageSpeed Insights得分,并提高了Web开发速度。 此扩展程序可让您快速检查PageSpeed得分,如果您想更深入地了解统计信息,还可以为您提供Insights开发人员控制台的链接。 如果扩展名未...
2. UI使用的是与当前(不赞成使用的)PageSpeed Insights扩展名不同的开源代码。 3.如果您使用的是基于ARM的计算机,则这是您现在唯一的PageSpeed Insights选择。 [注:如果您发现任何错误,请在...
2. UI使用的开源代码与当前(已弃用)Pagespeed Insights扩展不同。3.如果您使用的是基于ARM的计算机,这是您目前唯一的Pagespeed Insights的选择。[注意:如果您发现任何错误,请在...
只需单击一下即可获得网页的PageSpeed Insights得分,并提高了Web开发速度。 此扩展程序可让您快速检查PageSpeed得分,并且如果您想更深入地了解统计信息,还可以为您提供Insights开发人员控制台的链接。 如果扩展名...
实时调用Google PageSpeed Insights(LightHouse)的API,以显示网站性能的摘要以及实验室数据,例如速度指数,首次有内涵涂料,首次有意义涂料,大内容涂料,互动时间和总阻止时间。 功能列表。 •实时API调用-该...
可选-得分以通过PageSpeed测试。 用于设置性能预算(默认为70)。 用法示例 基本用法 steps : - name : Running Page Speed Insights uses : jakepartusch/psi-action@v1.2 id : psi with : url : " ...
PageSpeed Insights脚本 小型脚本和配方可通过API运行PageSpeed Insights,保存结果,汇总并导出到tsv。 设置 依存关系 bash node>12 无需安装节点模块或其他任何东西 获取API密钥并设置PSI_API_KEY 参见 export ...
Page Speed 对网站的网络服务器配置和前端代码执行若干测试。这些测试基于一组已知可增强网页性能的最佳实践。在网页上运行 Page Speed 的网站管理员会获得一组针对各网页的分数,以及有关如何改善网页性能的有用...
page speed是开源 Firefox、Firebug 插件,网站管理员和网络开发人员可以使用来评估他们网页的性能,并获得有关如何改进性能的建议。
在PageSpeed Insights上获得100分该项目的目标是在PageSpeed Insights上获得100分。 该项目基于React Starter Kit( )如何建造$ npm run build # or, `npm run build -- release` 默认情况下,它以调试模式生成。 ...
泡菜延长 PageSpeed Insights 报告的保质期 :cucumber: PageSpeed Insights 是一个很棒的工具,可以快速收集常见页面性能问题的概览。 只需提供一个 URL,您就会在几秒钟内获得一份关于可操作建议和关键绩效指标的...
一个非常轻巧的扩展,有助于轻松地运行当前页面的PageSpeed Insights分析。 本身未实现任何审核功能-只需添加按钮即可快速运行Google服务。 因此,只能对公共场所执行分析。 注意:空闲时不消耗资源; 不需要特殊...
使用W3C标记验证和Google PageSpeed Insights进行初始创建和优化后,将以自适应方式提高网站的响应速度。 W3C验证 在第一次通过验证程序时,返回以下消息:“文章缺少标题。请考虑使用h2-h6元素向所有文章添加识别...
网站性能优化组合项目 如果您愿意接受(我们当然希望您接受),您的挑战是... 复制 ngrok 为您提供的公共 URL 并尝试通过 PageSpeed Insights 运行它! 轮廓、优化、测量……然后起泡、冲洗并重复。 祝你好运! 优化提
具有报告的PageSpeed Insights 使用对已部署的网站运行移动和桌面性能测试,并为您的构建过程提供整洁的报告。 安装 $ npm install psi 用法 const psi = require ( 'psi' ) ; ( async ( ) => { // Get the Page...
PSIBatch Pagespeed Insights 批量测试用法:nodejs index.js 输入文件是要测试的网站列表然后脚本将生成一个名为 -output.csv 的 csv