如何优化CSS以达网站性能之巅

具有优化CSS的高性能页面通常具有较少的资源，这些资源与短阻塞/暂停条并行加载。

2. WebPageTest

WebGetest提供了类似的网络瀑布视图，以及许多其他性能图表：

WebPageTest.org页面资源加载瀑布图

该服务使用基于不同全球位置的设备，因此您可以评估真实世界的性能和CSS优化。

3. Chrome开发人员工具Lighthouse面板

DevTools Lighthouse面板在基于铬的浏览器中提供，如Chrome、Edge、Brave、Opera和Vivaldi。您可以为移动和桌面设备生成性能、渐进式Web应用、最佳实践、可访问性和搜索引擎优化报告。

DevTools Lighthouse面板

该工具提供改进建议，包括优化CSS的方法。并非所有这些都是切实可行的，但最有利于性能提升的点都会被强调。

4. Google PageSpeed Insights

PageSpeed Insights是Lighthouse的在线版本。它的功能较少，但可以在任何浏览器中使用，并提供一些可选的见解。

例如，一个树状图显示了最大的JavaScript资源，其中包含一个覆盖率指标，该指标指示使用和未使用代码的比例：

Google PageSpeed Insights树状图

CSS不会显示，但JavaScript的数量将影响样式的效率。

类似的网站速度测试工具包括Pingdom和GTmetrix等十余个。

5. Chrome开发人员工具覆盖范围面板

Chromium浏览器中的DevTools覆盖范围面板有助于定位未使用的CSS（和JavaScript）代码。从DevTools更多工具子菜单中选择覆盖范围，然后刷新页面并浏览站点/应用程序：

DevTools覆盖范围面板

CSS和JavaScript资产显示在覆盖范围面板中，未使用代码的比例用红色表示。单击任何文件以查看其源代码，未使用的代码在行号栏中以红色突出显示。

需要注意的几件事：

• 如果刷新或导航到新页面，覆盖率指标将重置，这在WordPress站点上是典型的。只有在浏览一个加载内容而不刷新页面的单页应用程序时，未使用的代码度量才会降低。
• 该工具只能解释在特定时间点使用的CSS。它无法确定小部件是否未被查看或具有多个JavaScript绑定状态。

6. Chrome开发人员工具性能监视器

基于Chromium的浏览器具有实时性能监视器。同样，这可以从DevTools的“更多工具”菜单中获得。当您浏览页面、滚动和触发动画时，图表会更新：

DevTools性能监视器

以下指标对于优化CSS性能特别重要（越低越好）：

• CPU使用率：处理器使用率从0%到100%。
• 布局/秒：浏览器重新布局页面的速率。
• 样式重新计算次数/秒：浏览器必须重新计算样式的速率。

如果CSS由于外部因素而陷入困境，其他指标也可能有用（同样，值越低表示性能越好）：

• JS堆大小：JavaScript对象使用的总内存。
• DOM节点：HTML文档中的元素数。
• JS事件侦听器：已注册的JavaScript事件侦听器的数量。
• 文档：资源的数量，包括页面、CSS文件、JavaScript模块等。
• 文档帧：帧、iframe和JavaScript工作脚本的数量。

7. Chrome开发人员工具性能报告

DevTools性能面板允许您记录页面活动以进行进一步分析，并帮助确定性能问题。生成的报告很复杂，许多开发人员都避免使用它们，但它们提供了有价值的信息。

性能面板的设置图标允许您设置各种选项，例如降低网络和CPU的速度。您还可以禁用JavaScript示例，以便不记录详细的调用堆栈。

要开始，请单击循环记录图标，加载和/或使用页面，然后单击停止按钮查看报告：

DevTools性能报告

几乎所有这些指标都对JavaScript开发人员有用，但CSS优化问题可能从以下方面特别明显：

• 顶部红色条：这表示帧速率显著下降，这可能会导致性能问题。这在页面加载开始时是应该的，但是过多的CSS动画也可能是一个问题。
• 摘要图表：高加载、渲染和绘制度量可能表明CSS问题。

间接CSS性能优化

下面的优化程序不会直接解决CSS问题，但它们可以帮助您解决一些性能问题，所需的工作量相对较小。

使用好主机

使用一台性能良好的主机，使服务器在物理上更接近用户，将立即带来性能优势。托管计划各不相同，但主要有三种类型：

云托管计划和价格差异巨大。你可以考虑：

交换主机可以提高性能。它不太可能解决您所有的问题，但它是解决后端和带宽问题的经济高效的解决方案。

您还可以考虑使用内容分发网络（CDN）或专业图像和视频CDN，它可以在地理上更接近用户的多个位置上分发负载。

利用浏览器和服务器效率功能

