字体图标加载速度很慢

Question

我一直在对我的网站进行故障排除，因为页面加载速度非常缓慢。由于该网站作为博客服务，每篇博客文章都有分享图标，因此每个页面都有多个图标。通过移除Font Awesome字体，我发现网站速度极大提升。现在我不确定该怎么办，因为我需要这些图标。有什么建议吗？

更新： 我尝试使用自己的服务器和CDN，但结果相同。

- Darth Vader

---

是的，我也尝试从我的服务器加载，但出现了同样的问题。 - Darth Vader

@luke 无论我是从CDN还是从服务器加载，我得到的结果都是一样的。我是在页眉顶部加载的。 - Darth Vader

尝试将此代码加载到您的头文件中，看看它是否可以加速。这将异步加载FA。请告诉我结果。<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script> - luke

谢谢，我会试一下这个。 - Darth Vader

@luke 嗯，看起来可以，非常感谢。 - Darth Vader

Answer 1

将这个记在脑海中：

Load this into your head:

<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>

这到底是做什么的？

它通过放置在页面头部的JavaScript加载Font Awesome。基本上，我们在呈现页面之前呈现Font Awesome，这意味着它应该更快地加载。

- luke

---

你介意分享一下这种方法相比默认安装方法有什么优势吗？ - Matt

它通过位于页面头部的JavaScript加载字体awesome，阻止了加载直到运行。在早期，脚本必须放在页面底部以允许页面渲染，因为脚本会阻塞加载。通过这种方式，在呈现页面之前加载字体。 - Christopher Shaw

我会使用此处引用的链接来保持开发的最新状态：https://www.bootstrapcdn.com/fontawesome/ - Thomas Mondel

在使用答案中提供的原始链接时，我发现有些图标无法加载，特别是fa-education。更新@ThomasMondel提供的链接非常有效。 - sss

这真是太棒了。速度的提升非常惊人。每次页面重新加载时，我的导航栏中的图标都会闪烁，无论这些图标是否已被本地保存，现在只有在进行硬刷新时才能完全消除这个问题。 - nihilok

Answer 2

你是否已经开启了缓存？ 在Apache服务器上，你可以在你的.htaccess文件中添加以下内容：

 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"

要了解如何加速您的网站，您可以在以下链接进行测试：https://developers.google.com/speed/pagespeed/insights/

- KIMB-technologies