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

1.查找性能瓶颈

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

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


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

2.缩小和压缩CSS文件

大多数网站都依赖多个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协议。


©著作权归作者所有:来自51CTO博客作者qq6048445b266f9的原创作品,如需转载,请注明出处,否则将追究法律责任

你的鼓励让我更有动力

赞赏

0人进行了赞赏支持

更多相关文章

  1. 「公众号吸粉神级插件」实现网站下载文件需要公众号获取验证码
  2. php实现多文件上传和mvc基础
  3. CentOS 6 yum源报错无法使用
  4. mbr修复、RAID组合方式与性能、文件系统自动挂载
  5. 文字编辑器如何从命令行运行宏或脚本
  6. 桌面文件误删咋恢复?
  7. Win10系统隐藏此电脑中的3D对象等七个文件夹
  8. js文件中如何读取app.ux中的全局变量
  9. FTP文件传输协议介绍和常用命令

随机推荐

  1. 在Android Studio中查看android APP 日志
  2. Android中渐变效果的设置
  3. android ExpandableListView伸缩列表
  4. Android 使用RenderScript
  5. android 布局文件 layout_weight用法
  6. Android 如何使用浏览器去下载app和加载h
  7. android process bar 几种style
  8. Android(安卓)初始化Setup Wizard——Pro
  9. Android Frameworks系列之IMF(一)
  10. 【Android文档】Android界面绘制流程----