由于 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/