Fontawesome 减慢页面加载时间答案

【问题标题】：Fontawesome slowing down page load timeFontawesome 减慢页面加载时间
【发布时间】：2019-12-29 19:04:13
【问题描述】：

我有一个安装了“baskerville 2”主题的 Wordpress 网站。我一直在使用谷歌页面速度洞察来评估我的网站的加载速度。它告诉我字体很棒的 Webfont 预加载请求正在减慢它的速度。我添加了：

<link rel=”preload” href=”https://dsbaudio.com/wp-content/themes/baskerville-2/fontawesome/fontawesome-webfont.woff2?v=4.3.0” as=”font” crossorigin=”anonymous”>

发送至header.php，这对情况有所改善。

如果我理解正确，如果主题根本没有预加载网络字体，网站加载速度会快很多吗？

有没有办法修改主题（使用离线编辑的子主题）以将其恢复为标准字体，如 Arial、Times 或 Georgia？

【问题讨论】：

标签： php wordpress themes webfonts

【解决方案1】：

您是否考虑过将代码放在页脚中？一些网站声称这会增加加载时间。

另外，关于选择默认字体，是的 - 通过修改 CSS 或更改主题选项中的字体。你应该可以在那里改变它......我不熟悉你的主题，抱歉我不能更具体。

【讨论】：

谢谢 - 尝试将代码添加到页脚，但并没有太大的不同。
我知道这不是“最佳”选项，但它是迄今为止最常见和最简单的。祝你好运。 @parapluie 也提供了一个不错的选择。

【解决方案2】：

虽然它是一个极好的资源，但您可能不需要整个 FontAwesome 字体文件。

我经常使用该文件中可用的 10 个字形。如果您加载整个字体（例如 7,000 个字形），那么您将绘制不必要的系统资源来定义您永远不会使用的 6,990 个字形。

答案：

子集你的字体，优秀的程序员！

为此，我使用了字体子集服务。他们往往是免费的，并且在他们的网站上有易于遵循的说明。有几个，但你可以试试 fontello：http://fontello.com

我刚刚查看了我在一个网站上使用的一组相当大的图标，大小为 44KB。微小的。快。

如果您有任何问题，请告诉我。

【讨论】：

这听起来可以解决问题。我担心 - 至少目前 - 编辑 woff2 字体文件，所以我的计划是将其转换为 .tiff，用 fontforge 编辑掉我不需要的所有字体，然后转换回 woff2 并替换原始文件。
@DSB 我的意见是这样也行不通。这当然不是最直接/最安全的路线，因为大多数字体子集（包括 fontello）实际上都包含一个子集woff2。我更喜欢上面详述的子设置方法，因为它 1. 更快更容易（请注意，我也知道处理 tiff 文件的方法），2. 它尊重 FontAwesome 开发人员所做的工作质量，以及3. 它是模块化的并且可以很容易地更新，如果您添加新的字形或者如果 FontAwesome 团队更新您使用的字形。即使你是 fontforge 大师，下一个开发者也可能不是。
是的，你是对的 - 无论如何，这种方法效果不太好！我看了一下 Fontello - 我已经加载了 svg 文件，但我对接下来应该做什么有点无能为力......真的有点超出我的深度。老实说，我对 fontawesome 中的一般字体并不满意，而且我当然不需要所有这些字形！我宁愿拥有通常的网络字体，如 arial 等。恰好 fontawesome 与我正在使用的主题一起出现。我想我应该考虑在我的 css 中自定义字体 - 对我来说，这需要一个陡峭的学习曲线！
任何开箱即用的框架或主题都会比所需的开销更大：这是野兽的本性。如果您可以阻止主题加载字体，然后使用您自定义的css 加载子设置的字体文件，那么这可能是减轻系统负载的方法。让我知道你想出了什么。接下来几天我将在机场，但之后可以回答任何问题。

【解决方案3】：

您需要执行两个步骤来解决此问题。

第一步：转到外观 -> 主题编辑器 ->framework/dist/css/site/stacks/(yourstacks).css 查找 @font-face 并替换为 font-display:swap;

第二步：进入外观->主题编辑器->框架->字体->font_awesome

在字体标签内插入这行代码字体显示=“交换”；

【讨论】：