优化CSS提升网站性能策略

即使在2021年，网络性能仍然是一个亟待解决的问题。根据HTTP Archive的数据，平均每个页面需要下载2MB的数据，发出超过60个HTTP请求，在移动设备上完全加载可能需要长达18秒的时间。其中，样式表占60kB，分为七个请求，因此在试图解决性能问题时，它往往不是最优先考虑的环节。然而，CSS对页面性能的影响不容忽视，即使看似微小的差异也可能产生显著效果。一旦解决了JavaScript的问题，优化CSS就应成为下一个重点。

### CSS如何影响页面性能

CSS看似无害，实则可能需要承担繁重的处理任务。当浏览器遇到CSS标记时，它会在获取和解析CSS文件的过程中暂停其他操作，这种渲染阻塞现象对性能影响显著。虽然JavaScript也能造成渲染阻塞，但可以通过异步处理来缓解：使用async属性并行下载脚本并立即执行，defer属性并行下载并在DOM就绪时按顺序执行，type=”module”属性则类似于defer的行为。对于图像等资源，虽然需要更多带宽，但可以通过使用高效格式并延迟加载（loading=”lazy”属性）来避免阻塞浏览器渲染。遗憾的是，这些优化手段都无法直接应用于CSS。尽管CSS文件会被缓存，后续页面加载更快，但渲染阻塞的过程依然存在。

### 大型CSS文件处理耗时

样式表越大，浏览器下载和处理CSS对象模型（CSSOM）所需的时间就越长，而CSSOM是浏览器显示页面所依赖的模型。虽然CSS样式表通常比其他网站文件小，但同样遵循“越小越好”的原则。CSS文件的增长往往难以控制，识别和删除不再使用的样式非常困难，错误的删除操作可能对网站造成严重破坏。因此，开发人员通常选择保守的“保留一切”策略，导致不再使用的页面样式、组件和小部件仍然存在于CSS中，最终导致文件大小、复杂性和维护工作量呈指数级增长。

### 样式表引入其他资源

CSS可以使用@import规则引用其他样式表，这些导入会阻塞当前样式表的处理，并以串行方式加载更多CSS文件。此外，字体和图像等资源也可以被引用。浏览器会尝试优化下载，但如果有疑问时会立即获取。内联base64编码的文件需要进一步处理，这可能会影响性能。

### CSS效果渲染

浏览器渲染过程分为三个阶段：布局（或回流）阶段计算每个元素的尺寸和位置关系；绘制阶段将每个元素的可视部分绘制到单独的层上；渲染层合成阶段根据堆叠上下文、位置、z-index等将各层按正确顺序绘制到页面上。不慎的CSS属性更改和动画可能导致所有三个阶段重新渲染，某些特性（如阴影和渐变）的计算成本比块颜色和边距更高。

### CSS性能分析工具

承认CSS性能问题是优化的第一步，而找到并解决这些问题则需要借助专业的工具。以下是一些实用的工具和服务：

1. **开发者工具网络面板**
大多数现代浏览器都内置开发者工具，其中网络面板是性能分析的重要工具。通过切换到“网络”选项卡并确保“禁用缓存”，可以获取准确的下载和处理报告。特别关注耗时较长的加载进度条，尤其是堵塞/停滞加载进度条（显示为白色），这通常意味着渲染阻塞的CSS和JavaScript文件影响了后续资源的加载。使用过滤器框可以筛选特定资源，如大于某个字节的文件或来自不同域的请求。

2. **WebPageTest**
WebPageTest提供类似网络瀑布视图的功能，并包含多种性能图表，帮助评估基于不同全球位置的设备上的真实世界性能。

3. **Chrome开发者工具Lighthouse面板**
Lighthouse面板在Chrome、Edge、Brave、Opera和Vivaldi等浏览器中提供性能、渐进式Web应用、最佳实践、可访问性和搜索引擎优化报告，并给出优化建议，包括CSS优化方法。

