CSS优化技巧，可缩短页面加载时间（转载）

时间 2020-07-05

标签 css 优化技巧缩短页面加载时间转载栏目 CSS 繁體版

原文原文链接

当今的网络中，页面加载速度是最重要的网站指标之一。即便是毫秒也会对用户体验、产品产生巨大影响，而缓慢的页面加载会轻易的的下降转化率。您能够采用许多工具和技术来加快网站速度。在本文中，咱们将介绍可用于改善前端性能的最佳CSS优化技巧。css

1.查找性能瓶颈前端

全部优化中最重要的事情是从全面诊断开始。幸运的是，有许多CSS诊断工具能够帮助您发现任何性能瓶颈。首先，您可使用网络浏览器的DevTools检查资产加载的速度。在大多数浏览器中，您能够经过按F12按钮打开DevTools 。浏览器

例如，在Firefox DevTools中，可使用“ 网络”选项卡检查页面加载的全部CSS文件的大小和加载时间。您还能够测试使用和不使用缓存时CSS加载的速度。因为DevTools还显示了外部CSS，例如Google字体文件和从第三方CDN提取的CSS资源，所以您能够找到许多您之前都不知道的资源。缓存

Pingdom Tools和Google提供的Lighthouse是开发人员常常用来分析网站速度和前端性能的另外两个免费工具。例如，若是您运行简单的网站速度测试，则Pingdom Tools会为您提供一些有用的CSS优化技巧。网络

2.缩小和压缩CSS文件dom

大多数网站都依赖多个CSS文件。尽管在大多数状况下，模块化CSS被认为是最佳实践，可是加载全部文件可能须要一段时间。可是，这正是CSS缩小和压缩工具存在的缘由。若是您适当地使用它们，则能够大大缩短页面加载时间。前端性能

有一些在线工具，例如CSS Minify，可以让您经过将其复制粘贴为简单形式来缩小CSS文件的大小。这种类型的工具能够与较小的项目很好地配合。可是，对于带有多个CSS文件的大型项目，使用它们会变得很麻烦且耗时。在这种状况下，最好选择自动化解决方案。模块化

现在，大多数构建工具可以让您在代码库上自动执行压缩。例如，默认状况下，Webpack将全部文件做为缩小的包返回。PostCSS还具备诸如CSS Nano之类的智能插件，它们不只能够缩小文件的大小，还能够经过许多有针对性的优化来运行它。工具

3.使用Flexbox和CSS网格布局

若是在编写CSS时仍仅依靠传统的框模型，并使用边距，填充和浮点在屏幕上对齐项目，则应考虑采用更现代的布局模块，即flexbox和CSS Grid。这些新模型使您能够用更少的代码来实现复杂的布局。

使用较旧的技术，您甚至须要进行许多技巧和调整，即便是比较简单的事情，例如将项目垂直居中。可是，flexbox和CSS Grid并不是如此。尽管拾取新的布局模块可能要花费一些时间，但仍是值得的，由于CSS文件要小得多。flexbox尤为如此，到目前为止，flexbox具备至关不错的浏览器支持（目前全球支持 98.3％）。

尽管浏览器对CSS Grid的支持还不够完善（目前占全球的92.03％），但若是没必要支持旧版浏览器或愿意提供后备功能，则仍然可使用它。

4.使用<link>标记代替@import规则**

您可使用两种主要技术来使网页加载CSS文件：

使用<link>标记将它们添加到HTML页面的<head>部分，

使用*@import *CSS规则从其余样式表导入它们。

您须要将@import规则添加到主CSS文件的顶部。在大多数状况下，它用于加载较小的资源，例如字体和其余设计元素。最初，这彷佛是一个不错的解决方案，可是，与HTML页面使用<link>标记直接加载样式表相比，浏览器加载额外的样式表所花的时间要长得多。

当您在HTML页面中添加多个CSS文件时，请务必注意CSS特殊性。首先添加最通用的样式表，而后再选择更具体的样式表。您须要这样作，由于之后添加的样式表会覆盖之前的CSS文件的规则。例如，如下示例以正确的顺序添加CSS文件时：

<link rel="stylesheet" href="main.css"><link rel="stylesheet" href="page.css"><link rel="stylesheet" href="component.css">

5.使用渐变和SVG代替图像

将全部图像加载到网页上可能要花费大量时间。开发人员使用许多图像优化技术来减轻这种影响，例如从外部CDN加载图像或使用诸如TinyJPG之类的图像压缩工具。这些解决方案能够提供不少帮助，可是不少时候，您均可以使用原生CSS效果替换大量资源的JPG和PNG图像。

例如，您可使用渐变来代替背景图像，而背景图像可能会大大下降用户浏览器的速度。您可使用CSS的渐变功能来建立线性，径向和重复渐变。使用这些CSS原生功能，您不只能够定义颜色，还能够定义渐变的角度。

例如，如下规则建立了一个很好的渐变背景，其加载速度比任何图像都要快：

div {    background: linear-gradient(45deg, lightgreen, royalblue);}

对于更复杂的渐变和纹理，还可使用CSSmatic（在下图显示）和ColorZilla这样的生成器。

除渐变外，您还可使用可缩放矢量图形（SVG）替换传统的JPG和PNG图像。它们不只加载速度更快，并且您只须要包含该图像的一个版本。这是由于SVG因为其向量性质而能够按比例放大到任何大小而没有任何质量损失。此外，您也可使用CSS设置SVG的样式，就像普通的HTML文件同样。

6.避免重要规则

尽管！important规则在某些状况下多是天赐之物，但您仅应将其做为最后的选择。此规则从级联中建立一个异常。所以，当您在CSS声明中添加！important时，它将覆盖全部其余声明，即便是那些具备更高特异性的声明。它的语法以下所示：

h1{  margin-bottom: 20px!important;}

若是CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大下降页面速度。根据经验，切勿在整个站点范围的CSS或建立主题或插件时使用！important。若是可能，请仅在要覆盖来自第三方库的CSS时使用它。

7.考虑CSS重构

尽管CSS重构不多是一件容易的事，但在许多状况下，它能够显着提升网站性能。例如，若是CSS文件太大，或者您继承了旧版代码库，或者页面加载时间不好，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护而且加载更快。

CSS重构是一个多步骤的过程，在此过程当中，您须要分析CSS代码库的各个方面。您须要检查几件不一样的事情，例如：

不管您有未使用或重复的CSS规则或资源，
是否能够利用Flexbox和CSS网格等更现代的技术，
是否使用过多的特异性（可使用此视觉特异性计算器进行计算），
CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），
是否值得使用自动构建工具，
还有不少其余
- 　　在开始重构以前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您能够比较它们的先后值。
- 　　一样不要忘记使用版本控制工具，例如Git。这样，若是出现任何问题，您能够返回到之前的代码版本。

您可使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不只能够加强用户体验，还能够帮助您在Google和其余搜索引擎中得到更好的排名。

除了CSS优化最佳实践以外，您还可使用许多其余技术来提升加载速度，例如缓存，Google AMP和HTTPS协议。

做者：游X鱼连接：https://www.jianshu.com/p/69198ac60e53