20个优化CSS性能的技巧-IT业界-PHP中文网

首页

科技周边

IT业界

20个优化CSS性能的技巧

Lisa Kudrow

Feb 16, 2025 am 08:42 AM

20 Tips for Optimizing CSS Performance

本文探讨20种优化CSS的方法，旨在提升加载速度、简化开发和提高效率。根据最新的HTTP Archive报告，网站普遍存在资源冗余问题，中位数网站需要1700KB的数据，80个HTTP请求，在移动设备上完全加载需要17秒。《减少页面重量的完整指南》提供了多种建议，本文将重点关注CSS优化。虽然CSS通常并非性能问题的罪魁祸首，典型网站仅使用40KB的CSS分散在五个样式表中，但仍然存在优化空间，改变CSS的使用方式也能提升网站性能。

关键要点

利用浏览器工具和在线分析器： 使用浏览器开发者工具和Google PageSpeed Insights等在线平台来识别和解决CSS加载缓慢的问题。
优先进行重大改进： 启用HTTP/2，使用GZIP压缩，并使用CDN来高效处理较大的资源，显着提升加载速度。
使用CSS效果代替图片： 使用CSS代替图片来实现视觉效果，例如阴影和渐变，以减少下载大小并提高可维护性。
最小化字体开销： 限制自定义字体的使用，仅选择必要的样式和粗细，并考虑使用系统字体以减少加载时间。
实施高效的CSS实践： 使用Flexbox和Grid等现代布局方法，最小化CSS代码，并避免使用代价高昂的属性，以简化性能和维护。

学习使用分析工具

除非知道问题所在，否则无法解决性能问题。浏览器开发者工具是最佳起点：从菜单启动或按F12、Ctrl Shift I或macOS上的Safari的Cmd Alt I。所有浏览器都提供类似的功能，工具在性能较差的页面上会加载缓慢！但是，最有用的选项卡包括以下内容……“网络”选项卡显示资源下载的瀑布图。为了获得最佳结果，请禁用缓存并考虑将网络速度降低。查找下载缓慢或阻塞其他资源的文件。浏览器通常会在CSS和JavaScript文件下载和解析时阻止浏览器渲染。 “性能”选项卡分析浏览器进程。开始录制，运行诸如页面重新加载之类的活动，然后停止录制以查看结果。查找：1. 过多的布局/重排操作，浏览器被迫重新计算页面元素的位置和大小；2. 代价高昂的绘制操作，像素发生更改； 3. 合成操作，将页面的绘制部分组合在一起以在屏幕上显示。这通常是最不占用处理器资源的操作。

基于Chrome的浏览器提供一个“审核”选项卡，该选项卡运行Google的Lighthouse工具。它通常由渐进式Web应用开发者使用，但也提供CSS性能建议。

在线选项

或者，使用不受设备和网络速度和能力影响的在线分析工具。大多数工具可以从世界各地的不同位置进行测试：

Pingdom网站速度测试
GTmetrix
Google PageSpeed Insights
WebPageTest

首先取得重大进展

CSS不太可能是性能问题的直接原因。但是，它可能会加载需要在几分钟内优化的重量级资源。例如：

在服务器上启用HTTP/2和GZIP压缩
使用内容交付网络（CDN）来增加同时HTTP连接的数量并将文件复制到世界各地的其他位置
删除未使用的文件

图片通常是页面体积最大的原因，但许多网站未能有效优化：

调整位图图像大小。入门级智能手机拍摄的多兆像素图像无法在最大的高清屏幕上完全显示。很少有网站需要宽度超过1600像素的图像。
确保使用合适的图像格式。通常，JPG最适合照片，SVG最适合矢量图像，PNG最适合其他所有图像。您可以进行实验以找到最佳类型。
使用图像工具通过去除元数据和提高压缩因子来减小文件大小。

也就是说，请注意，xKB的图像数据并不等同于xKB的CSS代码。二进制图像并行下载，并且几乎不需要处理即可放置在页面上。CSS会阻塞渲染，并且必须解析成对象模型才能继续。

使用CSS效果代替图片

很少需要使用背景图片来创建边框、阴影、圆角、渐变和一些几何形状。使用CSS代码定义“图像”会使用更少的带宽，并且以后更容易修改或动画化。

删除不必要的字体

诸如Google Fonts之类的服务使向任何页面添加自定义字体变得容易。不幸的是，一两行代码可以检索数百千字节的字体数据。建议：