4. **Google PageSpeed Insights**
作为Lighthouse的在线版本，PageSpeed Insights提供简洁的性能评估和优化建议，例如通过树状图展示最大的JavaScript资源及其使用情况。

5. **Chrome开发者工具覆盖范围面板**
覆盖范围面板有助于定位未使用的CSS和JavaScript代码。通过选择“更多工具”>“覆盖范围”，刷新页面并浏览站点，未使用的代码将以红色突出显示。需要注意的是，该工具只能解释在特定时间点使用的CSS，无法确定组件是否未被查看或具有多个JavaScript绑定状态。

6. **Chrome开发者工具性能监视器**
性能监视器提供实时图表，帮助分析页面浏览、滚动和动画时的性能表现。关键指标包括CPU使用率、布局/秒、样式重新计算次数/秒等，这些指标对于优化CSS性能至关重要。

7. **Chrome开发者工具性能报告**
性能面板允许记录页面活动进行深入分析，帮助确定性能问题。报告中的顶部红色条表示帧速率显著下降，可能由过多的CSS动画引起；摘要图表则显示加载、渲染和绘制的总量，过高可能暗示CSS问题。

### 间接CSS性能优化

除了直接优化CSS，以下方法也能显著提升性能：

1. **使用优质主机**
选择性能良好的主机，使服务器更接近用户，可以显著提升性能。主要托管类型包括：
– **共享托管**：成本较低，但性能和可用性受其他站点影响。
– **专用托管**：硬件可配置和升级，但成本较高。
– **云托管**：资源可按需扩展，提供灵活的PaaS或SaaS选项。

2. **利用浏览器和服务器效率功能**
启用gzip压缩可将CSS大小减少60%以上；HTTP/2以更高效的二进制格式发送数据，并支持多文件传输；合理设置HTTP缓存头（如Expires、Last Modified和ETag）可提升缓存效率。

3. **优化CMS**
删除未使用的插件，使用更精简的主题，并启用缓存以减少页面重生成次数。

4. **优化图像**
删除不必要的图像，调整大型图像大小，使用WebP或AVIF等高效格式，用CSS渐变替代图像，并在HTML中添加宽度和高度属性或使用CSS纵横比属性。

5. **删除未使用的CSS**
尝试删除或编辑不再需要的CSS代码，如遗留页面、小部件或框架的样式。工具如UnCSS、PurgeCSS和PurifyCSS可帮助识别冗余代码。将CSS拆分为具有明确责任级别的独立文件也有助于简化管理。

### 优化CSS加载性能

并非所有CSS都需要相同时间加载，以下策略可提升效率：

1. **优化Web字体使用**
– 仅加载必要的字体，删除不使用的字体和字符集。
– 限制所需字符，例如通过Google字体查询字符串定义特定文本的样式。
– 考虑使用变量字体，以一个文件替代多个样式文件。
– 从本地服务器加载字体，减少DNS查找并支持WOFF2格式。
– 考虑使用操作系统字体，以减少Web字体加载时间。

2. **使用适当的字体加载选项**
CSS `font-display`属性和Google Fonts的`display`参数可控制字体加载行为：
– `auto`：浏览器默认行为（FOIT）。
– `block`：阻止文本显示，直到字体加载完成。
– `swap`：使用回退字体，直到Web字体可用。
– `fallback`：FOIT和FOUT的折中方案。
– `optional`：类似回退，但无字体交换。

3. **避免CSS @import**
@import会阻塞当前样式表的处理，并按顺序加载其他文件。建议使用HTML标签并行加载CSS文件，以提高效率。

4. **串联和最小化CSS**
现代构建工具和CSS预处理器可将所有CSS合并为一个文件，并删除不必要的空白、注释和字符，以减小文件大小。单个文件可通过gzip压缩和缓存更高效地传输，但频繁更改的样式表可保留为独立文件。

5. **避免Base64编码**
虽然Base64编码可减少HTTP请求，但编码后的字符串可能比二进制等效文件大30%，且解码过程耗时。仅适用于非常小的、不经常更改的图像，如UTF-8编码的SVG图标。