教你根据 Google PageSpeed Insights 的优化网页速度

2018年8月9日22:29:43 发表评论 821 阅读

Google PageSpeed Insights 的优化网页速度,打开google pagespeed lnsighsm网址:   https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

 

教你根据 Google PageSpeed Insights 的优化网页速度

PageSpeed Insights 的优化网页速度

按上图输入要测试的网址后,点分析,得到以下结果。

 

PSI 目前显示的是单一网页报告。虽然“Chrome 用户体验”报告中与此网页相关的实际速度数据不够多,但 PSI 依然能够分析此网页、发掘其中的潜在优化机会并给出相应的优化建议(采用这些建议可能会提高此网页的速度)。请仔细研究以下建议。 了解详情。
此网页的速度统计信息
统计信息显示,互联网上速度为中间值的网页需要进行 4 次阻塞渲染的往返,并且需要加载大约 75 项资源 (1MB)。 PSI 预计,加载此网页需要进行 4 次阻塞渲染的往返,并且需要 113 项资源 (1MB)。所需的往返次数和字节数越少,网页速度就越快。
  • 优化建议
    清除首屏内容中阻止呈现的 JavaScript 和 CSS
    您的网页中有1个阻止呈现的脚本资源和1个阻止呈现的 CSS 资源。这会导致呈现网页的过程出现延迟。
    在以下资源加载完毕之前,网页上不会直接呈现任何首屏内容。请尝试暂缓或异步加载阻止资源,或者将这些资源的关键部分直接内嵌到 HTML 中。
    删除阻止呈现的 JavaScript:
    https://www.ipdrivers.com/…mes/begin5.2/js/jquery.min.js?ver=1.10.1
    为以下项优化 CSS 递送:
    https://www.ipdrivers.com/…ize_b7b9c6deccd90050cb27a7606c59000e.css
    优化图片
    适当地设置图片的格式并进行压缩可以节省大量的数据字节空间。
    优化以下图片可将其大小减少79.9 KiB (64%)。
    压缩 https://tpc.googlesyndication.com/daca_images/simgad/6502698421116062735 可减少79.9 KiB (64%)。
    使用浏览器缓存
    在 HTTP 标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载。
    利用浏览器缓存存储以下可缓存的资源:
    https://www.googletagmanager.com/gtag/js?id=UA-115886029-4 (15分钟)
    https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60分钟)
    https://www.google-analytics.com/analytics.js (2小时)
  • 已实施的优化建议
    启用压缩
    您已启用压缩。详细了解启用压缩。
    按优先级排列可见内容
    您已按优先级正确排列了首屏内容。详细了解按优先级排列可见内容。
    缩减 CSS
    系统已缩减 CSS 的大小。详细了解缩减 CSS 的大小。
    缩减 HTML
    系统已缩减 HTML 的大小。详细了解缩减 HTML 的大小。
    缩减 JavaScript
    系统已缩减 JavaScript 内容的大小。详细了解缩减 JavaScript 内容的大小。
    缩短服务器响应时间
    您的服务器响应迅速。详细了解服务器响应时间优化。
    避免使用着陆页重定向
    您的网页没有任何重定向。详细了解避免着陆页重定向。
  • 下载已针对此网页优化的图片、JavaScript 和 CSS 资源。

===============

通过以上分析,这个页页存在三个问题

一、清除首屏内容中阻止呈现的 JavaScript 和 CSS

这个是进一步优化js与css,做合并,或者放在尾部,以及进行异步处理。

二、优化图片

这个主要用图片处理软件进行图片的处理就行了

三、使用浏览器缓存

在 HTTP 标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载。

将Expires设为将来日期,至少为一周,最多为一年(我们倾向于设置Expires,而不设置Cache-Control: max-age,因为前者受支持的范围更为广泛)。请勿将其设为超过一年的将来日期,因为这样就违反了RFC准则。 —— 引用自Google

然后根据存在问题逐一进行优化。

扩展阅读:以下重要文章介绍如何进行网页的优化

hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: