相信有做前端的童鞋很了解这款扩展,PageSpeed Insights Chrome扩展是由Google官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的插件,安装以后会附加到Developer Tools(开发者工具)中。
Google在6月19号推出了PageSpeed Insights 2.0版,下面是Google的介绍:
[img]http://dl.iteye.com/upload/attachment/0080/8439/4f6102c9-f70a-3610-81be-7df42f10e992.jpg[/img]
PageSpeed Insights:
一、安装:
应用店:https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli
Tips:我每次点击进去都不会自动弹出安装的界面,都要现在左侧搜索然后再安装。
二、使用
上面已经说过了,安装完以后就会集成到Developer Tools(开发者工具)中,可以在页面中右键审查元素或者F12键。出现下图所示:
[img]http://dl.iteye.com/upload/attachment/0080/8442/c5637dd3-77f3-3d13-85b1-f68d9c11816e.jpg[/img]
大家可以看见左侧有一个分析按钮,打开你要测试的网页,然后点击 “分析”。
[img]http://dl.iteye.com/upload/attachment/0080/8444/00e45f85-84bf-3175-9651-461d35204b9d.jpg[/img]
分析完以后会出现上图中的内容,左侧是建议优化的分类,右侧则是具体内容,概述中还有一个Page Speed评分供大家参考。
[img]http://dl.iteye.com/upload/attachment/0080/8446/721e7646-80b5-3db2-a3d0-32db9954a7be.jpg[/img]
我们可以点击左侧的分类查看具体优化的建议。
[img]http://dl.iteye.com/upload/attachment/0080/8448/7bb17fd8-4c0f-3db7-ae31-540d66415f2a.jpg[/img]
当然这款扩展并不是纸上谈兵,它会把优化的结果给你展现出来,如上图中,大家可以看到对于图片优化它会把优化后的图片给列出来,那么我们只要把建议后的图片替换本地的即可,当然了Css、Js等也都有优化后的文件供大家参考。
这款扩展真的可以说是做苦逼前端的神器了,不用天天被质问网站打开速度怎么那么慢,是什么影响网站的访问速度,要怎么优化等等了。
网站载入速度优化之PageSpeed Insights Chrome扩展
原创
©著作权归作者所有:来自51CTO博客作者mb63e0703549da8的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:android 圆形菜单效果
下一篇:android 制作输入法
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Chrome扩展程序开发新手指南:事件监听器的应用技巧
最近我在开发Chrome浏览器插件时,遇到了一个需要脚本初始化的问题。在插件被安装后或浏览器标签页被刷新时,我需要重新初始化插件。为了实现这一点,我研究了Chrome提供的几个API接口,它们分别是chrome.runtime.onInstalled.addListener、chrome.runtime.onStartup.addListener以及chrome.tabs.onUpdated.addListener。在本文中,我将对这三个关键事件监听器进行梳理,并详细说明它们之间的区别。
chrome 扩展程序 JavaScript Chrome开发 前端 -
网站访问速度优化之pjax
pjax 是 ajax 和 pushState 的结合,它是一个 jQuery 插件。它通过 ajax 从服务器端获取 HTML 文件,在页面中用获取到
javascript ajax 前端 pjax 加载 -
利用Gtmetrix检测你的网站载入速度!
网站的载入速度会影响使用者操作网站的效率,
Web 数据 等待时间 -
Google PageSpeed Insights : 网站性能优化检测工具
Google PageSpeed Insights : 网站性能优化检测工具
网站性能优化检测工具 Google 网站