"当我年轻的时候，比现在年轻得多"，对世界的现状感到不安和充满醋意的时候，我会说"CSS是最糟糕的 "这样的话（并非如此）。半年后的今天，我长大了，更聪明了，也更容易接受了，我同意把话说得温和一些，说 "CSS是阻断渲染的"。
解除渲染阻断的CSS
这意味着浏览器在得到它认为需要的CSS之前，不能渲染任何东西，所有的CSS都被下载和解析了。渲染受阻是不好的用户体验，它还会对谷歌认为重要的FCP和LCP指标产生负面影响。
尽可能早地加载CSS是非常重要的。通常情况下，一旦HTML被下载和解析（即使是部分），就会发现CSS。但我们可以做得更好，因为我们可以通过HTML响应的HTTP2标题来发送 "提示"。这样，我们就可以告诉浏览器尽快开始加载CSS，而不必等待HTML的解析和发现。
可怕吗？不，不。我能够在我的老式廉价Dreamhost共享主机上用2行代码（如果你是个成功人士，则为3行）完成这个任务，该主机使用Apache服务器运行这个WordPress安装。下面是方法：
1.确保你的主机支持HTTP2,
2.编辑你的.htaccess,
3. ...并添加两行与此类似的内：
H2PushResource /wp-content/themes/phpied2/style.css
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1
一些细节...
确保你的主机支持HTTP2
我使用Firefox和Brave，大多数人使用Chrome或Safari。在这4个之间，有3个版本的开发者工具和瀑布。因此，让我们说的语言的法语和使用WebPageTest.org
在你的网站上运行一个测试，看一下瀑布视图。当你点击HTML文件的时候，你可以发现HTTP协议的版本。
我在这个网站上进行了测试，这是我的看法:
编辑.htaccess
.htaccess 是你网站根部的一个纯文本文件，可以调整一些Apache配置。由于我说的是Dreamhost，这里是他们的htaccess指南。
这两行
好的，那么你在.htaccess ？ 回到我运行的测试，我可以看到2个CSS文件是如何阻止渲染的:
注意蓝色条（HTML下载）有一个深蓝色部分。这就是HTML解析。紧接着，两个CSS的下载就开始了。我们要做的是把CSS下载移到左边，这样所有的渲染就会更快开始（和完成！）。
因此，你所要做的就是把这两个文件的URL添加到.htaccess ，前面加上H2PushResource 。对我来说，这意味着我的自定义主题的CSS的URL/wp-content/themes/phpied2/style.css ，以及一些WordPress的CSS东西。
当我在那里的时候，我还添加了一个JavaScript文件，它将在后面加载。为什么现在提前开始呢？所以，最终的结果是:
H2PushResource /wp-content/themes/phpied2/style.css
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1
H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1
再说一遍，JS是可选的，与解除渲染阻塞无关。
结果
这是改变前的瀑布图：
这是改变后的瀑布图：
正如你所看到的，在 "之后 "的情况下，CSS的下载不再等待HTML的解析了。因此，DOMContentLoaded、Start render、onload、FCP、LCP等一切都变得更快。所有的垂直线都提前100ms发生。对于几分钟的努力来说还不错。
这3行.htaccess 配置的结果是，HTML的HTTP标头现在包含3个预加载链接。这就是为什么浏览器在下载和解析HTML之前就知道要去获取CSS:
注意事项
我在这里描述的是一个一次性的东西，用于演示。从 "5.4.1 "你可能可以猜到，当你升级WordPress或改变主题时，你可能需要改变.htaccess 。 如果有一个插件可以自动做这个，这样你就不需要为每次更新而烦恼了，那不是很好吗？如果有的话，请告诉我，我很想设置并忘记。
我们可以做得更好
我们可以。我不能，因为共享的Dreamhost主机不允许我编辑Apache配置，除了.htaccess 。但如果你能访问服务器或虚拟主机的配置，请看这里。
基本上，除了我们在.htaccess 所做的之外，你需要做的就是添加:
H2EarlyHints on
就这样了。这将在200 OK 响应之前就发送一个带有CSS文件的103 Early Hints HTTP响应。只有在支持的浏览器中，目前基本上是Chrome v103（明白吗？ v103支持103响应），这意味着如果WP还在处理HTML响应（比如获取数据），CSS已经可以开始下载了。这是一个巨大的改进。更多信息，请查看这个Twitter主题和这个帖子。
一张图片说...
这里试图用 "图形 "来表示这三种情况:
// #1 status quo
connect ---> 200 OK header (no CSS hints) ---> HTML
---> CSS
// #2 with hints as per this blog
connect ---> 200 OK header (with CSS hints) ---> HTML
---> CSS
// #3 with hints in a 103 response
connect ---> 103 (with CSS hints) ---> 200 OK ---> HTML
---> CSS
显然，#1是最糟糕的，它一直都是这样的。
上面描述的带有CSS提示的#2是更好的。
如果CSS较小，HTML较快（例如静态的），带有103响应的#3可能与#2差不多。但如果CSS很大或HTML很慢，#3可能是一个戏剧性的胜利。当服务器还在检查数据库和处理200 OK响应的时候，浏览器已经有机会下载和解析CSS并准备好了。
现在请注意
那就拜拜了,让网络更快!
更新：同样的，但在PHP中
有些人在Twitter上想知道如何用NGINX做同样的事情。我想，同样的事情也可以在PHP中完成，而不是在.htaccess 。这在所有的服务器中都应该是可行的。
在你的WordPress主题的functions.php 中添加:
function hints() {
header("link: </wp-content/themes/phpied2/style.css>; rel=preload, </wp-includes/css/dist/block-library/style.min.css?ver=5.4.1>; rel=preload");
}
add_action('send_headers', 'hints');
这将发送相同的头信息，但使用PHP。现在，如果有对WordPress插件有经验的人想把这个变成一个插件，这样我们就不必硬编码CSS路径了，我会很高兴的。
