清远企业网站制作:7个最佳CSS优化技巧可以提高页面加载时间

2019.08.09 mf_web

156

在今天的网页中,页面加载时间是最重要的网站指标之一。即使是毫秒也会对您的底线造成巨大影响,而缓慢的页面加载可能会轻易破坏您的转化率。您可以采用许多工具和技术来加速您的网站。在本文中,我们将研究可用于改善前端性能的最佳CSS优化技巧。清远企业网站制作

1.找到性能瓶颈

所有优化的最重要的事情是从彻底的审计开始。幸运的是,有许多CSS诊断工具可以帮助您找到任何性能瓶颈。首先,您可以使用Web浏览器的DevTools来检查资产加载的速度。在大多数浏览器中,您可以通过按F12按钮打开DevTools 。

例如,在Firefox DevTools中,您可以使用“ 网络”选项卡检查页面加载的所有CSS文件的大小和加载时间。您还可以测试使用和不使用缓存加载CSS的速度。由于DevTools还显示外部CSS,例如从第三方CDN中提取的Google Font文件和CSS资产,因此您可以找到许多您以前都不知道的来源。

使用Firefox DevTools进行CSS优化

Google的Pingdom Tools和Lighthouse是开发人员经常用来分析网站速度和前端性能的另外两个免费工具。例如,如果您运行简单的网站速度测试,Pingdom Tools会为您提供几个有用的CSS优化提示。

Pingdom Tools的CSS优化

2.缩小和压缩CSS文件

大多数网站都依赖于多个CSS文件。虽然在大多数情况下,模块化CSS被认为是最佳实践,但加载所有文件可能需要一段时间。但是,这正是CSS缩小和压缩工具存在的原因。如果您巧妙地使用它们,则可以显着提高页面加载时间。

有一些在线工具,如CSS Minify,可以通过将CSS文件复制粘贴成一个简单的形式来缩小CSS文件。这种类型的工具可以很好地适应较小的项目。但是,对于带有多个CSS文件的较大项目,使用它们会变得麻烦且耗时。在这种情况下,最好选择自动化解决方案。

目前,大多数构建工具都允许您自动对代码库执行压缩。例如,Webpack默认将所有文件作为缩小包返回。PostCSS还有智能插件,如CSS Nano,它不仅可以缩小文件,还可以通过许多有针对性的优化来运行它。

CSS Nano

3.使用Flexbox和CSS Grid

如果在编写CSS时仍然完全依赖传统的盒子模型并使用边距,填充和浮动在屏幕上对齐项目,则应考虑采用更现代的布局模块,即flexbox和CSS Grid。这些新模型允许您使用更少的代码实现复杂的布局。

使用较旧的技术,您需要使用许多技巧和调整,即使是更简单的事情,例如垂直居中项目。但是,Flexbox和CSS Grid不是这种情况。虽然可能需要一些时间来选择新的布局模块,但值得投资,因为您的CSS文件会小得多。对于flexbox来说尤其如此,到目前为止,它具有非常好的浏览器支持(目前全球为98.3%)。

Flexbox浏览器支持

尽管浏览器对CSS Grid的支持不太完美(目前全球范围内为92.03%),但如果您不必支持旧浏览器或者您愿意提供回退,您仍然可以使用它。

CSS网格浏览器支持

4.使用<link>标记而不是@import规则

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

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

  2. 使用@import CSS at-rule 从其他样式表导入它们。

您需要将@import规则添加到主CSS文件的顶部。在大多数情况下,它用于加载较小的资产,如字体和其他设计元素。起初,这似乎是一个很好的解决方案,但是,与HTML页面使用<link>标签直接加载它们相比,浏览器加载额外样式表所需的时间要长得多。

当您向HTML页面添加多个CSS文件时,请始终注意CSS特异性。首先添加最通用的样式表,然后转向更具体的样式表。您需要这样做,因为您稍后添加的样式表会覆盖以前CSS文件的规则。例如,这是一个以正确的顺序添加CSS文件的示例:

1
2
3
<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原生函数,您不仅可以定义颜色,还可以定义渐变的角度。

例如,以下规则创建了一个漂亮的渐变背景,加载速度比任何图像快得多:

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

对于更复杂的渐变和纹理,您还可以使用CSSmatic(在下图中)和ColorZilla等生成器。

CSSmatic

除了渐变之外,您还可以使用可缩放矢量图形(SVG)替换传统的JPG和PNG图像。它们不仅加载速度更快,而且只需要包含一个版本的图像。这是因为SVG可以扩展到任何大小,而不会由于其矢量性质而导致任何质量损失。此外,您还可以使用CSS设置SVG样式,就像它是普通的HTML文件一样。

6.避免使用!important规则

虽然在某些情况下,重要规则可能是天赐之物,但您应该只将它作为最后的手段。此规则从级联中创建异常。因此,当您向CSS声明添加!important时,它将覆盖任何其他声明,即使具有更高特异性的声明也是如此。这是它的语法如下:

1
2
3
4
h1 {
 
   margin-bottom: 20px !important;
 
}

如果你的CSS中有太多重要的规则,你的用户的浏览器将不得不对代码进行额外的检查,这可能会使页面变慢。根据经验,永远不要使用!对于网站范围的CSS或创建主题或插件时很重要。如果可能,只在您想要覆盖来自第三方库的CSS时才使用它。

7.考虑CSS重构

尽管CSS重构很少是一项容易的任务,但在很多情况下它可以显着提高网站性能。例如,当您的CSS文件太大,或者您继承了遗留代码库,或者您的页面加载时间非常差,严重损害了转换率。CSS重构的目标是使您的代码更加流畅,更易于维护,并且加载速度更快。

CSS重构是一个多步骤过程,在此过程中,您需要分析CSS代码库的每个方面。您需要检查几个不同的东西,例如:

  • 您是否有任何未使用或重复的CSS规则或资源,

  • 是否可以使用更现代的技术,如flexbox和CSS网格,

  • 你是否使用过多的特异性(你可以用这个视觉特异性计算器来计算它),

  • CSS文件的结构是否合理(例如,维护较小文件比较大文件更容易),

  • 是否值得使用自动构建工具,

  • 和许多其他人。

在开始重构之前,还要设置可衡量的目标并选择您将使用的基准,例如页面加载时间或第一个有意义的绘制,以便您可以比较它们的前后值。

另外不要忘记使用Git等版本控制工具。这样,如果出现任何问题,您可以返回到以前版本的代码。

包起来

您可以使用许多CSS优化提示来改善网站的性能。其中大多数都易于实现,但会对您的页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验,还可以帮助您在Google和其他搜索引擎中获得更好的排名。

清远企业网站制作

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP