pageload - 为什么 Google 建议在 noscript 中包装样式表链接?

标签 pageload pagespeed

刚刚在 Google 的 PageSpeed 文档中注意到了这条奇怪的建议:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

他们建议将简短的外部样式表转换为内联 <style>元素,以避免阻塞。我明白你为什么要这样做。

但是在他们的示例代码中,他们保留了指向外部样式表的链接,但他们只是将其移到底部并将其包装在 <noscript> 中。元素。他们还没有说清楚他们希望通过这个实现什么。

他们的理由是什么?

最佳答案

<style>仅包含 所有 CSS 规则的子集 获得一些初始样式(在示例中只有 .blue 规则)。您仍然需要完整的 css 文件,但它只会在页面加载后加载。如果 JS 被禁用,它可以确保始终加载。如果启用了 JS,它会被推迟到页面完全加载(否则链接标签会阻止渲染。)

The original small.css is loaded after onload of the page. The application order of CSS rules is maintained by injecting all the and elements into the document through javascript.

关于pageload - 为什么 Google 建议在 noscript 中包装样式表链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19891732/

相关文章:

php - 每次在 CodeIgniter 中加载页面时运行一个函数

performance - 优化文件缓存和HTTP2

compression - 将.css和.js文件放置在CDN上是否明智?

html - 优化 Wordpress 主题中的 CSS 交付

html - 将 CSS 放入文档头部但我没有头部?

php - 图片负载大的博客-加速页面

jquery - 使用 jQuery 在页面加载时自动单击按钮元素

asp.net - 在页面加载时将焦点设置为ASP.NET登录控件中的文本框

c# - 检查页面何时完成加载的代码

wordpress - 通过 ID 和 size 获取图像源