延迟未使用的CSS,Page Speed见解,重新捕获

时间:2019-01-19 07:09:58

标签: css recaptcha pagespeed-insights

由于93%的访客使用移动设备,因此页面快速加载对我来说至关重要。为了获得建议,我使用PageSpeed Insights工具测试了我的页面。其中一项发现使我感到担忧。

建议:推迟使用未使用的CSS

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

我真的很担心那1s。我到底能做些什么? Recaptcha对我来说是重要的组成部分,所以我不想简单地摆脱它。 任何建议/建议表示赞赏!

谢谢。

1 个答案:

答案 0 :(得分:1)

处理Defer未使用的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