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

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