推迟未使用的 CSS、页面速度洞察、重新验证

Question

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

建议：推迟未使用的 CSS

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

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

谢谢。

Answer 1

我个人处理 Defer 未使用 CSS 的方法是推迟 css，并内联首屏所需的关键样式。

要推迟 CSS，这里有一种简单的方法。如何异步加载CSS

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

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

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