本文探讨20种优化CSS的方法，旨在提升加载速度、简化开发和提高效率。根据最新的HTTP Archive报告，网站普遍存在资源冗余问题，中位数网站需要1700KB的数据，80个HTTP请求，在移动设备上完全加载需要17秒。 《减少页面重量的完整指南》提供了多种建议，本文将重点关注CSS优化。虽然CSS通常并非性能问题的罪魁祸首，典型网站仅使用40KB的CSS分散在五个样式表中，但仍然存在优化空间，改变CSS的使用方式也能提升网站性能。
关键要点
除非知道问题所在，否则无法解决性能问题。浏览器开发者工具是最佳起点：从菜单启动或按F12、Ctrl Shift I或macOS上的Safari的Cmd Alt I。所有浏览器都提供类似的功能，工具在性能较差的页面上会加载缓慢！但是，最有用的选项卡包括以下内容……“网络”选项卡显示资源下载的瀑布图。为了获得最佳结果，请禁用缓存并考虑将网络速度降低。查找下载缓慢或阻塞其他资源的文件。浏览器通常会在CSS和JavaScript文件下载和解析时阻止浏览器渲染。 “性能”选项卡分析浏览器进程。开始录制，运行诸如页面重新加载之类的活动，然后停止录制以查看结果。查找：1. 过多的布局/重排操作，浏览器被迫重新计算页面元素的位置和大小；2. 代价高昂的绘制操作，像素发生更改； 3. 合成操作，将页面的绘制部分组合在一起以在屏幕上显示。这通常是最不占用处理器资源的操作。
基于Chrome的浏览器提供一个“审核”选项卡，该选项卡运行Google的Lighthouse工具。它通常由渐进式Web应用开发者使用，但也提供CSS性能建议。
在线选项
或者，使用不受设备和网络速度和能力影响的在线分析工具。大多数工具可以从世界各地的不同位置进行测试：
CSS不太可能是性能问题的直接原因。但是，它可能会加载需要在几分钟内优化的重量级资源。例如：
图片通常是页面体积最大的原因，但许多网站未能有效优化：
也就是说，请注意，xKB的图像数据并不等同于xKB的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可能会随着时间的推移而膨胀。保留旧的、不必要的代码比删除它并冒着破坏某些东西的风险更容易。一些需要考虑的建议：
widgets/_carousel.css中明确定义，则更容易删除轮播小部件。!important来覆盖级联。诸如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-radiusbox-shadowopacitytransformfilterposition: fixed本机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不会像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"]
更典型的是，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样式将不起作用。
标准位图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>
不幸的是：
虽然减少了HTTP请求，但它很少提供明显的益处——尤其是在HTTP/2连接上。一般来说，除非图像不太可能经常更改并且生成的base64字符串不太可能超过几百个字符，否则请避免内联位图。
使用Google页面分析工具的用户通常会看到建议“内联关键CSS”或“减少渲染阻塞样式表”。加载CSS文件会阻塞渲染，因此可以使用以下步骤提高性能：
<head>中的<style>元素中。该技术无疑可以提高性能，并且可能有利于具有持续界面的渐进式Web或单页应用程序。对于其他网站/应用程序，收益可能不太明显：
也就是说，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>中加载每个文件更糟糕。渐进式渲染可能有利于大型网站，其中各个页面是由不同组件的选择构建的。
最重要的技巧：了解您的样式表！ 从StackOverflow或BootStrap添加大量CSS可能会产生快速的结果，但它也会使您的代码库膨胀，其中包含未使用的垃圾。进一步的自定义变得令人沮丧地困难，并且应用程序将永远不会高效。 CSS易于学习，但难以掌握。如果您想创建有效的客户端代码，则无法避免这项技术。了解一些CSS基础知识可以彻底改变您的工作流程，增强您的应用程序并显着提高性能。 我错过了您最喜欢的CSS性能技巧吗？
关于优化CSS性能的常见问题
CSS性能会受到多种因素的影响。首先是CSS文件的大小。较大的文件需要更长时间才能下载和解析，从而减慢网站速度。第二个因素是CSS选择器的复杂性。复杂的选择器需要更多的处理能力才能匹配页面上的元素。最后，使用CSS动画和转换也会影响性能，尤其是在处理能力有限的移动设备上。
有多种策略可以减小CSS文件的大小。一种是删除未使用的样式。像PurifyCSS这样的工具可以帮助识别和删除未使用的CSS。另一种策略是压缩CSS，这会删除不必要的字符，如空格和注释。最后，考虑使用CSS压缩工具或在服务器上启用GZIP压缩以进一步减小文件大小。
复杂的CSS选择器会减慢网站速度，因为它们需要更多的处理能力才能匹配页面上的元素。例如，后代选择器（例如，.parent .child）比类选择器（例如，.class）更昂贵。根据经验，应尽量使选择器保持简单和具体，以提高性能。
CSS动画和转换会显着影响性能，尤其是在处理能力有限的移动设备上。它们会导致布局偏移和重绘，这会减慢网站速度。为了提高性能，请考虑使用will-change属性提前告知浏览器哪些属性和元素将被动画化。
针对移动设备优化CSS涉及多种策略。首先，考虑使用媒体查询根据设备特性提供不同的样式。其次，避免复杂的动画和转换，这些动画和转换会减慢移动设备上的性能。最后，考虑使用响应式图像和延迟加载以减少需要下载的数据量。
您可以使用多种工具来衡量CSS性能。 Google的Lighthouse和PageSpeed Insights可以提供网站性能（包括CSS）的全面概述。此外，Chrome开发者工具的“性能”面板可以帮助您识别代价高昂的CSS并对其进行优化。
虽然CSS本身不会直接影响SEO，但它会间接影响您的排名。加载缓慢的网站（通常是由大型未优化的CSS引起的）会导致糟糕的用户体验，这会对您的SEO产生负面影响。此外，Google将页面速度视为排名因素，因此优化CSS可以帮助提高您的SEO。
Sass和Less等CSS预处理器可以通过允许您编写更高效且更易于维护的代码来帮助提高性能。它们提供了变量、嵌套和mixin等功能，这些功能可以减少您需要编写的代码量，并使其更易于管理。
关键CSS是渲染网页屏幕以上内容所需的最小阻塞CSS量。通过识别和内联关键CSS，您可以加快页面的初始渲染速度，从而提高感知性能。
优化CSS交付涉及多种策略。首先，考虑将小型CSS直接内联到HTML中，以避免额外的HTTP请求。其次，延迟非关键CSS以减少渲染阻塞资源。最后，考虑使用HTTP/2更有效地交付CSS文件。
以上是20个优化CSS性能的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！
