推迟未使用的 CSS、Page Speed 洞察、recaptcha答案

【问题标题】：Defer unused CSS, Page Speed insights, recaptcha推迟未使用的 CSS、Page Speed 洞察、recaptcha
【发布时间】：2019-06-13 08:41:56
【问题描述】：

由于 93% 的访问者使用移动设备，因此拥有一个快速加载的页面对我来说至关重要。为了获得一些建议，我使用 PageSpeed Insights 工具测试了我的页面。其中一个发现让我很担心。

建议：推迟未使用的 CSS

…v154…/styles__ltr.css(www.gstatic.com), 89 KB -> 1,05s

我真的很担心那个 1。有什么我可以做的吗？ Recaptcha 对我来说是重要的组成部分，所以我不想简单地摆脱它。任何建议/建议表示赞赏！

谢谢。

【问题讨论】：

这通常很难解决。基本上，谷歌希望你做的是只在文档顶部加载折叠上方内容所需的 CSS。其他 CSS 可以稍后加载，因为此时不需要它。问题是，如果您使用任何类型的框架或 CMS，您将很难像这样分离您的样式。在我看来，经过适当缩小的精益 CSS 足以进行优化。

【解决方案1】：

我个人处理延迟未使用的 CSS 的技巧是延迟 css，并内联折叠上方所需的关键样式。

要推迟 CSS，这是一种简单的方法。 How to load CSS Asynchronously

此方法将通过延迟 CSS 加载来满足 PSI，但如果由该 CSS 设置样式的内容是用户在加载第一次加载页面时将看到的内容，那么您不希望他们看到未设置样式的内容。

为此，您需要在标签中添加折叠上方所需的样式。您可以使用https://jonassebastianohlsson.com/criticalpathcssgenerator/ 等方便的工具提取折叠关键css。要么 https://www.sitelocity.com/critical-path-css-generator

第一个允许您指定确切的样式以从中提取关键样式，而第二个则下载该站点的所有 CSS。使用最适合您需求的那一款。

【讨论】：