如何減少 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 友好。