以下是我如何将网站性能提高 21% 的方法！

AWS GenAI 直播！

PS：根据这篇文章的评论和反馈，这篇文章已经做了很多更新

因此，几天来，我一直热衷于如何提高这个网站的性能，然后我发现了一个非常简单且重要的技巧，我们将在这里讨论。

Fontawesome

我从来没有真正喜欢过直接在 html 文件中添加 SVG 或使用图像标签来调用它。我最好的办法一直是 Font Awesome CDN，直到最近我发现了页面性能衡量标准，然后我意识到，对于在多页网站上使用的几个图标，调用整个 FontAwesome CDN 实际上很糟糕。

在本地加载 FontAwesome。

我浏览阅读了一些关于 FontAwesome 并在本地加载它的文章，然后我偶然发现了这个特殊的解决方案，它的作者实际上值得一提，🎉 Balasubramani M。

如何在本地正确加载 FontAwesome

阅读解决方案后，我开始实施它，但有一些您也可以做的怪癖。

1. 下载 FontAwesome 包 v5.1。或更高版本 FontAwesome 包 v5.1 整体大小约为 12mb（不用担心，我们不会全部用完！）
2. 解压或提取文件。下载完成后，你需要使用任何可以提取zip文件的工具来解压或提取文件（右键单击下载的文件，Windows默认的提取选项可用）。
3. 打开刚刚解压的文件夹。解压完成后，您将看到一个新创建的文件夹，其中包含所有 FontAwesome v5.1 文件和依赖项。
4. 将 all.min.css 复制到你的 CSS 文件夹。双击该文件夹即可查看包含这些文件的所有子文件夹。双击 CSS 文件夹，你将看到一个名为 all.min.css 的文件。复制此文件，前往你的项目目录，找到并粘贴到现有 CSS 文件所在的位置。
5. 将 Webfonts 文件夹复制到项目目录导航回 FontAwesome v5.1 解压的文件夹，双击查看文件夹，然后复制名为 web fonts 的文件夹。进入项目目录并将 web fonts 文件夹粘贴到也包含 CSS 文件的目录中作为直接子目录。下图中的示例工作树public是包含 CSS 的父目录：6.将项目目录中复制的 all.min.css 重命名为 fontawesome.min.css。这对于在将此样式表调用到 HTML 文件中时轻松识别特别有用。 7.更改 HTML/PHP 文件：成功完成所有上述步骤后，就可以更改 HTML 文件以在本地使用 font-awesome 了。浏览所有调用 FontAwesome CDN 的文件，然后从中进行以下更改：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

到你现在粘贴的 fontawesome.min.css 项目目录中的位置。代码示例：

<!-- FONTAWESOME -->
  <link rel="stylesheet" href="./public/css/fontawesome.min.css"/>

就这样！

我很高兴看到您关于成功实现这一点的评论。

🎉 感谢加入！

资源

• 解决方案参考帖子：https://stackoverflow.com/a/52296664

• 下载 FontAwesome v5.1：https://use.fontawesome.com/releases/v5.3.1/fontawesome-free-5.3.1-web.zip