Comment réduire le temps de chargement de FontAwesome et augmenter la vitesse du site Web

Dans cet article, je vais vous montrer comment vous pouvez réduire le temps de chargement de FontAwesome en retardant le chargement des feuilles de style.

Font Awesome est une bibliothèque d'icônes populaire qui fournit une large gamme d'icônes vectorielles évolutives qui peuvent être facilement personnalisées et utilisées dans des projets de développement Web. Lorsqu'un site Web utilise des feuilles de style de police géniales pour les icônes, cela ralentit généralement considérablement la vitesse car le navigateur doit télécharger la police à partir d'un serveur tiers. Dans ce processus, il empêche les ressources critiques d'être chargées en premier et réduit les scores d'informations sur la vitesse de la page.

Vous avez peut-être rencontré des erreurs telles que Réduire les CSS inutilisés , Réduire les ressources bloquant le rendu ou Éviter de chaîner les requêtes critiques en raison du code génial de la police.

Donc, la solution est soit de changer les icônes de police géniales avec des icônes SVG, soit de retarder leur chargement. Il n'est pas toujours possible d'échanger complètement des icônes avec des icônes SVG, mais nous pouvons facilement retarder le chargement de la feuille de style Font Awesome et augmenter la vitesse de chargement du site Web.

Comment retarder les icônes Font-awesome dans Blogger?

Pour retarder les icônes de police géniales, vous devez d'abord identifier la version utilisée sur votre site Web.

Vous pouvez simplement rechercher ( CTRL + F ) pour font-awesome dans le code du thème et le supprimer de votre thème.

Utilisez maintenant le script ci-dessous et remplacez-le par le code source de font-awesome avec la bonne 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>

Si vous avez plusieurs codes de police impressionnants, il utilise à la fois l'importation et les feuilles de style, vous devez utiliser le script ci-dessous avec les deux liens source.

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

Maintenant, utilisez l'un de ces scripts juste au-dessus de la balise body de fermeture et enregistrez le code. Maintenant, les icônes font-awesome sont chargées paresseusement ou vous pouvez dire retardées de 3 secondes. Vous pouvez ajuster cette valeur dans le script ci-dessus.

Charger la bibliothèque Font Awesome de manière asynchrone à l'aide de JavaScript

Et si vous ne voulez pas retarder les icônes font-awesome, vous pouvez charger la bibliothèque Font Awesome de manière asynchrone à l'aide de JavaScript. De cette façon, les icônes seront récupérées et rendues après le chargement du contenu critique de la page. Ce ne sera pas aussi efficace que la méthode de délai, mais s'améliorera certainement par rapport à la méthode par défaut.

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

Dans cet exemple, le fichier CSS Font Awesome est chargé de manière asynchrone à l'aide de JavaScript. Ajustez l'URL à l'intérieur de l'attribut link.href pour pointer vers le fichier CSS Font Awesome que vous souhaitez utiliser.

En mettant en œuvre cette approche, le contenu critique de votre page Web se chargera en premier, sans attendre les icônes Font Awesome. Ensuite, les icônes seront chargées de manière asynchrone, ce qui réduira le temps de chargement initial et améliorera la vitesse globale du site Web.

Méthode avancée

Certainement! Une autre méthode pour retarder le chargement des icônes Font Awesome consiste à utiliser l' API Intersection Observer . Cette approche vous permet de charger les icônes uniquement lorsqu'elles deviennent visibles dans la fenêtre d'affichage, ce qui réduit le temps de chargement initial de la page. Voici comment vous pouvez l'implémenter :

Supprimez la feuille de style Font Awesome par défaut comme mentionné dans la méthode précédente.

Ajoutez un élément d'espace réservé pour chaque icône Font Awesome. Cela peut être un simple élément <span> ou <div> .

Utilisez l'API Intersection Observer pour détecter quand les éléments d'espace réservé sont visibles dans la fenêtre. Lorsqu'un élément devient visible, chargez le CSS Font Awesome et remplacez l'espace réservé par l'icône réelle.

Voici un exemple d'implémentation utilisant 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>

Dans cet exemple, nous utilisons l' API Intersection Observer pour détecter quand les éléments d'espace réservé avec la classe font-awesome-placeholder deviennent visibles dans la fenêtre d'affichage. Lorsqu'un élément est visible, nous chargeons dynamiquement le CSS Font Awesome, remplaçons l'espace réservé par l'élément icône réel et arrêtons d'observer cet élément.

Ajustez l'URL à l'intérieur de l'attribut link.href pour pointer vers le fichier CSS Font Awesome que vous souhaitez utiliser. Modifiez également l'attribut data-icon de chaque élément d'espace réservé pour spécifier la classe d'icônes Font Awesome souhaitée.

En utilisant l'API ' Intersection Observer ', les icônes Font Awesome ne seront chargées que lorsqu'elles sont sur le point de devenir visibles, ce qui réduit le temps de chargement initial de la page et améliore la vitesse du site Web.

J'espère que cet article vous aidera à réduire le temps de chargement de FontAwesome et à augmenter la vitesse de chargement du site Web. De cette façon, vous pouvez rendre votre site Web convivial.