Cómo reducir el tiempo de carga de FontAwesome y aumentar la velocidad del sitio web

En este artículo, le mostraré cómo puede reducir el tiempo de carga de FontAwesome al retrasar la carga de las hojas de estilo.

Font Awesome es una biblioteca de íconos popular que proporciona una amplia gama de íconos vectoriales escalables que se pueden personalizar y usar fácilmente en proyectos de desarrollo web. Cuando un sitio web utiliza hojas de estilo impresionantes de fuentes para iconos, generalmente reduce la velocidad significativamente ya que el navegador necesita descargar la fuente de un servidor de terceros. En ese proceso, bloquea los activos críticos para que no se carguen primero y reduce los puntajes de información de velocidad de la página.

Es posible que haya visto errores como Reducir CSS no utilizado , Reducir recursos de bloqueo de procesamiento o Evitar encadenar solicitudes críticas debido a un código impresionante de fuente.

Por lo tanto, la solución es cambiar los íconos impresionantes de fuentes con íconos SVG o retrasar su carga. No siempre es posible intercambiar íconos por completo con íconos SVG, pero podemos retrasar fácilmente la carga de la hoja de estilo impresionante de fuentes y aumentar la velocidad de carga del sitio web.

¿Cómo retrasar los iconos impresionantes de fuentes en Blogger?

Para retrasar los iconos impresionantes de fuentes, primero debe identificar la versión utilizada en su sitio web.

Simplemente puede buscar ( CTRL + F ) para font-awesome en el código del tema y eliminarlo de su tema.

Ahora use el siguiente script y reemplácelo con el código fuente de font-awesome con la versión correcta.

 <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 tiene varios códigos de fuentes impresionantes, utiliza tanto la importación como las hojas de estilo, entonces debe usar el siguiente script con ambos enlaces de origen.

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

Ahora, use uno de estos scripts justo encima de la etiqueta del cuerpo de cierre y guarde el código. Ahora los íconos de fuente impresionante se están cargando lentamente o puede decir retrasado por 3 segundos. Puede ajustar este valor en el script anterior.

Cargue la biblioteca Font Awesome de forma asíncrona usando JavaScript

Y si no desea retrasar los íconos impresionantes de fuentes, puede cargar la biblioteca Font Awesome de forma asíncrona usando JavaScript. De esta manera, los íconos se recuperarán y se procesarán después de que se haya cargado el contenido crítico de la página. Esto no será tan efectivo como el método de retraso, pero definitivamente mejorará el predeterminado.

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

En este ejemplo, el archivo CSS de Font Awesome se carga de forma asincrónica mediante JavaScript. Ajuste la URL dentro del atributo link.href para que apunte al archivo CSS de Font Awesome que desea usar.

Al implementar este enfoque, el contenido crítico de su página web se cargará primero, sin esperar los íconos de Font Awesome. Luego, los iconos se cargarán de forma asíncrona, lo que reducirá el tiempo de carga inicial y mejorará la velocidad general del sitio web.

Método Avanzado

¡Ciertamente! Otro método para retrasar la carga de los íconos de Font Awesome es usar la API Intersection Observer . Este enfoque le permite cargar los íconos solo cuando se vuelven visibles en la ventana gráfica, lo que reduce el tiempo inicial de carga de la página. Así es como puedes implementarlo:

Elimine la hoja de estilo Font Awesome predeterminada como se mencionó en el método anterior.

Agregue un elemento de marcador de posición para cada icono de Font Awesome. Puede ser un simple elemento <span> o <div> .

Utilice la API Intersection Observer para detectar cuándo los elementos de marcador de posición están visibles en la ventana gráfica. Cuando un elemento se vuelva visible, cargue el CSS de Font Awesome y reemplace el marcador de posición con el ícono real.

Aquí hay un ejemplo de implementación usando 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>

En este ejemplo, usamos la API Intersection Observer para detectar cuándo los elementos de marcador de posición con la clase font-awesome-placeholder se vuelven visibles en la ventana gráfica. Cuando un elemento está visible, cargamos el CSS de Font Awesome dinámicamente, reemplazamos el marcador de posición con el elemento del icono real y dejamos de observar ese elemento.

Ajuste la URL dentro del atributo link.href para que apunte al archivo CSS de Font Awesome que desea usar. Además, modifique el atributo de icono de datos de cada elemento de marcador de posición para especificar la clase de icono Font Awesome deseada.

Al usar la API ' Intersection Observer ', los íconos de Font Awesome se cargarán solo cuando estén a punto de volverse visibles, lo que reduce el tiempo de carga inicial de la página y mejora la velocidad del sitio web.

Espero que este artículo lo ayude a reducir el tiempo de carga de FontAwesome y aumente la velocidad de carga del sitio web. De esta manera, puede hacer que su sitio web sea compatible con los principales elementos vitales de la web.