大约10%的站点不激活gzip（或更好的）压缩，这通常是默认的服务器选项。通过在传输之前压缩文件，可以将CSS的大小减少60%或更多。它不会修复低效的CSS，但代码会更快到达！

您还应该激活HTTP/2（或更好），它以较小的二进制格式发送数据，压缩头，并且可以在同一TCP连接上发送多个文件。

最后，确保浏览器能够有效缓存CSS和其他文件。这通常是在HTTP头中设置Expires、Last Modified和/或ETag哈希的问题。

优化CMS

诸如WordPress之类的内容管理系统可以通过主题和插件进行扩展，这些主题和插件服务于它们自己的CSS。在可能的情况下，您应加快CMS的速度，以：

优化图像

图像的处理和呈现开销与HTML、CSS和JavaScript不同，但它们占页面重量和可用带宽的很大一部分。考虑：

专业的图像CDN可以为您处理一些这方面的工作。有关更多提示，请查看我们关于如何为Web优化图像的指南。

删除未使用的CSS

最快的样式是那些您永远不需要加载或渲染的样式！尝试删除/编辑您不再需要的任何CSS代码，例如用于遗留页面、小部件或框架的CSS代码。在较大的网站上，这可能很困难，而且并不总是清楚特定的样式集是否是必需的。

以下工具在构建时分析HTML和CSS的使用情况，或者通过抓取URL来识别冗余代码。这并不总是足够的，因此可以设置其他配置，以确保列出由JavaScript和用户交互触发的样式：

• UnCSS
• UnusedCSS
• PurgeCSS
• PurifyCSS

还有一个更好的选择：将CSS拆分为具有明确责任级别的单独文件，并相应地编制文档。然后，删除不必要的样式变得相当容易。

优化CSS加载性能

并不是所有的CSS都加载相同。谦逊的标签有许多不总是合乎逻辑的选项和怪癖。

优化Web字体使用

谷歌字体和类似的字体设计商已经彻底改变了网络字体，但几行字体代码可能会占用数百KB的带宽。

以下是我们的优化建议：

使用适当的字体加载选项

下载和处理Web字体可能需要几秒钟的时间。浏览器将：

两者都不理想。CSS font-display属性和Google Font & display =参数可以选择一个备选选项：

• auto：浏览器的默认行为（通常为FOIT）。
• block：有效地阻止。文本最多三秒钟不可见。没有字体交换，但文本可能需要时间才能显示。
• swap：实际上是FOUT。在web字体可用之前，将使用第一个回退。文本可以立即读取，但字体交换效果可能会不和谐。Font Style Matcher可用于定义大小类似的回退。
• fallback：FOIT和FOUT之间的妥协。文本在短时间内不可见（通常为100毫秒），然后使用第一个回退，直到web字体可用。
• optional：与回退类似，只是没有发生字体交换。只有在初始期间可用时，才会使用web字体。您的第一个页面视图可能会显示回退字体，后续视图将使用下载和缓存的web字体。

使用swap、fallback或optional可以提高性能。

避免CSS @import

@import at-rule允许将CSS文件包含在其他文件中：

/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");

这似乎是加载较小组件和字体的有效方法。不幸的是，每个@import都是渲染阻塞，每个文件都必须按顺序加载和解析。

HTML中的多个标记更有效，可以并行加载CSS文件：

也就是说，这样更加合理…

串联和最小化CSS

现代构建工具、CSS预处理器（如Sass）和WordPress插件可以将所有部分组合到一个大型CSS文件中。然后删除不必要的空白、注释和字符，以将文件大小减至最小。

使用HTTP/2及更高版本，多个文件的性能问题较少，但单个文件只需要一个头，可以更高效地进行gzip压缩和缓存。

单独的CSS文件只有在您有一个或多个频繁更改的样式表（可能每周更改几次）时才实用。即使如此，大部分静态CSS代码仍然可以合并到一个文件中。有关更多提示，请查看我们关于如何最小化CSS和JS的教程。

避免Base64编码

工具可以将图像编码为base64字符串，您可以将其用作HTML的标记和CSS背景中的数据URI：

.background {
  background-image: url('data:image/jpg;base64,ABC123...');
}

这会减少HTTP请求的数量，但会损害CSS性能：

• base64字符串可以比其二进制等效字符串大30%。
• 浏览器必须先解码字符串，然后才能使用图像，并且
• 改变一个图像像素会使整个CSS文件无效。

只考虑Base64编码，如果您使用的是非常小的、不经常改变的图像，其中生成的字符串不长于URL。

也就是说，您可以用UTF8编码可重用的SVG图标，例如。

.svgbackground {
  background-image: url('data:image/svg+xml;utf8,');
}

删除CSS Hacks和IE Fallbacks

