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

查找加载速度慢的css资源

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

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

查找加载速度慢的css资源
查找加载速度慢的css资源

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

使用Pingdom工具进行CSS优化
使用Pingdom工具进行CSS优化

缩小和压缩CSS文件

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

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

如今,大多数构建工具可让你在代码库上自动执行压缩。例如,默认情况下,Webpack将所有文件作为缩小的包返回。PostCSS还具有诸如CSS Nano之类的智能插件,它们不仅可以缩小文件的大小,还可以通过许多有针对性的优化来运行它。

使用CSS Nano工具进行CSS优化
使用CSS Nano工具进行CSS优化

使用Flexbox和CSS网格

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

使用较旧的技术,你甚至需要进行许多技巧和调整,即使是比较简单的事情,例如将项目垂直居中。但是,flexbox和CSS Grid并非如此。尽管拾取新的布局模块可能要花费一些时间,但还是值得的投资,因为CSS文件要小得多。flexbox尤其如此,到目前为止,flexbox具有相当不错的浏览器支持(目前全球支持 98.3%)。

Flexbox属性的浏览器兼容性
Flexbox属性的浏览器兼容性

尽管浏览器对CSS Grid的支持还不够完善(目前占全球的92.03%),但如果不必支持旧版浏览器或愿意提供后备功能,则仍然可以使用它。

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

目前主要使用两种技术来加载CSS文件:

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

使用渐变和SVG代替图像

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

使用渐变来代替背景图像,而背景图像可能会大大降低用户浏览器的速度。你可以使用CSS的渐变功能来创建线性,径向和重复渐变。使用这些CSS原生功能,你不仅可以定义颜色,还可以定义渐变的角度。

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

减少使用!important规则

尽管!important规则在某些情况下可能是天赐之物,但你仅应将其作为最后的选择。此规则从级联中创建一个异常。因此,当你在CSS声明中添加!important时,它将覆盖所有其他声明,即使是那些具有更高特异性的声明。

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

河北乐客互联网络科技有限公司成立于2019年2月28日,公司围绕网站以及搜索引擎开展seo、网站优化、网站权重提升、网站降权被K恢复、网站收录量提升、网站诊断调整、优化顾问、百度地图标注、百度百科创建、整站优化等业务服务。 立即咨询