FontAwesome の読み込み時間を短縮し、ウェブサイトの速度を上げる方法
公開: 2023-05-16この記事では、スタイルシートの読み込みを遅らせて FontAwesome の読み込み時間を短縮する方法を説明します。
Font Awesome は、Web 開発プロジェクトで簡単にカスタマイズして使用できる、スケーラブルなベクター アイコンを幅広く提供する人気のアイコン ライブラリです。 Web サイトでアイコンに font Excellent スタイルシートを使用すると、ブラウザーがサードパーティのサーバーからフォントをダウンロードする必要があるため、通常、速度が大幅に低下します。 そのプロセスでは、重要なアセットが最初に読み込まれることがブロックされ、ページ速度の洞察スコアが低下します。
「未使用の CSS を減らす」 、 「レンダリングをブロックするリソースを減らす」、「フォントの素晴らしいコードによるクリティカルなリクエストの連鎖を避ける」などのエラーが発生したことがあるかもしれません。
したがって、解決策は、素晴らしいフォントアイコンを SVG アイコンに切り替えるか、SVG アイコンの読み込みを遅らせることです。 アイコンを SVG アイコンと完全に交換することは必ずしも可能ではありませんが、フォント素晴らしいスタイルシートの読み込みを簡単に遅らせ、Web サイトの読み込み速度を向上させることができます。
Blogger で Font-awesome アイコンを遅らせるにはどうすればよいですか?
フォントの素晴らしいアイコンを遅らせるには、まず Web サイトで使用されているバージョンを特定する必要があります。
テーマコード内で font-awesome を検索 ( CTRL + F ) するだけで、それをテーマから削除できます。
次に、以下のスクリプトを使用して、適切なバージョンの 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>
インポートとスタイルシートの両方を使用する font-awesome コードが複数ある場合は、両方のソース リンクで以下のスクリプトを使用する必要があります。
<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>
ここで、body 終了タグのすぐ上でこれらのスクリプトの 1 つを使用し、コードを保存します。 現在、素晴らしいフォントのアイコンが遅延読み込みされており、3 秒遅れているとも言えます。 この値は上記のスクリプトで調整できます。
JavaScript を使用して Font Awesome ライブラリを非同期的にロードする
また、Font Awesome アイコンの表示を遅らせたくない場合は、JavaScript を使用して Font Awesome ライブラリを非同期的にロードできます。 こうすることで、ページの重要なコンテンツが読み込まれた後にアイコンが取得されてレンダリングされます。 これは遅延方法ほど効果的ではありませんが、デフォルトの方法よりは確実に改善されます。
<!-- 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 アイコンを待たずに、Web ページの重要なコンテンツが最初に読み込まれます。 その後、アイコンは非同期で読み込まれるため、初期読み込み時間が短縮され、Web サイト全体の速度が向上します。
高度な方法
そうです! Font Awesome アイコンの読み込みを遅らせるもう 1 つの方法は、 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 ファイルを指すようにします。 また、各プレースホルダー要素のdata-icon属性を変更して、目的の Font Awesome アイコン クラスを指定します。
「 Intersection Observer 」 API を使用すると、Font Awesome アイコンが表示される直前にのみ読み込まれるため、ページの初期読み込み時間が短縮され、Web サイトの速度が向上します。
この記事が FontAwesome の読み込み時間を短縮し、Web サイトの読み込み速度を上げるのに役立つことを願っています。 このようにして、Web サイトのコアとなる Web Vitals をフレンドリーにすることができます。