只使用所需的字体。
只加载所需的粗细和样式——例如，罗马体、400粗细，无斜体。
尽可能限制字符集。Google字体允许您通过向字体URL添加&text=值来选择某些字符——例如fonts.googleapis.com/css?family=Open Sans&text=SitePon用于在Open Sans中显示“SitePoint”。
考虑可变字体，它通过插值定义多个粗细和样式，因此文件更小。目前支持仅限于Chrome、Edge和某些版本的Safari，但应该会迅速增长。
考虑操作系统字体。您的500KB网页字体可能是符合品牌形象的，但是如果您切换到常用的Helvetica或Arial，有人会注意到吗？许多网站使用自定义网页字体，因此标准操作系统字体比以前少得多！
避免使用@import

@import规则允许在另一个CSS文件中包含任何CSS文件。例如：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

这似乎是加载较小组件和字体的合理方法。事实并非如此。@import规则可以嵌套，因此浏览器必须按顺序加载和解析每个文件。HTML中的多个<link>标签将并行加载CSS文件，这效率要高得多——尤其是在使用HTTP/2时：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

也就是说，可能还有更好的选择……

连接和压缩

大多数构建工具允许您将所有部分组合成一个大型CSS文件，该文件已删除不必要的空格、注释和字符。使用HTTP/2（它会对请求进行流水线处理和多路复用）时，连接的必要性降低了。在某些情况下，如果您有较小且经常更改的CSS资源，则单独的文件可能更有益。但是，大多数网站都可能受益于发送单个文件，该文件会立即由浏览器缓存。启用GZIP后，压缩可能不会带来可观的优势。也就是说，没有什么真正的缺点。最后，您可以考虑一个构建过程，该过程在声明中一致地排序属性。当整个文件中使用常用字符串时，GZIP可以最大限度地提高压缩率。

使用现代布局技术

多年来，必须使用CSS浮动来布局页面。该技术是一种技巧。它需要大量代码和边距/填充调整才能确保布局有效。即便如此，除非添加媒体查询，否则浮动会在较小的屏幕尺寸下中断。现代替代方案：

CSS Flexbox用于一维布局，它可以根据每个块的宽度换行到下一行。Flexbox非常适合菜单、图片库、卡片等。
CSS Grid用于具有显式行和列的二维布局。Grid非常适合页面布局。

这两种选项都更易于开发，使用更少的代码，可以适应任何屏幕尺寸，并且比浮动渲染速度更快，因为浏览器可以本地确定最佳布局。

减少CSS代码

最可靠和最快的代码是您永远不需要编写的代码！样式表越小，下载和解析速度就越快。所有开发人员都从良好的意图开始，但随着功能数量的增加，CSS可能会随着时间的推移而膨胀。保留旧的、不必要的代码比删除它并冒着破坏某些东西的风险更容易。一些需要考虑的建议：

警惕大型CSS框架。您不太可能使用大部分样式，因此只在需要时添加模块。
将CSS组织成具有明确责任的较小文件（部分）。如果CSS在widgets/_carousel.css中明确定义，则更容易删除轮播小部件。
考虑使用BEM等命名方法来帮助开发独立组件。
避免深度嵌套的Sass/预处理器声明。扩展后的代码可能会意外地变大。
避免使用!important来覆盖级联。
避免在HTML中使用内联样式。

诸如UnCSS之类的工具可以通过分析您的HTML来帮助删除冗余代码，但要注意由JavaScript交互引起的CSS状态。

坚持级联！

CSS-in-JS的兴起使开发人员能够避免CSS全局命名空间。通常，在构建时会创建随机生成的类名，因此组件不可能发生冲突。如果CSS-in-JS改善了您的生活，那么请继续使用它。但是，值得了解CSS级联的优势，而不是在每个项目中都与之对抗。例如，您可以设置默认字体、颜色、大小、表格和表单字段，这些字段会普遍应用于单个位置的每个元素。很少需要在每个组件中声明每个样式。

简化选择器

即使是最复杂的CSS选择器也需要几毫秒才能解析，但降低复杂性将减小文件大小并帮助浏览器解析。您真的需要这种选择器吗？！

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

同样，要注意Sass等预处理器中的深度嵌套，其中可能会无意中创建复杂的选择器。

警惕代价高昂的属性

某些属性的渲染速度比其他属性慢。为了增加卡顿，尝试在所有元素上放置方框阴影！

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

浏览器性能会有所不同，但一般来说，任何在绘制前导致重新计算的操作在性能方面都会更加昂贵：

border-radius
box-shadow
opacity
transform
filter
position: fixed

采用CSS动画

本机CSS转换和动画始终比修改相同属性的JavaScript驱动的效果更快。CSS动画在IE9及以下的旧版浏览器中不起作用，但这些用户永远不会知道他们错过了什么。也就是说，避免为了动画而动画。细微的效果可以增强用户体验，而不会对性能产生不利影响。过多的动画可能会减慢浏览器速度，并可能导致某些用户出现晕动症。

避免动画化代价高昂的属性

动画化元素的尺寸或位置可能会导致整个页面在每一帧上重新布局。如果动画只影响合成阶段，则可以提高性能。最有效的动画使用：

