Como reduzir o tempo de carregamento do FontAwesome e aumentar a velocidade do site

Neste artigo, mostrarei como reduzir o tempo de carregamento do FontAwesome atrasando o carregamento das folhas de estilo.

Font Awesome é uma biblioteca de ícones popular que fornece uma ampla gama de ícones vetoriais escaláveis ​​que podem ser facilmente personalizados e usados ​​em projetos de desenvolvimento web. Quando um site usa folhas de estilo de fonte impressionantes para ícones, geralmente diminui significativamente a velocidade, pois o navegador precisa baixar a fonte de um servidor de terceiros. Nesse processo, ele impede que os ativos críticos sejam carregados primeiro e reduz as pontuações de insight de velocidade da página.

Você pode ter visto erros como Reduzir CSS não utilizado , Reduzir recursos de bloqueio de renderização ou Evitar o encadeamento de solicitações críticas devido ao código incrível da fonte.

Portanto, a solução é trocar os ícones incríveis de fonte por ícones SVG ou atrasar o carregamento deles. Nem sempre é possível trocar completamente os ícones por ícones SVG, mas podemos facilmente atrasar o carregamento da folha de estilo incrível da fonte e aumentar a velocidade de carregamento do site.

Como atrasar ícones impressionantes de fonte no Blogger?

Para atrasar os ícones impressionantes da fonte, você precisa primeiro identificar a versão usada em seu site.

Você pode simplesmente pesquisar ( CTRL + F ) por font-awesome no código do tema e removê-lo do seu tema.

Agora use o script abaixo e substitua-o pelo código fonte de font-awesome pela versão correta.

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

Se você tiver vários códigos impressionantes de fonte, ele usa importação e folhas de estilo, então você precisa usar o script abaixo com ambos os links de origem.

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

Agora, use um desses scripts logo acima da tag body de fechamento e salve o código. Agora, os ícones incríveis de fonte estão sendo carregados lentamente ou você pode dizer com atraso de 3 segundos. Você pode ajustar esse valor no script acima.

Carregar a biblioteca Font Awesome de forma assíncrona usando JavaScript

E se você não quiser atrasar os ícones incríveis de fontes, poderá carregar a biblioteca Font Awesome de forma assíncrona usando JavaScript. Dessa forma, os ícones serão buscados e renderizados após o carregamento do conteúdo crítico da página. Isso não será tão eficaz quanto o método de atraso, mas definitivamente melhorará em relação ao padrão.

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

Neste exemplo, o arquivo Font Awesome CSS é carregado de forma assíncrona usando JavaScript. Ajuste a URL dentro do atributo link.href para apontar para o arquivo Font Awesome CSS que você deseja usar.

Ao implementar essa abordagem, o conteúdo crítico da sua página da Web será carregado primeiro, sem esperar pelos ícones do Font Awesome. Em seguida, os ícones serão carregados de forma assíncrona, reduzindo o tempo de carregamento inicial e melhorando a velocidade geral do site.

Método Avançado

Certamente! Outro método para atrasar o carregamento dos ícones do Font Awesome é usar a API Intersection Observer . Essa abordagem permite que você carregue os ícones somente quando eles se tornarem visíveis na viewport, reduzindo o tempo inicial de carregamento da página. Veja como você pode implementá-lo:

Remova a folha de estilo Font Awesome padrão, conforme mencionado no método anterior.

Adicione um elemento de espaço reservado para cada ícone do Font Awesome. Isso pode ser um simples elemento <span> ou <div> .

Use a API Intersection Observer para detectar quando os elementos de espaço reservado estão visíveis na viewport. Quando um elemento se tornar visível, carregue o Font Awesome CSS e substitua o espaço reservado pelo ícone real.

Aqui está um exemplo de implementação 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>

Neste exemplo, usamos a API Intersection Observer para detectar quando os elementos de espaço reservado com a classe font-awesome-placeholder se tornam visíveis na viewport. Quando um elemento está visível, carregamos o Font Awesome CSS dinamicamente, substituímos o espaço reservado pelo elemento do ícone real e paramos de observar esse elemento.

Ajuste a URL dentro do atributo link.href para apontar para o arquivo Font Awesome CSS que você deseja usar. Além disso, modifique o atributo data-icon de cada elemento de espaço reservado para especificar a classe de ícone Font Awesome desejada.

Ao utilizar a API ' Intersection Observer ', os ícones do Font Awesome serão carregados apenas quando estiverem prestes a se tornar visíveis, reduzindo o tempo de carregamento inicial da página e melhorando a velocidade do site.

Espero que este artigo o ajude a reduzir o tempo de carregamento do FontAwesome e aumentar a velocidade de carregamento do site. Dessa forma, você pode tornar os principais sinais vitais da Web do site amigáveis.