css - 延迟未使用的 CSS、Page Speed 洞察、recaptcha

标签 css recaptcha pagespeed-insights

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

建议:延迟未使用的 CSS

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

我真的很担心那个 1s。有什么我可以做的吗? Recaptcha 对我来说很重要,所以我不想简单地摆脱它。 任何建议/建议表示赞赏!

谢谢。

最佳答案

我个人处理 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

关于css - 延迟未使用的 CSS、Page Speed 洞察、recaptcha,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54264884/

相关文章:

pagespeed - PageSpeed Insights 和 Lighthouse 的性能得分差异很大

javascript - 试图从我下载的包中删除 html

c# - 如何将 ReCaptcha 集成到 BlogEngine.net (ASP.net C#) 中?

php - 使用 magento 进行验证码

ReCaptcha NoCaptcha 始终显示 Firefox 的额外验证

web - 如何测量第一次油漆(FP)?

pagespeed-insights - 哪些因素会影响 "Avoids Enormous Network Payloads"消息?

javascript - Href 更改时的 Jquery 类更改?

css - 让 jQuery 插件对动态加载的 (ajax) 内容起作用

css - Highcharts 在带有 z 索引的图上显示网格