opacity和/或
transform来平移（移动）、缩放或旋转元素（元素使用的原始空间不会改变）。

浏览器通常使用硬件加速的GPU来渲染这些效果。如果两者都不理想，请考虑使用position: absolute将元素从页面流中移除，以便可以在其自己的图层中对其进行动画处理。

指示哪些元素将进行动画处理

will-change属性允许CSS作者指示将对元素进行动画处理，以便浏览器可以提前进行性能优化。例如，要声明将应用转换到元素：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

可以定义任意数量的逗号分隔属性。但是：

将will-change作为解决性能问题的最后手段
不要将其应用于太多元素
给它足够的时间来工作：也就是说，不要立即开始动画。

采用SVG图像

可缩放矢量图形（SVG）通常用于徽标、图表、图标和更简单的图表。SVG不会像JPG和PNG位图那样定义每个像素的颜色，而是使用XML定义形状，例如线条、矩形和圆形。例如：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

更简单的SVG比等效的位图更小，并且可以无限缩放而不会丢失清晰度。SVG可以直接在CSS代码中作为背景图像内联。这对于较小、可重复使用的图标来说可能非常理想，并且避免了额外的HTTP请求。例如：

body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

使用CSS设置SVG样式

更典型的是，SVG直接嵌入到HTML文档中：

*, ::before, ::after {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

这会将SVG节点直接添加到DOM中。因此，可以使用CSS应用所有SVG样式属性：

.myelement {
  will-change: transform;
}

嵌入式SVG代码的数量减少了，CSS样式可以根据需要重复使用或动画化。请注意，在img标签内或作为CSS背景图像使用SVG意味着它们与DOM分离，CSS样式将不起作用。

避免使用Base64位图图像

标准位图JPG、PNG和GIF可以编码为data URI中的base64字符串。例如：

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" />
</svg>

不幸的是：

base64编码通常比其二进制等效项大30%
浏览器必须解析字符串才能使用它
更改图像会使整个（缓存的）CSS文件无效

虽然减少了HTTP请求，但它很少提供明显的益处——尤其是在HTTP/2连接上。一般来说，除非图像不太可能经常更改并且生成的base64字符串不太可能超过几百个字符，否则请避免内联位图。

考虑关键CSS

使用Google页面分析工具的用户通常会看到建议“内联关键CSS”或“减少渲染阻塞样式表”。加载CSS文件会阻塞渲染，因此可以使用以下步骤提高性能：

提取用于渲染屏幕以上元素的样式。诸如criticalCSS之类的工具可以提供帮助。
将这些样式添加到HTML中的<style></style>元素中。
使用JavaScript异步加载主CSS文件（可能在页面加载后）。

该技术无疑可以提高性能，并且可能有利于具有持续界面的渐进式Web或单页应用程序。对于其他网站/应用程序，收益可能不太明显：

无法识别“折叠”，并且它在每个设备上都会发生变化。
大多数网站都有不同的页面布局。每个页面可能需要不同的关键CSS，因此构建工具变得至关重要。
动态的、JavaScript驱动的事件可能会导致关键CSS工具无法识别的屏幕以上更改。
该技术主要有利于用户的首次页面加载。CSS会缓存到后续页面，因此额外的内联样式会增加页面重量。

也就是说，Google会喜欢您的网站，并将其推送到每个搜索词的排名第一。(SEO“专家”可以引用我的话。其他人都会知道这是无稽之谈。)

考虑渐进式渲染

渐进式渲染是一种技术，它不使用单个站点范围的CSS文件，而是为单独的组件定义单独的样式表。每个样式表都在HTML中引用组件之前立即加载：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

每个<link>仍然会阻塞渲染，但时间更短，因为文件更小。页面可以更快地使用，因为每个组件都会按顺序渲染；可以在加载其余内容时查看页面的顶部。该技术适用于Firefox、Edge和IE。Chrome和Safari会通过加载所有CSS文件并在发生这种情况时显示白屏来“优化”体验——但这并不比在<style></style>中加载每个文件更糟糕。渐进式渲染可能有利于大型网站，其中各个页面是由不同组件的选择构建的。

学会热爱CSS

最重要的技巧：了解您的样式表！ 从StackOverflow或BootStrap添加大量CSS可能会产生快速的结果，但它也会使您的代码库膨胀，其中包含未使用的垃圾。进一步的自定义变得令人沮丧地困难，并且应用程序将永远不会高效。 CSS易于学习，但难以掌握。如果您想创建有效的客户端代码，则无法避免这项技术。了解一些CSS基础知识可以彻底改变您的工作流程，增强您的应用程序并显着提高性能。 我错过了您最喜欢的CSS性能技巧吗？

关于优化CSS性能的常见问题