So reduzieren Sie die Ladezeit von FontAwesome und steigern die Website-Geschwindigkeit

In diesem Artikel zeige ich Ihnen, wie Sie die Ladezeit von FontAwesome verkürzen können, indem Sie das Laden von Stylesheets verzögern.

Font Awesome ist eine beliebte Symbolbibliothek, die eine große Auswahl an skalierbaren Vektorsymbolen bietet, die einfach angepasst und in Webentwicklungsprojekten verwendet werden können. Wenn eine Website Font-Awesome-Stylesheets für Symbole verwendet, verlangsamt sich die Geschwindigkeit im Allgemeinen erheblich, da der Browser die Schriftart von einem Drittanbieter-Server herunterladen muss. Dabei wird verhindert, dass die kritischen Assets zuerst geladen werden, und die Erkenntnisse zur Seitengeschwindigkeit werden reduziert.

Möglicherweise sind Ihnen Fehler wie „Nicht verwendetes CSS reduzieren “, „Renderblockierende Ressourcen reduzieren “ oder „Verkettung kritischer Anforderungen aufgrund von Schriftarten-Awesome-Code vermeiden“ aufgefallen.

Die Lösung besteht also darin, entweder die schriftartbeeindruckenden Symbole durch SVG-Symbole zu ersetzen oder das Laden zu verzögern. Es ist nicht immer möglich, Symbole vollständig durch SVG-Symbole zu ersetzen, aber wir können das Laden des Font-Stylesheets leicht verzögern und die Ladegeschwindigkeit der Website erhöhen.

Wie verzögere ich schriftartgefährliche Symbole in Blogger?

Um die Schriftart-Icons zu verzögern, müssen Sie zunächst die auf Ihrer Website verwendete Version identifizieren.

Sie können einfach im Theme-Code nach „font-awesome“ suchen ( STRG + F ) und diese aus Ihrem Theme entfernen.

Verwenden Sie nun das folgende Skript und ersetzen Sie es durch den Quellcode von „font-awesome“ mit der richtigen Version.

 <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>

Wenn Sie über mehrere Schriftarten verfügen, die sowohl Import- als auch Stylesheets verwenden, müssen Sie das folgende Skript mit beiden Quelllinks verwenden.

 <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>

Verwenden Sie nun eines dieser Skripte direkt über dem schließenden Body-Tag und speichern Sie den Code. Jetzt werden die schriftartgeilen Symbole verzögert geladen, oder Sie können sagen, um 3 Sekunden verzögert. Sie können diesen Wert im obigen Skript anpassen.

Laden Sie die Font Awesome-Bibliothek asynchron mit JavaScript

Und wenn Sie die Font-Awesome-Symbole nicht verzögern möchten, können Sie die Font Awesome-Bibliothek asynchron mit JavaScript laden. Auf diese Weise werden die Symbole abgerufen und gerendert, nachdem der kritische Inhalt der Seite geladen wurde. Dies ist nicht so effektiv wie die Verzögerungsmethode, bietet aber definitiv eine Verbesserung gegenüber der Standardmethode.

 <!-- 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>

In diesem Beispiel wird die CSS-Datei „Font Awesome“ asynchron mithilfe von JavaScript geladen. Passen Sie die URL im Attribut „link.href“ so an, dass sie auf die Font Awesome CSS-Datei verweist, die Sie verwenden möchten.

Durch die Implementierung dieses Ansatzes werden die kritischen Inhalte Ihrer Webseite zuerst geladen, ohne auf Font Awesome-Symbole warten zu müssen. Anschließend werden die Symbole asynchron geladen, wodurch die anfängliche Ladezeit verkürzt und die Gesamtgeschwindigkeit der Website verbessert wird.

Fortgeschrittene Methode

Sicherlich! Eine weitere Methode, das Laden von Font Awesome-Symbolen zu verzögern, ist die Verwendung der Intersection Observer API . Mit diesem Ansatz können Sie die Symbole erst dann laden, wenn sie im Ansichtsfenster sichtbar werden, wodurch die anfängliche Ladezeit der Seite verkürzt wird. So können Sie es umsetzen:

Entfernen Sie das Standard-Stylesheet „Font Awesome“, wie in der vorherigen Methode erwähnt.

Fügen Sie für jedes Font Awesome-Symbol ein Platzhalterelement hinzu. Dies kann ein einfaches <span> - oder <div> -Element sein.

Verwenden Sie die Intersection Observer-API, um zu erkennen, wann die Platzhalterelemente im Ansichtsfenster sichtbar sind. Wenn ein Element sichtbar wird, laden Sie das Font Awesome CSS und ersetzen Sie den Platzhalter durch das tatsächliche Symbol.

Hier ist eine Beispielimplementierung mit 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>

In diesem Beispiel verwenden wir die Intersection Observer API , um zu erkennen, wann die Platzhalterelemente mit der Klasse „font-awesome-placeholder“ im Ansichtsfenster sichtbar werden. Wenn ein Element sichtbar ist, laden wir das Font Awesome-CSS dynamisch, ersetzen den Platzhalter durch das tatsächliche Symbolelement und hören auf, dieses Element zu beobachten.

Passen Sie die URL im Attribut „link.href“ so an, dass sie auf die Font Awesome CSS-Datei verweist, die Sie verwenden möchten. Ändern Sie außerdem das data-icon- Attribut jedes Platzhalterelements, um die gewünschte Font Awesome-Symbolklasse anzugeben.

Durch die Verwendung der „ Intersection Observer “-API werden die Font Awesome-Symbole nur dann geladen, wenn sie gerade sichtbar werden, wodurch die anfängliche Ladezeit der Seite verkürzt und die Website-Geschwindigkeit verbessert wird.

Ich hoffe, dass dieser Artikel Ihnen dabei hilft, die Ladezeit von FontAwesome zu verkürzen und die Ladegeschwindigkeit der Website zu steigern. Auf diese Weise können Sie die Kernfunktionen Ihrer Website benutzerfreundlich gestalten.