清远企业网站制作：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文件：

使用<link>标记将它们添加到HTML页面的<head>部分，
使用@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

微信咨询

寒枫总监