`
iaiai
  • 浏览: 2203897 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

网站载入速度优化之PageSpeed Insights Chrome扩展

 
阅读更多
相信有做前端的童鞋很了解这款扩展,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
分享到:
评论

相关推荐

    PageSpeed_insights

    **PageSpeed Insights** 是一款由谷歌开发的性能优化工具,主要针对前端网页的加载速度进行分析,以提升网站用户体验和搜索引擎优化(SEO)效果。它能够评估网页在移动设备和桌面设备上的性能,并提供针对性的优化...

    PerformanceScorecard:受社区支持的PageSpeed Insights Chrome扩展程序的正式版本

    Performance Scorecard是社区支持的PageSpeed Insights Chrome扩展程序的继承者,该扩展程序以前是Google在Chrome Store中提供的。 它使用与以前相同的PageSpeed Insights SDK,仅更改了一些文本和图形。 此扩展...

    Google PageSpeed Insights API扩展「Google PageSpeed Insights API Extension」-crx插件

    通过Google PageSpeed Insights的实时API调用,显示所有频道的网站性能得分摘要以及所需网站的Google PageSpeed站点的导航链接。 功能列表 •实时API调用 - 该扩展通过版本2调用GoogleApis来获取得分摘要 •桌面 - ...

    PageSpeed Insights

    PageSpeed Insights是一款可以分析网页打开速度的谷歌浏览器插件,通过PageSpeed Insights插件的分析并给出相应的优化建议,网站开发人员可以找出网站速度的瓶颈所在,并相应的网站优化,带给用户更好的用户体验。

    谷歌PageSpeed见解扩展「Google PageSpeed Insights Extension」-crx插件

    只需单击一下即可获得网页的PageSpeed Insights得分,并提高了Web开发速度。 此扩展程序可让您快速检查PageSpeed得分,如果您想更深入地了解统计信息,还可以为您提供Insights开发人员控制台的链接。 如果扩展名未...

    PageSpeed Insights(带PNaCl)「PageSpeed Insights (with PNaCl)」-crx插件

    2. UI使用的是与当前(不赞成使用的)PageSpeed Insights扩展名不同的开源代码。 3.如果您使用的是基于ARM的计算机,则这是您现在唯一的PageSpeed Insights选择。 [注:如果您发现任何错误,请在...

    PageSpeed Insights (with PNaCl)-crx插件

    2. UI使用的开源代码与当前(已弃用)Pagespeed Insights扩展不同。3.如果您使用的是基于ARM的计算机,这是您目前唯一的Pagespeed Insights的选择。[注意:如果您发现任何错误,请在...

    Google PageSpeed Insights Extension-crx插件

    只需单击一下即可获得网页的PageSpeed Insights得分,并提高了Web开发速度。 此扩展程序可让您快速检查PageSpeed得分,并且如果您想更深入地了解统计信息,还可以为您提供Insights开发人员控制台的链接。 如果扩展名...

    Google PageSpeed Insights API Extension-crx插件

    实时调用Google PageSpeed Insights(LightHouse)的API,以显示网站性能的摘要以及实验室数据,例如速度指数,首次有内涵涂料,首次有意义涂料,大内容涂料,互动时间和总阻止时间。 功能列表。 •实时API调用-该...

    psi-action:GitHub行动,利用Google的Page Speed Insights生成效果报告

    可选-得分以通过PageSpeed测试。 用于设置性能预算(默认为70)。 用法示例 基本用法 steps : - name : Running Page Speed Insights uses : jakepartusch/psi-action@v1.2 id : psi with : url : " ...

    pagespeed-insights-scripts:小型脚本和配方,可通过API运行PageSpeed Insights,保存结果,汇总并导出到tsv

    PageSpeed Insights脚本 小型脚本和配方可通过API运行PageSpeed Insights,保存结果,汇总并导出到tsv。 设置 依存关系 bash node>12 无需安装节点模块或其他任何东西 获取API密钥并设置PSI_API_KEY 参见 export ...

    对Page Speed的测试

    标签“工具”则表明可能讨论了一些用于网页性能测试和优化的工具,除了PageSpeed Insights,还可能包括GTmetrix、WebPageTest或Lighthouse等。这些工具提供了丰富的报告和建议,帮助开发者识别和解决影响页面速度的...

    page-speed插件

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

    Page Speed

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

    PSIBatch:Pagespeed Insights 批量测试

    谷歌的PageSpeed Insights(PSI)是一款强大的工具,它能分析网页性能,并提供优化建议。然而,手动测试多个网站的性能可能会非常耗时。为了解决这个问题,我们有PSIBatch,一个基于JavaScript的脚本,专用于批量...

    hit-100-pagespeed-insights:让我们尝试在PageSpeed Insights上获得100分

    在PageSpeed Insights上获得100分该项目的目标是在PageSpeed Insights上获得100分。 该项目基于React Starter Kit( )如何建造$ npm run build # or, `npm run build -- release` 默认情况下,它以调试模式生成。 ...

    pagespeed-chrome-extension

    "pagespeed-chrome-extension" 是一个专门为谷歌浏览器(Chrome)设计的扩展程序,其主要功能是分析网页性能并提供优化建议。这个扩展基于PageSpeed Insights,Google提供的一个免费工具,用于帮助开发者提升网页...

    pickle:延长 PageSpeed Insights 报告的保质期 :cucumber:

    泡菜延长 PageSpeed Insights 报告的保质期 :cucumber: PageSpeed Insights 是一个很棒的工具,可以快速收集常见页面性能问题的概览。 只需提供一个 URL,您就会在几秒钟内获得一份关于可操作建议和关键绩效指标的...

    Google PageSpeed Insights-crx插件

    一个非常轻巧的扩展,有助于轻松地运行当前页面的PageSpeed Insights分析。 本身未实现任何审核功能-只需添加按钮即可快速运行Google服务。 因此,只能对公共场所执行分析。 注意:空闲时不消耗资源; 不需要特殊...

    curso-pagespeed-insights

    "curso-pagespeed-insights" 项目显然是围绕这个主题展开,旨在教授如何通过谷歌的PageSpeed Insights工具来优化响应式网页性能。 **响应式设计** 响应式网页设计(Responsive Web Design, RWD)是一种设计方法,它...

Global site tag (gtag.js) - Google Analytics