7 个 CSS 优化技巧，加速页面加载 + CSS 工具列表

全球 CSS 列表

在现代网络中，网站页面加载时间是最重要的指标之一。即使是几毫秒的延迟也会对您的盈利产生巨大影响，而缓慢的页面加载速度很容易损害您的转化率。您可以使用许多工具和技术来加速您的网站。在本文中，我们将介绍一些可用于提升界面性能的最佳 CSS 优化技巧。

1. 查找性能瓶颈

对于所有类型的优化来说，最重要的是从彻底的审核开始。幸运的是，有许多 CSS 诊断工具可以帮助您找到性能瓶颈。首先，您可以使用浏览器中的“开发者工具”来检查数据加载速度。在大多数浏览器中，您可以按 F12 键打开开发者工具。

例如，在 Firefox/Chrome 浏览器的“开发者工具”中，您可以使用“网络”选项卡查看页面上所有 CSS 文件的大小和加载时间。您还可以检查 CSS 文件的加载速度（无论是否使用缓存）。由于外部 CSS 文件（例如 Google Fonts 字体文件和从第三方 CDN 服务器下载的 CSS 文件）会显示在这里，因此您通常可以使用它来分析网站速度和界面性能。例如，Pingdom 工具会在您运行简单的网站速度测试时提供一些有用的 CSS 优化技巧。

2. 最小化并压缩 CSS 文件

大多数网站使用多个 CSS 文件。虽然在大多数情况下使用模块化 CSS 文件被认为是最佳解决方案，但加载每个单独的 CSS 文件可能需要一些时间。正因如此，有一些工具可以最小化和压缩 CSS。如果您合理使用它们，可以显著缩短页面加载时间。

有一些在线服务，例如 CSS Minify，允许你通过简单地复制 CSS 文件并将其压缩成简单的格式来压缩它。这类服务对于小型项目来说效果很好。然而，对于包含大量 CSS 文件的大型项目来说，使用它们可能会很繁琐且耗时。在这种情况下，最好优先考虑自动化解决方案。

如今，大多数构建工具都支持自动压缩。例如，Webpack 默认会将所有项目文件以最小化的包形式返回。PostCSS 也有一些智能插件，例如 CSS Nano，它不仅可以最小化文件，还能对文件进行许多特殊优化。

3. 使用 Flexbox 和 CSS Grid

如果您在编写 CSS 时仍然完全依赖传统的块模型，并使用边距、填充和浮动来对齐页面上的元素，那么您应该考虑切换到更高级的方法，即 Flexbox 和 CSS Grid。它们允许您用更少的代码实现复杂的布局。

使用旧方法，即使是像垂直居中元素这样简单的事情，你也需要使用很多技巧。然而，这并不适用于 Flexbox 和 CSS Grid。虽然学习新方法可能需要一些时间，但这是值得的，因为你的 CSS 文件大小会大大减小。对于 Flexbox 来说尤其如此，它目前拥有非常良好的浏览器支持率（全球 98.3%）。

尽管 CSS Grid 并没有得到很好的浏览器支持（全球范围内为 92.03%），但如果您不需要支持旧版浏览器或准备实现回退，那么您可以使用这种方法。

4. 使用标签代替规则@import

将 CSS 文件加载到网页主要有两种方法：

将 HTML 页面添加到

您需要在主 CSS 文件的顶部添加 @import 标记。大多数情况下，这种方法用于加载字体和其他设计元素等小型资源。乍一看，这似乎是一个不错的解决方案，然而，与 HTML 页面直接使用 @import 标签加载样式表相比，浏览器加载其他样式表所需的时间要长得多。

在向 HTML 页面添加多个 CSS 文件时，请务必考虑 CSS 的特异性。首先使用一个通用样式表，然后再指定更具体的样式表。您需要遵循此原则，因为后续添加的样式表会覆盖先前 CSS 文件的规则。以下 CSS 文件按正确顺序添加的示例：

5. 使用渐变和 SVG 代替图像

