javascript - 阻塞 CSS 资源

Question

我已经阅读了大量的教程和“修复”来延迟或异步加载 CSS...3 小时后我头疼得要命了...

google 页面速度测试:您的页面有 3 个阻塞的 CSS 资源。这会导致页面呈现延迟。

我在网上阅读了 javascript 方法、jquery 方法和大量答案...感觉有点愚蠢有人可以用 lamens 解释如何在不使用内联 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">

Answer 1

我对渲染阻塞文件有一些经验。所以我分享它是希望能有所帮助，但你应该知道解决这个问题有点棘手，并不像你希望的那样直接。先问自己这三个问题:

第一:您的内容是否具有优先级？
第二:你用WordPress吗？
如果你这样做
三:确定没有安装一些干扰插件吗？

首先:用于内容优先级排序的 HTML5 语义是必不可少的，但有可能错误地使用它们。例如，像侧边栏这样的元素可能在首屏内容中可见，但不被视为首屏。你知道渲染阻塞意味着:加载页面需要一些在正确的时间不存在的东西，它应该等待。不需要的元素可能会导致这种情况。

第二:如果您使用 WordPress 并为其购买了一些主题，那么您的主题可能不是标准的。这个问题可以解决但不值得，这需要时间，你应该考虑下一个主题更新。更改主题是我认为最简单的方法，但是可以进行更正。但是如果你使用一些静态页面，尽快调用CSS文件就可以了。

三:最近我的所有 CSS 和 JavaScript 文件都遇到了这样的问题。这是由于使用了一个插件来延迟加载图像。它搞砸了一切，我将其停用并解决了问题。它延迟图像加载并获得一些优势，但延迟总页面加载以下载所有文件，缺点多于优点!仔细检查您的插件，寻找可能有影响的东西。


我仍然有一个渲染阻塞 CSS，但我正在努力解决它。我使用一个插件来合并 CSS 文件，渲染阻塞就是由此引起的。我正在尽可能多地消除插件，并在子主题中构建它们的功能以减少 CSS 文件请求，然后我可以停用此合并插件。