Font Awesome 5导致网站性能急剧下降问题咨询

我之前帮好几个做WordPress的朋友排查过一模一样的问题，你用的all.js就是核心诱因之一！这个脚本会一次性打包Font Awesome 5的所有图标、动画、工具类，体积大得离谱，再加上你站点有Ajax Load More这类动态加载逻辑，两者叠加直接把性能拖垮了。下面给你几个针对性的解决方案：

1. 立刻换掉all.js，改用按需加载 #

别再用这个包含全量图标的大脚本了，只加载你实际用到的内容：

• 先引入Font Awesome的轻量核心SVG库
• 再单独引入站点实际用到的具体图标（比如只引入fa-user、fa-search这类）
  这么做能把脚本体积压缩90%以上，加载时间直接砍半。

2. 给脚本加异步加载属性 #

如果暂时没法切换按需加载，至少给all.js的引入标签加上async或者defer：

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js" async></script>

同步加载的脚本会阻塞页面渲染和交互，这就是你页面数秒内无法滚动的核心原因——浏览器在等这个大脚本加载完成，才会响应滚动事件。

3. 本地化Font Awesome资源 #

别依赖公共CDN了，把需要的Font Awesome文件下载到你的WordPress主题目录自行托管：

• 避免跨域请求的延迟和潜在的CDN节点故障
• 还能配合WordPress缓存插件（比如WP Rocket）做资源压缩和缓存，进一步提速

4. 优化Ajax Load More的回调逻辑 #

Ajax动态加载内容时，很可能会重复触发Font Awesome的初始化脚本，导致主线程被反复占用。你可以修改Ajax Load More的回调函数，只在首次页面加载或者新内容插入完成后执行一次Font Awesome初始化，避免冗余代码重复执行。

5. 用开发者工具定位具体瓶颈 #

打开浏览器的「Performance」面板，录制一次页面加载过程：

• 看看是不是all.js的加载和解析占用了大量主线程时间
• 检查有没有重复请求Font Awesome资源的情况
• 确认Ajax请求和Font Awesome脚本是否在抢占资源

内容的提问来源于stack exchange，提问作者Timothy D