CSS性能优化:可以试一试内联CSS?
在互联网的早期,网站主要用于显示基于文本的信息。慢慢地,我们的连接速度得到了提高,用户能够相当快地下载高分辨率图像和视频。现在,网站做的不仅仅是以文本形式提供必要的信息。随着CSS和JavaScript框架、插件的很多等等,网站变得越来越复杂。在播放所有这些操作后,加载所有这些所需的所有文件可能需要一些时间。
更快的网站可以带来更好的用户体验,这可以使一个网站的成功产生巨大的变化。开发人员可以做什么来开始改进性能?开发人员可以做的一件事非常有帮助,就是内联关键CSS和异步加载非关键CSS。在这篇文章中,我们将一个个讨论这些要点,并帮助您提高网站的性能。
什么是关键 CSS?
项目中的关键 CSS 是用于设置网站以上内容样式的 CSS。以上内容是用户首先在您的网站上看到的,其中可以包括导航和其他元素。因此,尽快调整网站的样式和呈现这一部分非常重要。
有一件事,我想在这里提到,你的访问者可能使用无数的设备与不同的视口访问您的网站。因此,上述内容本身不会有太大帮助。要解决此问题,您还应考虑与基本布局和排版相关的任何 CSS 也至关重要。
现代 Web 开发实践通常建议您将关键 CSS 内联。它会被放置在您的网页,像这样:
<!doctype html>
<html>
<head>
<title>An Optimized Web Page</title>
<style type="text/css"> (Your minified critical CSS would be here) </style>
</head>
<body>
(Your markup)
</body>
</html>
为什么内联是必要的?
如果您前往 Google PageSpeed Insights 并分析您的网页之一,您可能会看到有关通过内联关键 CSS 和异步加载渲染阻止样式表来优化 CSS 交付的警告。
浏览器不会呈现网页的上述内容,除非它们已加载所有 CSS 文件。当需要加载大量文件时,这可能是一个大问题。
并非所有用户都有快速的互联网连接,等待库、CSS 和 JavaScript 加载后,他们才能实际访问他们来的内容,这会非常令人沮丧。即使快速互联网的用户在某些情况下也可能会失去连接,例如当他们通过隧道时。此时,如果您的网站已将关键 CSS 中装,并且在显示主要内容之前不加载其他文件,则他们仍然能够访问主要内容。
下图说明了常规网页和优化网页的区别。如您了解,优化版本将允许用户提前 0.5 秒访问内容。当需要加载大量额外的库时,改进将更为明显。
您应该内联关键 CSS 吗?
这取决于情况。如果您没有使用任何繁重的框架或库,并且您自己的 CSS 文件也具有小尺寸,则您可能不需要内联您的 CSS。
如果使用像 Bootstrap 这样的框架,则可能没有使用框架提供的所有功能。在这种情况下,您只需从框架的样式表中提取关键 CSS,然后异步加载实际框架。这将显著提高您的网站速度。
内联时,可以缓存样式表。HTML 通常不缓存(这样做通常不是个好主意!这意味着两者之间偶尔会有区别。更新时请记住这一点!此外,每次用户加载您的网站时,输入的 CSS 都会产生一些额外的页面权重。例如,如果网站的每一页上都有 30kB 的内联 CSS,则单个用户 10 个页面浏览量将花费用户 300kB。这听起来可能没什么大不了的,但数据在世界某些地区(以及一些3G/4G数据计划)非常昂贵。确保您计划内联的CSS对您的网页真正至关重要,并且您并不是内联所有内容。
查找关键 CSS
手动查找关键 CSS 将是一项令人生畏和枯燥的任务。幸运的是,有可用的工具可以帮助您快速完成。
使用grunt
如果你熟悉grunt构建系统,有一个插件,使这个过程更容易 - 流行的咕咕批评插件。如果您喜欢 Gulp 或使用 npm,请参阅以下部分,了解如何使用这些内容执行此过程。
首先,您需要使用以下命令安装插件:
npm install grunt-critical --save-dev
您还需要创建 。这将包含所有代码,用于为插件设置各种选项,包括视口维度以及源文件和目标文件的路径。下面是一个示例:Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
critical: {
extract: {
options: {
base: './',
width: 1024,
height: 768,
minify: true
},
src: 'path/to/initial.html',
dest: 'path/to/final.html'
}
}
});
grunt.loadNpmTasks('grunt-critical');
grunt.registerTask('default', ['critical']);
};
在我们的包装函数中,我们使用 方法指定所有配置选项。在这种情况下,我指定了一个基本目录,其中要写入源文件和目标文件。我还将 选项设置为 。这给了我插件提取的关键CSS的最终分明版本。该属性包含要操作的源文件的位置。属性包含需要保存最终输出的位置。grunt.initConfig
minify
true
src
dest
如果文件是样式表,则生成的 CSS 将保存到文件以供将来使用。但是,如果属性是标记文件(HTML、PHP 等),则 CSS 是 inlined,现有样式表被包装在 JavaScript 函数中,以便异步加载它们。还为禁用 JavaScript 的用户添加了一个块。还有其他选项可供选择。您可以访问关键文档上的选项的完整列表。dest
dest
noscript
现在,您可以通过键入控制台来运行插件:grunt
C:\path\to\project>grunt
如果您的初始文件有以下标记:
<!doctype html>
<html>
<head>
<title>The Optimizer</title>
<link rel="stylesheet" href="link/to/stylesheet">
</head>
<body>
<div>All the markup stuff</div>
</body>
</html>
现在看起来像:
<!doctype html>
<html>
<head>
<title>The Optimizer</title>
<style type="text/css">Minified Inlined CSS</style>
<script id="loadcss">
JavaScript to load styles asynchronously...
</script>
<noscript>
<link rel="stylesheet" href="link/to/stylesheet">
</noscript>
</head>
<body>
<div>All the markup stuff</div>
</body>
</html>
正如你所看到的,这个插件做你所有的工作为你。现在,如果您使用 PageSpeed 分析网页,您应该获得更好的分数。以我的情况来说,比分从86改为95。
还有其他的插件可用于G朗特,实现类似的壮举 -咕咕批评和咕咕笔的纸。但是,使用这些插件时,您必须指定从中提取关键 CSS 的样式表。
使用 npm 模块
关键是由艾迪·奥斯马尼创建的npm包,它包含了咕咕关键插件使用的功能。您可以使用 Grunt 使用它来提取和内联关键路径,或使用 JavaScript 和 npm 从网页的折叠 CSS 上方。要安装该包,您需要运行:
npm install critical --save-dev
安装包后,您需要在项目目录中创建一个 JavaScript 文件,并在中放入以下代码。
var critical = require('critical');
critical.generate({
inline: true,
base: 'initial/',
src: 'homepage.html',
dest: 'final/homepage.html',
width: 1366,
height: 768
});
您可以指定一组选项来创建优化的网页。将内联设置为将生成包含 CSS 的 HTML 页面,否则将生成 CSS 文件。和 选项设置目标视口的尺寸。还有很多其他选项,如小化内联CSS,你可以在关键的npm包的文档找到。优化网页的标记将类似于咕咕插件的输出。true
width
height
可供您使用的另一个 npm 模块是关键 css模块。此模块从提供的 URL 生成关键 CSS。生成的CSS可以使用回调函数进一步处理,因为咕咕插件基于此包。
使用Gulp
如果您更乐于使用 Gulp,Addy Osmani 建议 Gulp 用户直接使用关键 npm 模块。他在"关键GitHub"页面上为Gulp 用户提供的示例如下所示:
var critical = require('critical').stream;
// Generate & Inline Critical-path CSS
gulp.task('critical', function () {
return gulp.src('dist/*.html')
.pipe(critical({base: 'dist/', inline: true, css: ['dist/styles/components.css','dist/styles/main.css']}))
.pipe(gulp.dest('dist'));
});
关键团队还有一个示例 Gulp 项目,显示了这一点。
还有一个吞咽临界 css 插件来生成关键 CSS。但是,这一个工作通过从您的CSS中提取某些选择器类型,而不是通过检测上面折叠的元素等。
更多资源
另一个可用的工具是乔纳斯·奥尔森的"关键路径CSS"生成器。您只需输入页面 URL,然后提供要从中提取关键 CSS 的所有 CSS。单击"创建关键路径 CSS"按钮后将输出您的 CSS。
关于CSS-Tricks的文章概述了如何使用CSS预处理器来编写关键折叠CSS。此外,SitePoint 还发表了一篇关于优化关键呈现路径的优秀文章,您可以阅读该文章,以便更深入地了解该主题。
结论
您是否应该内联关键CSS取决于用户的访问模式和网站的结构。如果您的网站是一个寻呼机,并且访问者不会经常访问它,或者如果您有一个包含框架和插件的复杂网站,则内联关键 CSS 可以显著提高性能。
内联的唯一关注是,它每次访问都会增加额外的页面权重。这可以通过使用 Cookie 和仅在第一次访问期间发送关键 CSS 来缓解,同时仍以异步方式加载完整的 CSS 文件,然后进行缓存。这是有点复杂,但你得到两个最好的两个。
您是否尝试过在您自己的项目中内联 CSS?改进显著吗?你给其他开发者提什么建议吗?让我们知道在评论。