上传网页上的所有图片可能非常耗时。为了缩短上传时间，开发人员使用了许多图片优化方法，例如从外部 CDN 加载图片或使用 TinyJPG 等图片压缩工具。这些解决方案可能很有帮助，但在某些情况下，可以使用 CSS 效果来替代占用大量资源的 JPG 和 PNG 图片。

例如，您可以使用渐变来代替巨大的背景图片，因为巨大的背景图片可能会稍微降低页面访问者的浏览速度。您可以使用 CSS 渐变函数来创建线性、径向和重复渐变。使用这些内置的 CSS 函数，您不仅可以指定颜色，还可以指定渐变的角度。

例如，以下规则创建了一个漂亮的渐变背景，其加载速度比任何图像都要快得多：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

对于更复杂的渐变和纹理，您还可以使用生成器，例如 CSSmatic（如下图所示）和 ColorZilla。

除了渐变色之外，您还可以用可缩放矢量图形 (SVG) 替换传统的 JPG 和 PNG 图像。它不仅加载速度更快，而且只需下载一个版本的图像。这是因为 SVG 图像本身就是矢量格式，可以缩放到任意大小而不会损失质量。此外，您还可以像处理普通 HTML 文件一样，使用 CSS 为 SVG 图像添加样式。

6. 避开规则！重要

虽然 !Important 规则在某些情况下确实有用，但它应该只作为最后的手段使用。此规则会引发级联异常。也就是说，当你在 CSS 声明中添加 !Important 时，它会覆盖所有其他声明，即使是那些更具体的声明。其语法如下：

h1 {
   margin-bottom: 20px !important;
}

如果 CSS 中存在大量 ! 重要规则，用户的浏览器将不得不在代码中执行额外的检查，这可能会进一步降低页面速度。建议不要在整个网站或创建主题或插件时使用 ! 重要规则。如果可能，请仅在需要覆盖第三方库的 CSS 时使用此规则。

7. CSS重构

虽然重构 CSS 并非易事，但它通常可以显著提升网站性能。例如，当您的 CSS 文件过大、代码库过时，或者页面加载时间过长，严重影响转化率时，CSS 重构的目标是让您的代码更优雅、更易于维护、加载速度更快。

CSS 重构是一个多步骤的过程，需要分析 CSS 代码的各个方面。您需要检查以下几点：

- 是否存在未使用或重复的 CSS 规则或资源
- 是否可以使用更现代的技术，例如 Flexbox 和 CSS Grid
- 是否使用了过多的特异性（可以使用视觉特异性计算器来计算）
- CSS 文件的结构是否组织得当（例如，维护较小的文件比维护较大的文件更容易）
- 我应该开始使用自动构建工具吗

在开始重构之前，请设定可衡量的目标，并选择指导您的标准，例如页面加载速度或首次渲染内容的时间，以便您可以比较其前后的值。

另外，记得使用版本控制系统，例如 Git。这样，如果出现问题，你可以返回到代码的先前版本。

总结

您可以使用许多 CSS 优化技巧来提升网站的性能。大多数技巧都易于实施，但会显著影响页面的加载时间。更快的页面加载速度不仅可以提高可用性，还有助于提升您在 Google 和其他搜索引擎上的排名。

除了最佳的 CSS 优化实践之外，您还可以使用其他加载加速技术，例如缓存、Google AMP 和 HTTPS 协议。

全球 CSS 列表

全球有用的 CSS 列表：开发人员工具

manish srivastava ・ 2020年4月18日

#css #javascript #教程

我希望大家喜欢上面的文章并且学到一些东西。

面向 DESI（外行）语言极端初学者的 DOCKER :)

面向 Desi（外行）语言极端初学者的 Docker :)

manish srivastava ・ 2020年6月2日

#docker #linux #javascript #css

IMP 请求：

非常欢迎您通过加入表格加入我的团队。

如果您能帮助保护人类免受冠状病毒等各种疾病侵害的开源项目，我们也非常欢迎您加入开源智能系统 (OSINT)。

https://github.com/Manishfoodtechs/OSINTHRH/wiki

联系邮箱：Manishfoodtechs@gmail.com。

如果您有任何问题，我们的团队也提供专业的咨询和交付。