如何减少 FontAwesome 加载时间并提高网站速度

在本文中，我将向您展示如何通过延迟样式表的加载来减少 FontAwesome 的加载时间。

Font Awesome 是一个流行的图标库，它提供了范围广泛的可缩放矢量图标，可以轻松定制并在 Web 开发项目中使用。 当一个网站为图标使用 font awesome 样式表时，它通常会显着降低速度，因为浏览器需要从第三方服务器下载字体。 在此过程中，它会阻止首先加载关键资产并降低页面速度洞察分数。

您可能已经看到诸如Reduce unused CSS 、 Reduce Render blocking resources或Avoid chaining critical requests due to font awesome code 这样的错误。

因此，解决方案是要么用 SVG 图标切换字体超棒的图标，要么延迟加载它。 用 SVG 图标完全交换图标并不总是可能的，但我们可以轻松地延迟 font awesome 样式表的加载并提高网站加载速度。

如何延迟 Blogger 中超棒的字体图标？

要延迟字体真棒图标，您需要首先确定您网站上使用的版本。

您可以简单地在主题代码中搜索 ( CTRL + F ) font-awesome 并将其从您的主题中删除。

现在使用下面的脚本并将其替换为正确版本的 font-awesome 的源代码。

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link); }, 3000); // Delay of 3 seconds </script>

如果你有多个字体很棒的代码，它同时使用导入和样式表，那么你需要将下面的脚本与两个源链接一起使用。

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link1 = document.createElement('link'); link1.rel = 'stylesheet'; link1.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link1); var link2 = document.createElement('link'); link2.rel = 'stylesheet'; link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css'; document.head.appendChild(link2); }, 3000); // Delay of 3000 milliseconds (3 seconds) </script>

现在，在结束正文标记上方使用这些脚本之一并保存代码。 现在字体很棒的图标正在延迟加载，或者你可以说延迟了 3 秒。 您可以在上面的脚本中调整此值。

使用 JavaScript 异步加载 Font Awesome 库

如果您不想延迟超赞字体图标，那么您可以使用 JavaScript 异步加载超赞字体库。 这样，图标将在页面的关键内容加载后获取并呈现。 这不会像延迟方法那样有效，但肯定比默认方法有所改进。

 <!-- Place this script tag in the head section of your HTML --> <script> // Asynchronous loading of Font Awesome (function() { var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(link, script); })(); </script>

在此示例中，Font Awesome CSS 文件是使用 JavaScript 异步加载的。 调整link.href属性中的 URL 以指向您要使用的 Font Awesome CSS 文件。

通过实施这种方法，您网页的关键内容将首先加载，而无需等待 Font Awesome 图标。 然后，图标将异步加载，减少初始加载时间并提高整体网站速度。

高级方法

当然！ 另一种延迟加载 Font Awesome 图标的方法是使用Intersection Observer API 。 这种方法允许您仅在图标在视口中可见时加载图标，从而减少初始页面加载时间。 以下是您可以如何实施它：

删除上一个方法中提到的默认 Font Awesome 样式表。

为每个 Font Awesome 图标添加一个占位符元素。 这可以是一个简单的<span>或<div>元素。

使用 Intersection Observer API 检测占位符元素何时在视口中可见。 当元素变得可见时，加载 Font Awesome CSS 并将占位符替换为实际图标。

下面是一个使用 JavaScript 的示例实现：

 <!-- Place this script tag in the head section of your HTML --> <script> // Intersection Observer callback function function loadFontAwesome(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Load Font Awesome CSS var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; document.head.appendChild(link); // Replace placeholder with Font Awesome icon var placeholder = entry.target; var iconClass = placeholder.getAttribute('data-icon'); var iconElement = document.createElement('i'); iconElement.className = iconClass; placeholder.parentNode.replaceChild(iconElement, placeholder); // Stop observing this element observer.unobserve(entry.target); } }); } // Set up Intersection Observer var options = { root: null, rootMargin: '0px', threshold: 0.1 }; var observer = new IntersectionObserver(loadFontAwesome, options); // Start observing the placeholder elements var placeholders = document.querySelectorAll('.font-awesome-placeholder'); placeholders.forEach(function(placeholder) { observer.observe(placeholder); }); </script> <!-- Place the placeholder elements wherever needed --> <p>Some content...</p> <span class="font-awesome-placeholder" data-icon="fas fa-heart"></span> <p>Some more content...</p>

在此示例中，我们使用Intersection Observer API来检测类font-awesome-placeholder的占位符元素何时在视口中可见。 当一个元素可见时，我们动态加载 Font Awesome CSS，用实际的图标元素替换占位符，并停止观察该元素。

调整link.href属性中的 URL 以指向您要使用的 Font Awesome CSS 文件。 此外，修改每个占位符元素的数据图标属性以指定所需的 Font Awesome 图标类。

通过使用“ Intersection Observer ”API，Font Awesome 图标将仅在它们即将可见时加载，从而减少页面的初始加载时间并提高网站速度。

我希望本文能帮助您减少 FontAwesome 加载时间并提高网站加载速度。 通过这种方式，您可以使您的网站核心 web vitals 友好。