Fontawesome 减慢页面加载时间

Question

我有一个安装了“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？

Answer 1

尽管它是一个极好的资源，但您可能不需要整个FontAwesome字体文件。我经常使用该文件中可用的 10 个字形。如果您加载整个字体（例如 7,000 个字形），那么您正在绘制不必要的系统资源来定义您永远不会使用的 6,990 个字形。答案：子集你的字体，优秀的程序员！为此，我使用了字体子集服务。他们往往是免费的，并且在他们的网站上有易于遵循的说明。有几个，但你可以试试 fontello：http ://fontello.com我刚刚查看了我在一个网站上使用的一组相当大的图标，大小为 44KB。微小的。快速地。如果您有任何问题，请告诉我。

Answer 2

您是否考虑过将代码放在页脚中？一些网站声称这会增加加载时间。或者，关于选择默认字体，是的 - 通过修改 CSS 或更改主题选项中的字体。你应该可以在那里改变它......我不熟悉你的主题抱歉我不能更具体。

Answer 3

您需要执行两个步骤来解决此问题。第一步：进入外观->主题编辑器->framework/dist/css/site/stacks/(yourstacks).css 寻找@font-face并替换为font-display:swap；第二步：进入外观->主题编辑器->框架->字体->font_awesome在字体标签里面插入这行代码 font-display=“swap”;