提高CSS性能的7个技巧

2020.05.26 -

   

级联样式表可以将无聊的HTML文档转换为动态网页,但是随意使用CSS可能会使网站瘫痪,甚至无法开始呈现。本指南将介绍一些快速简便的方法来微调网站的CSS性能,以便您可以更快地向用户展示内容。

CSS

什么是CSS?

级联样式表或CSS是用于根据标记语言文档中提供的内容来定义网站的视觉表示的语言。与HTML和JavaScript一起,它被认为是Web的“基础技术”之一。CSS通常存储在外部样式表或.css文件中,但也可以直接集成到HTML文档中。

CSS允许网站的表示形式与内容之间的分隔,从而使网站更易于被不同的设备访问。将有关颜色和字体的信息与内容分离开来,还可以降低网站的复杂性,因为多个HTML页面可能共享同一CSS文件。但是,如果使用不当,CSS可能从一开始就成为您网站性能的绊脚石。

CSS性能和网站速度

在评估网站的速度时,有多种性能指标可以衡量,但是其中两个比较突出:

  • 到第一个字节的时间
  • 是时候开始渲染了

到达第一个字节的时间是指访问者在请求您的URL后接收数据的第一个字节所花费的时间。开始渲染的时间是用户浏览器实际开始显示内容的时间点。前者在很大程度上取决于您的服务器设置,而后者则更多地取决于CSS的结构。

也就是说,浏览器只有在接收到数据后才会开始渲染,因此到第一个字节的时间很慢显然会推迟您开始渲染的时间。因此,您应该优先解决服务器的任何潜在问题,然后才能获得优化CSS性能的全部好处。

CSS性能如何影响开始渲染的时间

在浏览器开始布局网页内容之前,它需要HTML和CSS形式的说明。因此,只有在下载并处理了所有外部样式表之后,渲染才能开始。这需要越多的往返行程,等待的游客就越长。

使用外部CSS涉及到一个或多个HTTP请求,因此您的目标应该是尽可能减少所需请求的数量。例如,将您的插件,横幅和布局链接样式放在单个.css文件中,可以大大缩短首次渲染的时间。

改善CSS性能:内联简介

确保快速交付CSS的一种方法是内联实践。内联意味着将外部CSS资源直接插入HTML文档中。这项技术最适合较小的资源,但仍具有明显的区别。

内联CSS减少了浏览器开始呈现页面之前需要下载的数据量。当您使用外部CSS文件时,必须在标记文档下载完成后分别下载它们。内联可以让您一石二鸟。

要内联CSS,只需从外部CSS文件中复制所需的CSS代码,然后将其粘贴在HTML文档头部的样式标签之间,如下所示:

<head>
    <!-- Your header markup -->
    <style>
        .your-styles {
            font-weight: bold;
        }

        .etc-etc {
            color: #222222;
        }
    </style>
</head>

内联更大的CSS资源

如果尝试内联较大的CSS文件,则性能测试工具可能会发出警告,指示您首屏内容太大。因此,对于较大的CSS文件,您应该仅内嵌呈现首屏内容所需的CSS。然后,您应该异步加载完整的样式表,以便页面可以在解析时继续呈现。

关键CSS 是一个GitHub项目,可以帮助您挑选出首屈一指的CSS,但您也应该进行手动检查,以确保没有遗漏任何关键组件。

经过压缩和Gzip压缩后,理想情况下,所有上述样式,脚本,标记的总重应小于14 kb。由于14 kb大约是服务器在第一次往返中可以发送的数据量。 保持在该阈值以下可使用户在他们收到的第一个数据包中获得高于首屏的所有内容。

通过异步加载和缓存提高CSS性能

前面提到的技巧可将用户的浏览器保存到服务器的往返行程中,因此他们在首次访问时便会更快地看到内容。不幸的是,这种特权是有代价的:用户的浏览器不缓存CSS,因此在以后的每次访问中都必须从头开始加载所有内容。

如果您有相当简单的CSS,那么这不是问题。但是,在大多数情况下,您仍然希望用户的浏览器缓存大多数CSS。这就是为什么许多Web开发人员仅在其主页或登录页面上内联CSS的同时,将其余CSS使用外部CSS。

解决此问题的聪明方法是异步加载。不幸的是,没有办法以本地方式异步加载CSS文件,但是您可以使用loadCSS.js之类的脚本 来完成此工作。

改善CSS性能的工具

如果您想了解其他开发人员如何构造CSS,Varvy的CSS交付工具 可以概述任何网站如何使用CSS。这是评估您自己的项目并将其与其他项目进行比较的好工具。

有关改善CSS性能的更多技巧

1.使用预加载和HTTP / 2推送

预加载资源提示告诉浏览器比其他方式早获取资源。要让CSS处于领先地位,可以将其设置为HTML文档中的链接标记,如下所示:

<link rel="preload" href="/css/styles.css" as="style">

或者,您可以在服务器配置中将preload作为HTTP标头包括在内:

Link: </css/styles.css>; rel=preload; as=style

如果您的服务器配置为使用HTTP / 2(应该是HTTP / 2),则预加载将被解释为服务器推送。KeyCDN还支持服务器推送,这将有助于进一步加快高优先级CSS文件的交付。要了解更多信息,请阅读我们的HTTP / 2服务器推送公告博客。

2.不要内联所有内容

不要打扰内联HTML文件中的所有内容,因为这会导致初始HTML文档的大小增加,因此TTFB需要更长的时间。

3.连接并缩小CSS

将样式表串联到一个文件中并发送一个缩小的版本可以大大减少CSS的大小。在我们的最小化CSS,JS和HTML文章中了解有关此过程的更多信息。

4.减少样式表的大小

样式表越小,包含的选择器越少,呈现网页时浏览器将执行的工作就越少。因此,您应该尽力删除不需要的选择器,利用实用程序类并避免重复的CSS代码。您可以使用uncss之类的工具 来确保样式表仅包含必需的CSS代码。

5.选择您的选择器

说到选择器,使用后代选择器会强制浏览器检查所有后代元素是否匹配,因此它们可能会产生更多的问题。通用选择器也可能相当昂贵,因此也请避免使用它们。尽可能使用浅选择器。

6.避免某些CSS属性

某些CSS属性比其他CSS属性要差得多,因此应谨慎使用。这些是要注意的一些属性:

  • border-radius
  • box-shadow
  • filter
  • :nth-child
  • position: fixed;
  • transform

在各处使用上述属性不是问题,但是如果它们在每页中出现数百次,那么您的总体CSS性能可能会受到影响。

7.避免 @import

切勿使用该@import指令包含外部样式表,因为它会阻止并行下载。这是一种古老的做法。相反,请始终使用链接标记。

摘要

网页加载完成后,无论外观如何令人眼花,乱,如果访问者在此之前转身离开,则您所做的一切都无关紧要。将上述策略整合到您的编码中,将使您能够构建渲染速度更快,性能更一致的网站,这将鼓励新访客不断回来。

本站文章禁止转载,违者必究
阅 135
0

级联样式表可以将无聊的HTML文档转换为动态网页,但是随意使用CSS可能会使网站瘫痪,甚至无法开始呈现。本指南 […]

湘公网安备 43011102001693号

    湘ICP备19003021号-1