Chrome对网页性能的检测--2015-05-05总结

简介: Chrome浏览器非常强大,使用Chrome浏览器对页面性能进行检测,根据测试的结果进行优化。当然这个结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。

Chrome浏览器非常强大,使用Chrome浏览器对页面性能进行检测,根据测试的结果进行优化。当然这个结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。

1、Chrome检测工具

F12之后点击Audits然后出现了如下界面,选中重载页面开始检测按钮,然后点击Run按钮,之后就是等待结果。


2、检测结果

这个检测结果分为2类,一个是网络,一个是网页性能;

检测结果不仅列出了问题,还定位问题在哪里,可以很快入手解决对应的问题。
问题一:总共有29个可以压缩的JS文件

  1. 合并JS文件:Combine external JavaScript
  2. There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件,可以考虑将他们压缩为尽可能少的文件。

  3. 启用gzip压缩:Enable gzip compression
  4. Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。

  5. 浏览器缓存:Leverage browser caching 
  6. The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间,浏览器可能不会缓存。

  7. 代理缓存:Leverage proxy caching (38) ?
  8. Resources with a "?" in the URL are not cached by most proxy caching servers:

  9. Minimize cookie size
  10. The average cookie size for all requests on this page is 36 B

  11. Serve static content from a cookieless domain (35)
  12. 12.8 KB of cookies were sent with the following static resources. Serve these static resources from a domain that does not set cookies:

  13. Specify image dimensions (10)
  14. A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:

网页性能部分
  1. 1、优化样式和脚本的顺序:Optimize the order of styles and scripts (4)
    1. The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

  1. 2、把CSS放到head中:Put CSS in the document head (3)
  2. CSS in the document body adversely impacts rendering performance.
  3. 3、删除没用的CSS:Remove unused CSS rules (44)
    1. 44 rules (19%) of CSS not used by the current page.
  4、Use normal CSS property names instead of vendor-prefixed ones (3)





目录
相关文章
|
8天前
|
Web App开发 前端开发 JavaScript
【专栏:工具与技巧篇】网页调试工具(Chrome DevTools)的使用
【4月更文挑战第30天】Chrome DevTools是谷歌浏览器内置的网页调试利器,提供Elements(查看编辑HTML/CSS)、Console(JavaScript调试)、Sources(JS/CSS文件调试)、Network(网络请求分析)和Performance(性能瓶颈排查)等面板。通过掌握这些功能,开发者能有效优化网页性能和用户体验。本文详细介绍了各面板的使用方法,助力开发者高效工作。
|
8天前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
38 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
8天前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
25 0
|
8天前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
37 0
|
8天前
|
Web App开发 定位技术
Chrome中实现使用迅雷一次性选中并下载网页内全部链接的方法
Chrome中实现使用迅雷一次性选中并下载网页内全部链接的方法
|
8月前
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
188 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
|
9月前
|
Web App开发 JavaScript 前端开发
使用谷歌 Chrome 浏览器禁用网页 JavaScript
避免 Web 弹窗影响正常阅读
325 0
使用谷歌 Chrome 浏览器禁用网页 JavaScript
|
Web App开发 安全 内存技术
新版谷歌Chrome取消对PPAPI插件支持后,浏览器网页打开编辑保存微软Office、金山WPS文档解决方案
最近陆续看到一些大学发布公告,谷歌Chrome取消了对PPAPI插件支持,导致某些在线Office厂家产品将无法在谷歌Chrome107及以上版本运行,被迫更换360浏览器或者使用低版本Chrome浏览器苟延残喘。
296 0
新版谷歌Chrome取消对PPAPI插件支持后,浏览器网页打开编辑保存微软Office、金山WPS文档解决方案
|
Web App开发
Chrome浏览器与迅雷协同批量下载网页内全部链接的方法
本文介绍在Chrome浏览器中,通过迅雷自动批量选中网页中全部下载链接并进行下载的方法~
838 1
Chrome浏览器与迅雷协同批量下载网页内全部链接的方法
|
Web App开发
Chrome 打开网页默认全屏
Chrome 打开网页默认全屏
241 0

热门文章

最新文章