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

本文链接：https://blog.csdn.net/ivan0609/article/details/45508365

本文介绍了如何使用Chrome浏览器的检测工具分析网页性能，并提出了针对合并JS文件、启用gzip压缩、利用浏览器缓存等优化建议，以提高网页加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

检测结果不仅列出了问题，还定位问题在哪里，可以很快入手解决对应的问题。

问题一：总共有29个可以压缩的JS文件

合并JS文件：Combine external JavaScript
There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件，可以考虑将他们压缩为尽可能少的文件。
启用gzip压缩：Enable gzip compression
Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。
浏览器缓存：Leverage browser caching
The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间，浏览器可能不会缓存。
代理缓存：Leverage proxy caching (38)　？
Resources with a "?" in the URL are not cached by most proxy caching servers:
Minimize cookie size
The average cookie size for all requests on this page is 36 B
Serve static content from a cookieless domain (35)
12.8 KB of cookies were sent with the following static resources. Serve these static resources from a domain that does not set cookies:
Specify image dimensions (10)
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、优化样式和脚本的顺序：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.