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