一个更快的网站可以带来更好的用户体验，这对一个网站的成功有很大的影响。开发人员如何开始进行性能改进?开发人员可以做的一件非常有帮助的事情是内联关键的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>为什么内联是必要的?
如果您浏览谷歌页面并分析您的一个web页面，您可能会看到关于通过内联关键的CSS和异步加载租户阻塞样式表来优化CSS交付的警告。
除非加载了所有的CSS文件，否则浏览器不会呈现web页面上的内容。当需要加载大量文件时，这可能是一个大问题。
并非您的所有用户都将拥有快速的Internet连接，并且在库，CSS和JavaScript加载之前才可以访问他们所访问的内容，这会非常令人沮丧。
即使是具有快速互联网连接的用户，在某些情况下（例如通过隧道时）也可能会失去连接。 此时，如果您的网站已内嵌关键CSS且在显示主要内容之前未加载其他文件，他们仍然可以访问主要内容。
下图说明了常规和优化web页面之间的区别。可以看到，优化后的版本允许用户提前0.5秒访问内容。当需要加载大量额外的库时，这种改进会更加明显。
你应该内联关键的CSS吗?
这要视情况而定。如果您没有使用任何沉重的框架或库，而且您自己的CSS文件也很小，那么您可能不需要内联您的CSS。
如果您使用的是Bootstrap这样的框架，那么您可能没有使用该框架提供的所有特性。在这种情况下，您可以从框架的样式表中提取关键的CSS并异步加载实际的框架。这将大大提高你的网站速度。
内联时，可以缓存样式表。HTML通常不被缓存(这样做通常不是一个好主意!)这意味着两者之间偶尔会有差异。在进行更新时请记住这一点!此外，内联的CSS将导致一些额外的页面重量每次用户加载您的网站。
例如，如果您的网站的每个页面上都有30kB的内联CSS，那么单个用户查看10个页面将花费用户300kB的成本。这听起来可能不是什么大事，但在世界上的一些地方，数据是昂贵的。确保你打算内联的CSS对你的网页是真正重要的，你没有内联一切。
找到关键的CSS
手动寻找关键的CSS将是一项艰巨和无聊的任务。幸运的是，有一些工具可以帮助您快速完成这项工作。
使用Grunt
如果您熟悉Grunt构建系统，有一个插件可以使这个过程变得更简单—流行的Grunt -critical插件。
首先，你需要使用以下命令安装插件:
npm install grunt-critical --save-dev
您还需要创建Gruntfile.js。这将包含为插件设置各种选项的所有代码，包括viewport维数和源文件和目标文件的路径。下面是一个例子:
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']);};在包装器函数中，我们使用grunt。方法来指定所有配置选项。在本例中，我指定了一个基本目录，其中要写入源文件和目标文件。我还将minify选项设置为true。
这给了我插件提取的关键CSS的最终缩小版本。src属性包含要操作的源文件的位置。dest属性包含需要保存最终输出的位置。
如果dest文件是一个样式表，那么生成的CSS将保存到一个文件中供将来使用。但是，如果dest属性是一个标记文件(HTML、PHP等)，那么CSS将被内联，现有的样式表将被包装在一个JavaScript函数中，以便异步加载它们。
还为禁用了JavaScript的用户添加了noscript块。还有其他的选择。您可以访问critical文档的完整选项列表。
现在，你可以通过在控制台输入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分析web页面，您应该得到更好的分数。以我为例，分数从86变为95。
还有其他的Grunt插件也可以达到类似的效果——Grunt -criticalcss和Grunt -penthose。但是，在使用这些插件时，您必须指定从中提取关键CSS的样式表。
使用npm模块
Critical是Addy Osmani创建的npm软件包，它包含grunt-critical插件使用的功能。 您可以在不使用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
});您可以指定一组选项来创建优化的web页面。将inline设置为true将生成一个内联了CSS的HTML页面，否则将生成一个CSS文件。宽度和高度选项设置目标视口的大小。
还有许多其他选项，比如缩小内联的CSS，你可以在关键的npm包的文档中找到。优化后的web页面的标记将类似于grunt插件的输出。
可供您使用的另一个npm模块是critical-css模块。该模块从提供的URL生成关键CSS。可以使用回调函数进一步处理生成的CSS，因为grunt插件基于此软件包。
使用Gulp
如果您更习惯使用Gulp，Addy Osmani建议Gulp用户直接使用Critical npm模块。他在Critical 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'));
});Critical团队还有一个Gulp示例项目，说明了这一过程的实际效果。
还有一个gulp-critical-css插件可以生成关键的CSS。但是，此方法的工作原理是从CSS中提取某些选择器类型，而不是通过检测折叠元素等。
更多的资源
另一个可用的工具是Jonas Ohlsson的关键路径CSS生成器。您所要做的就是输入您的页面URL，然后提供您想从中提取关键CSS的所有CSS。点击“创建关键路径CSS”按钮后，将输出你的CSS。
另一个可用的工具是Jonas Ohlsson 的Critical Path CSS Generator。您所要做的就是输入页面URL，然后提供要从中提取关键CSS的所有CSS。单击“创建关键路径CSS”按钮后，将输出CSS。
CSS-Tricks上的文章概述了如何使用CSS预处理器来编写关键折叠CSS。此外，SitePoint过去还发表了一篇有关优化关键渲染路径的出色文章，您可以阅读该文章以更深入地了解该主题。
结论
是否应该内联关键CSS取决于用户的访问模式和网站的结构。如果您的网站是一个寻呼机，并且访问者不想经常访问它，或者您的网站包含框架和插件，那么内联关键CSS可以显着提高性能。
内联的唯一问题是每次访问都会增加页面权重。通过使用cookie并仅在第一次访问时发送关键CSS即可缓解这种情况，同时仍然异步加载完整的CSS文件，然后对其进行缓存。这有点复杂，但是您可以兼得两全。
以上就是如何以及为什么应该内联关键的CSS的详细内容，更多请关注0133技术站其它相关文章！