除非你很不幸，并且有很多Internet Explorer用户，否则可以从你的CSS中删除有条件的样式表和黑客。在大多数情况下，IE用户仍然会看到一些东西，特别是如果您使用的是“移动优先”设计，默认情况下会显示更简单的线性视图。结果可能不太好，也不会是完美的像素，但你的开发预算最好是考虑所有用户的可访问性。

预加载CSS文件

标记提供了一个可选的预加载属性，可以立即开始下载，而不是等待HTML中的真正引入：

这在WordPress和其他CMS中尤其有用，在这些CMS中，插件可以在页面下方添加样式表。

使用关键内联CSS

分析工具可能会建议您“内联关键CSS”或“减少渲染阻塞样式表”。这可以通过以下方式提高性能：

• 识别折叠上方元素使用的基本样式（页面加载时可见的样式）
• 将关键CSS内联到中的

  诸如critical和criticalCSS之类的工具可以帮助提取视图中元素的样式。

  这项技术显著提高了绩效，提高了审计分数。具有一致界面的站点或应用程序应该更容易实现，但在其他地方可能更难实现：

  • 除了最简单的站点外，构建工具对于所有站点都是必不可少的。
  • 每个设备上的“折叠”都不同。
  • 站点可以有各种各样的布局，需要不同的关键CSS。
  • 关键的CSS工具可以与特定的框架、HTML生成的客户端和动态内容进行斗争。
  • 这种技术主要有利于第一页的加载。CSS被缓存用于后续页面，因此附加的内联样式将增加页面的权重。

  使用媒体查询渲染

  单个连接和缩小将使大多数站点受益，但需要大量较大屏幕样式的站点可以拆分CSS文件并使用媒体查询加载：

  本例假定采用移动优先的方法。移动设备加载core.css，但可能不需要下载或解析其余的样式表。

  使用渐进式渲染

  渐进式渲染是一种为单独的页面或组件定义单独样式表的技术。它可以使非常大的站点受益，在这些站点中，单个页面由广泛的组件构成。

  在HTML中引用组件之前立即加载每个CSS文件：

  
    
    
  
  
    
    
    
  ...
    
    
    
  
      
      
      
  
    
  

  这在大多数浏览器中行之有效。（Safari显示一个空白页面，直到加载所有CSS，但它不应该明显比单个大样式表差。）

  采用Web组件还鼓励使用在呈现自定义元素时加载的范围样式。

  优化CSS性能

  CSS技术和属性给浏览器、CPU、内存、带宽和其他资源带来了不同的压力。以下提示可以帮助您避免不必要的处理和缓慢的性能。

  采用现代布局技术（Grid和Flexbox）

  基于浮动的布局很难创建，使用大量属性，需要连续调整边距和填充，必须使用媒体查询进行管理，并且需要大量的浏览器处理。多年来，它们是唯一可行的布局方法，但已不再必要。使用以下任一选项：

  • CSS Flexbox用于一维布局，可以换行到下一行。它是菜单、图像库、卡片等的理想选择。
  • CSS Grid用于具有显式行和列的二维布局。它非常适合页面布局。

  两者都更易于开发，使用更少的代码，渲染速度更快，并且无需媒体查询即可适应任何屏幕大小。

  非常旧的浏览器无法识别现代的flexbox和网格属性，因此每个元素都成为一个块。以简单的移动式线性布局显示它们：不需要使用基于浮点的回退来模拟设计。

  用CSS渐变和效果替换图像

  在可能的情况下，选择CSS代码而不是图像。使用渐变、边界、半径、阴影、过滤器、混合模式、遮罩、剪裁和伪元素效果进行实验，以重用或替换现有图像。

  CSS效果使用更少的带宽，更容易修改，并且通常可以设置动画。

  避免过度使用高成本的属性

  您可能有简洁的声明性代码，但某些CSS需要比其他CSS更多的处理。以下属性触发绘画计算，当过度使用时计算成本可能会很高：

  • position: fixed
  • border-radius
  • box-shadow
  • text-shadow
  • opacity
  • transform
  • filter
  • backdrop-filter
  • background-blend-mode

  尽可能使用CSS过渡和动画

  CSS过渡和动画总是比JavaScript支持的效果更平滑，后者修改类似的属性。它们不会在非常旧的浏览器中处理，但是，由于这些浏览器可能运行在性能较差的设备上，这是最好的。

  但是，请避免过多的动画。这些效果应该能够增强用户体验，而不会对性能产生负面影响或导致晕车。检查prefers-reduced-motion媒体查询，必要时禁用动画。

  避免触发重新布局的动画属性

  更改元素的尺寸（宽度、高度、填充、边框）或位置（顶部、底部、左侧、右侧、边距）可能会导致整个页面在每个动画帧上重新布局。要设置动画的最有效特性是：

  • opacity
  • filter: 模糊、对比度、阴影和其他效果
  • transform: 平移（移动）、缩放或旋转图元素

  浏览器可以使用硬件加速的GPU在自己的层中渲染这些效果，因此只影响合成阶段。

  如果必须设置其他属性的动画，可以通过使用position:absolute将元素从页面流中移除来提高性能。

  注意复杂选择器

  浏览器将快速解析最复杂的CSS选择器，但简化它们会减少文件大小并提高性能。复杂选择器通常是在CSS预处理器（如Sass）中创建深度嵌套的结构时生成的。

  指示哪些元素将更改

  CSS will-change属性允许您警告元素将如何更改或设置动画，以便浏览器可以提前进行优化：

  .myelement {
    will-change: transform, opacity;
  }

  可以定义任意数量的逗号分隔值，但该属性只能作为解决已知性能问题的最后手段。您不应该将它应用于太多的元素，并确保给它足够的时间进行初始化。

  考虑CSS Containment

  Containment是一种新的CSS特性，它允许您识别页面的孤立子树，从而提高性能。浏览器可以通过呈现（或不呈现）特定的DOM内容块来优化处理。

  contain属性在空格分隔的列表中接受以下一个或多个值：

  • none: 未应用Containment
  • layout: 元素的布局与页面的其余部分隔离-其内容不会影响其他元素
  • paint: 图元的子图元不会显示在其边界之外
  • size: 可以在不检查子元素的情况下确定元素的大小-维度与内容无关

  还提供了两个特殊值：

  • strict: 应用所有containment 规则（无规则除外）
  • content: 应用布局和绘制

  重要：一个页面有一个包含应用 contain: strict; 的 

   列表；应用如果更改任何子项 
  • 的内容，浏览器将不会重新计算该项、列表中的其他项或页面上任何其他元素的大小或位置。

  大多数现代浏览器都支持CSS Containment。Safari或较旧的应用程序中不支持Containment，但在这些应用程序中可以安全地使用Containment，因为浏览器将忽略该属性。

  对“Save-Data”标头作出响应

  Save Data是一个HTTP请求头，指示用户已请求减少的数据。在某些浏览器中，它可能被标记为“Lite”或“Turbo”模式。

  启用后，每个浏览器请求都会发送一个 Save-Data 标头：

  GET /main.css HTTP/1.0
  Host: site.com
  Save-Data: on

  当检测到Save-Data时，服务器可以做出相应的响应。在CSS的情况下，它可以发送一个简单的移动式线性布局，使用OS字体，切换到块颜色，或者加载低分辨率的图像背景。

  注意：服务器应在修改请求时返回以下标头，以确保在用户关闭Lite/Turbo模式时不会缓存和重用最小内容：

  Vary: Accept-Encoding, Save-Data

  客户端JavaScript也可以检测到此标头。当未启用“Save-Data”时，以下代码将bestUX类添加到  元素：

  if ('connection' in navigator && !navigator.connection.saveData) {
    document.documentElement.classList.add('bestUX');
  }

  然后，样式表可以相应地做出响应，而无需任何服务器操作：

  /* no hero image by default */
  header {
    background-color: #abc;
    background-image: none;
  }
  /* hero image when no Save-Data */
  .bestUX header {
    background-image: url("hero.jpg");
  }

  prefers-reduced-data媒体查询提供了一个仅CSS选项作为替代，尽管在编写本文时，任何浏览器都不支持此选项：

  /* no hero image by default */
  header {
    background-color: #abc;
    background-image: none;
  }
  /* hero image when no Save-Data */
  @media (prefers-reduced-data: no-preference) {
    header {
      background-image: url("hero.jpg");
    }
  }

  小结

  对于CSS性能的优化有很多选择，但是对于新项目，请考虑以下做法：

  • 使用移动优先的方法：首先编写最简单的移动布局，然后随着屏幕空间和浏览器功能集的增加添加增强功能。
  • 将CSS拆分为具有可识别责任的单独文件：CSS预处理器或CMS插件可以将CSS部分合并到单个文件中。
  • 添加一个构建步骤：提供了一些工具，可以自动删除代码、识别问题、连接、缩小、减少图像大小等。自动化使生活更轻松，而且您不太可能忘记优化步骤。
  • 记录样式表：带有文档化示例的样式指南将使您的代码更易于获取和维护。您将能够识别和删除旧的CSS，而无需付出任何代价。

  最后，学习CSS！您知道的越多，需要编写的代码就越少，Web应用程序就会变得越快。无论您使用哪种平台和框架，它都将使您成为更好的开发人员。

  本文题目：如何优化CSS以达网站性能之巅
  文章链接：http://www.mswzjz.cn/qtweb/news6/305806.html

  攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

  广告

  声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能