推迟未使用的CSS，页面速度洞察力，recaptcha

Question

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

建议:推迟未使用的CSS

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

我真的很担心那个1。有什么我能做的事吗？对于我来说，Recaptcha是一个重要的组成部分，所以我不想简单地摆脱它。如有任何建议或建议，敬请谅解！

谢谢。

Answer 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。使用最适合你需要的。

了解更多关于以上折叠内容的信息：https://whatis.techtarget.com/definition/above-the-fold