Google PageSpeed Insights - 需要修复答案

【问题标题】：Google PageSpeed Insights - need to fixGoogle PageSpeed Insights - 需要修复
【发布时间】：2015-08-07 22:56:51
【问题描述】：

我的网站似乎在手机上加载速度很慢，我已尝试使用 google PageSpeed 洞察力并尝试纠正该问题

我似乎无法理解我究竟需要使用屏幕截图更改什么

有人可以帮忙吗？

【问题讨论】：

您似乎有两个不同版本的 jQuery 加载，或者相同版本的完整和缩小副本。这是故意的吗？您的网站的初始显示是否需要所有这些脚本，或者可以在body 的end 加载一些脚本（或启用async）？
你点击了Remove render-block JavaScript这个文字吗？它链接到一个解释这一切的页面。您还可以单击文本 Optimize CSS Deliver 并了解如何解决这些问题。对于 JS，您可能必须缩小 JS 并将其从页面的头部移动到页脚（或延迟加载）。对于 CSS，您可能还必须缩小它。连接可能是您的 JS 和 CSS 的一个选项。
是的，我有 - 但是，我已将 jquery 文件放在底部，但仍然没有区别

标签： jquery html css pagespeed google-pagespeed

【解决方案1】：

让我们把它分解成两部分来处理，JS 和 CSS。

JavaScript

从 JavaScript 开始，网页需要等到它完成下载和解析 JS 文件后才能开始渲染页面。如果你像下面的例子一样将 JS 标签标记为“异步”，你让浏览器知道它不需要阻塞，直到 JS 完全下载。相反，它将立即开始呈现页面。

<script src="demo_async.js" async></script>

结帐this link了解更多信息。

CSS

Google Developers site 可以很好地了解您的 CSS 阻止页面呈现的原因。因为绘制和渲染第一个视口的布局需要一些 CSS。这个 CSS 被称为关键 CSS。尝试优先考虑关键 CSS 解析 CSS 并将其替换为仅包含页面上使用的规则的内联 CSS。这避免了初始渲染所需的任何阻塞 CSS 请求。我建议您查看Filament Group website 了解更多信息。

【讨论】：