阻塞CSS资源

Question

阻塞CSS资源

javascriptjqueryhtmlcsstwitter-bootstrap

5

我已经阅读了大量教程和“修复”方法，以推迟或异步加载CSS……三个小时后，我头痛欲裂，决定去睡觉……

谷歌页面速度测试：您的页面有3个阻止CSS资源。这会导致页面渲染延迟。

我已经阅读了JavaScript方法、jQuery方法和许多网上的答案……感觉有些傻，能否有人用通俗易懂的语言解释一下如何在不使用内联CSS的情况下加载这些内容……

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

- zach newberry

你尝试过在页面加载后应用样式或进行页面速度测试吗？ - guest271314

你能具体说明一下吗？抱歉，我确实建立了我的网站www.zachnewberry.com，但我并不是一个网络管理员。我是一名屋顶工人，预算有限:P - zach newberry

如果您关心的是oogle页面速度测试，您可以在页面加载后加载css资源；也就是在DOMContentLoaded和window load事件分派之后。为什么oogle页面速度测试对您很重要？ - guest271314

我认为这会帮助谷歌提高我的页面排名。我使用Site-Analyzer，并且在所有测试中得分都超过90分，我对此感到满意。但是，谷歌的页面速度令我困扰。我的主要目标是在让有机流量和我的PPC帮助之前，让谷歌尽可能地将我排名靠前。 - zach newberry

你是否联系过*oogle，询问他们在不购买产品的情况下如何实现你的目标？css对页面有多重要？你可以在Worker或ServiceWorker中加载css，当load在window上触发时，创建一个单独的<style>元素，并将css文本附加到.textContent元素上。 - guest271314

你应该认真看一下 bootstrap.min.css 文件。阻塞渲染不总是由于不当调用引起的，有时是由于 CSS 内容引起的。这个文件可能包含数千行代码，但浏览器从来不会使用其中的所有内容。只选择你正在使用的部分并消除其余部分。 - ata

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ata · Answer 1

我有一些渲染阻塞文件的经验。所以我分享出来希望能够帮助到你，但你应该知道解决这个问题有点棘手，并不像你想象的那么简单明了。首先要问自己这三个问题：

第一：你的内容是否优先级高？
第二：你使用WordPress吗？
如果是的话
第三：你确定没有安装一些干扰插件吗？

首先，HTML5内容优先级的语义化对于优化至关重要，但是在使用时有可能出现错误。例如，侧边栏这样的元素可能在屏幕上方的内容中可见，但不被视为屏幕上方的内容。您知道渲染阻塞的意思：加载页面需要的一些东西不在正确的时间存在，因此必须等待。不需要的元素可能会导致这种情况。

其次，如果您使用WordPress并购买了一些主题，则该主题可能不是标准的。问题可以解决，但不值得，需要时间，并且您应考虑下一个主题更新。我认为更换主题是最简单的方法，但是纠正也是可能的。但如果您使用某些静态页面，请尽快调用CSS文件。

最后，我最近遇到了所有CSS和JavaScript文件的这个问题。这是由于使用插件懒加载图像引起的。它搞乱了一切，我将其停用并解决了问题。它推迟了图像加载并获得了一些优势，但推迟了总页加载以下载所有文件，缺点大于优点！查看您的插件是否会产生影响。

我仍然有一个渲染阻塞的CSS，但我正在处理它。我使用一个合并CSS文件的插件，这导致了渲染阻塞。我正在尽可能减少插件的使用，并在子主题中构建它们的功能，以减少CSS文件请求，然后可以停用此合并插件。