CSS Font Awesome 加载速度非常慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35877994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font Awesome is loading very slow
提问by Darth Vader
I have been doing some troubleshooting on my site, because the page load seemed very slow. I have icons on every page, multiple times as the site serves as a blog, and each blog post has share icons. By removing font awesome I noticed an extreme speed boost. Now I am unsure what to do because I need the icons. Any suggestions?
我一直在我的网站上做一些故障排除，因为页面加载看起来很慢。我在每个页面上都有图标，因为该站点用作博客多次，并且每个博客文章都有共享图标。通过删除字体真棒，我注意到了极大的速度提升。现在我不确定该怎么做，因为我需要这些图标。有什么建议？
Update: I tried using my server and I also used CDN but I get the same results.
更新：我尝试使用我的服务器，我也使用了 CDN，但我得到了相同的结果。
回答by luke
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>
What does this do exactly? Well it loads font awesome via javascript which is placed at the head of the page. Basically we are rendering font awesome before rendering the page which means it should load quicker.
这究竟是做什么的？好吧，它通过位于页面头部的 javascript 加载了很棒的字体。基本上我们在渲染页面之前渲染字体真棒，这意味着它应该加载得更快。
回答by KIMB-technologies
Have to turned on the cache? On an Apache Server you can add to your .htaccess:
必须开启缓存吗？在 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"
To get an overview about how to speed up your website you can test it at: https://developers.google.com/speed/pagespeed/insights/
要大致了解如何加快网站速度，您可以在以下网址进行测试：https: //developers.google.com/speed/pagespeed/insights/
