内联CSS代码以优化CSS交付

提高网页加载速度的一种方法是通过内联CSS脚本而不是通过外部文件请求来优化CSS交付。当您内联CSS脚本时，基本上意味着您从CSS文件中复制代码并将其粘贴到HTML样式标签中。放置这些CSS脚本的最佳位置是在HTML头部。这能加快您的网站速度的原因是，浏览器不必先下载CSS文件来完全渲染您的页面，而是可以在操作正确时立即渲染您的页面。内联CSS脚本还使您的网页发出的HTTP请求更少。

测试您的网站

使用我们的网站速度测试工具测试您的URL，了解您网站上的CSS是如何实现的，以及您可以改进什么。

如何内联CSS脚本

复制脚本代码

将代码粘贴到页面HTML的标签之间

在CSS代码的顶部添加

标签

请务必阅读关于延迟加载CSS脚本和优化CSS交付的内容，以真正从内联CSS脚本中受益。

最小化CSS代码大小

在普通网站上找到的CSS脚本通常没有尽可能最小化。它们通常包含不必要的和重复的脚本，这些脚本对于以完全相同的方式加载网页并不是必需的。您可以使用CSS压缩工具自动删除这些不需要的CSS脚本并最小化您的CSS。该工具将自动将代码压缩到尽可能小的版本。这是您使用工具的方法：

首先备份CSS脚本

然后将它们粘贴到输入文本字段中

勾选”在每个规则后添加换行符”选项，以确保代码在压缩后仍然可读（不是必需的）

按”压缩”按钮

使用缓存的CSS文件没有好处

虽然使用内联方法肯定会更快地渲染大多数页面，但在页面速度方面也可能产生负面后果。最大的一个是无法加载缓存的.css文件。当您内联CSS脚本时，您的浏览器必须在每次访问者访问您的另一个网页时下载相同的CSS代码，而不是为此使用缓存文件。这样您就不能充分利用缓存（当您启用了浏览器缓存时，您应该这样做）。尽管如此，使用CSS内联方法的页面仍然比使用缓存CSS文件的页面加载得更快，尤其是当使用CSS脚本的关键路径方法时。