仅使用 CSS 将我的 PageSpeed 得分从 92% 提高到 100%

这篇文章最初发布在我的个人博客上，网址为https://omarsinan.com/blog/increasing-my-pagespeed-score-from-92-to-100-using-css-only

在这篇博文中，我将向您展示如何仅使用 CSS 将我的个人网站的 PageSpeed 得分从 92% 提高到 100%，并平均减少 0.3 秒的加载时间！

让我们讨论一下 CSS 精灵

这里的诀窍是使用 CSS 精灵图。过去几天，我浏览了 Twitter 上关注的人们的作品集，发现了一些规律。很多人并没有使用 CSS 精灵图。

那么，什么是 CSS 精灵图？与其他精灵图表一样，CSS 精灵图是单个图像文件中包含图标/图像的集合。假设您的网站上有一个社交媒体图标栏。与其将所有图标都放在一张图片中，不如创建一个所有图标之间间隔 1 像素的图像，如下所示：

CSS 精灵有何益处？

好吧，您不需要为 6 个社交媒体图标发出 6 个请求，而是为精灵表发出 1 个请求，然后通过使用 CSS，您可以适当地切割图像，以便可以从一个图像创建 6 个独立的图像。

我还能够将页面加载速度平均降低 0.3 秒，并将 Google PageSpeed 得分提高 8%（从 92% 提高到 100%）

兼容所有主流浏览器

这里使用的 CSS 属性是 background-position 属性，所有主流浏览器都支持该属性，如下所示：

如何使用它们？

它们使用起来非常简单，一旦你创建了一张图片，其中所有图标之间的间隔为 1 像素（你可以使用任何照片编辑软件或应用程序，例如 Figma 和 Sketch），你就创建一个 div，其宽度为 1 个图标的宽度，假设它是 26px，高度为 1 个图标的高度，假设它是 30px，然后将 div 的背景设置为位于 x y 处的图片 URL。其中 x 是 background-position-x 属性，y 是 background-position-y 属性。下面是我在个人网站 ( https://omarsinan.com/ )上设置 div 样式的示例。

<div class="githubSocial"></div>
<div class="linkedinSocial"></div>
<div class="devSocial"></div>
<div class="twitterSocial"></div>
<div class="rssSocial"></div>
<div class="resumeSocial"></div>

div {
    display: inline-block;
    height: 30px;
}

.github-social {
    width: 26.25px;
    background: url($url) 0 0;
}

.linkedin-social {
    width: 26.25px;
    background: url($url) -27.25px 0;
}

.dev-social {
    width: 26.25px;
    background: url($url) -54.5px 0;
}

.twitter-social {
    width: 26.25px;
    background: url($url) -81.75px 0;
}

.rss-social {
    width: 26.25px;
    background: url($url) -109px 0;
}

.resume-social {
    width: 22.5px;
    background: url($url) -136.25px 0;
}

正如你所见，它非常简单。我在 CSS 中使用了 background 属性，并采用了将其与 background-position 属性合并的简写形式，写在一行中。它可以拆分成两行，效果也一样。

它看起来仍然相同，因此采用这种方法没有任何缺点：

下一步是什么？

请访问https://web.dev/fast/，那里有更多关于如何提高网站加载速度的技巧。另外，尽量使用 .webp 格式的图片，如果图片质量不成问题，可以把图片质量降低到 80% 左右。

f_auto使用 Cloudinary 之类的工具可以通过使用选择最佳格式的参数和q_auto选择最佳质量的参数使这变得非常容易。

通过遵循https://web.dev中列出的许多技巧，我能够将网站的加载时间从最初的 2.1 秒缩短到 1.3 秒。这是一个显著的改进，对于您的网站来说，效果可能更加显著！

如果您决定使用 CSS 精灵，请与我分享您的结果和想法，我很乐意看到它对您的网站所做的改变。

你也可以通过 Twitter 与我联系@oohsinan