Como eliminar JavaScript e CSS de bloqueio de renderização

Neste artitgo você vai aprender a como eliminar JavaScript e CSS de bloqueio de renderização, deixando a sua página mais rápida

Fala programador, beleza? Vamos falar de uma parte bem importante do desenvolvimento web hoje: performance do site!

Neste artigo vou apresentar duas estratégias fáceis para você eliminar o bloqueio de renderização dos arquivos de JavaScript e CSS de uma página

De forma bem comum costumam ser pontos que formam notas negativas nos avaliadores de velocidade de um site

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para resolver os arquivos JavaScript

Podemos utilizar o atributo defer, que vai carregar o arquivo JavaScript sob demanda e não travar o carregamento da página

Veja um exemplo de como executar este carregamento:

<script defer src="arquivo.js"></script>

Este tipo defer começa a iniciar o carregamento após o HTML ser totalmente carregado, o que não demora muito

Então pode não gerar impacto na sua página, mas sempre faça testes

Outro atributo que pode ser utilizado é o async, porém este devemos utilizar apenas quando um script não tem dependência de outros

Veja um exemplo do async:

<script async src="arquivo.js"></script>

Este atributo também não bloqueia o carregamento do HTML, porém ele é carregado assim que o navegador o encontra

Sendo executado assim que o carregamento for finalizado, então tome cuidado

E para carregar o CSS de forma assíncrona?

Podemos utilizar uma outra técnica interessante, mas saiba que ela não funciona em navegadores muito antigos, então tome este cuidado também

Veja a regra necessária:

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

Deste modo, mudando para o nome do seu arquivo, teremos o carregamento dinâmico de CSS

Porém volto a bater na tecla: sempre teste tudo que está implementando em seu site

O carregamento assíncrono pode trazer alguns problemas indesejáveis ao mesmo, como deixar de funcionar algum recurso

Conclusão

Neste artigo falamos sobre como eliminar JavaScript e CSS de bloqueio de renderização

Utilizamos para JavaScript a técnica do async e defer, que são atributos da tag script e fazem o carregamento dinâmico

Já para CSS utilizamos o atributo media em conjunto com o onload, que também faz o carregamento não bloquear o início da página

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube