Índice
Um dos problemas que muitos aplicativos têm é que embora carreguem o conteúdo rapidamente, eles não são vistos rapidamente no navegador do usuário, ou seja, o navegador acabou de carregar todo o conteúdo, todas as imagens e todos os CSS Y JS, mas há um pequeno atraso entre o que carregamos e o que vemos.Isso se deve em grande parte à posição dos uploads de arquivo no HTML, isto é, provavelmente temos o CSS e os JS misturado e isso torna difícil para o navegador exibir tudo como ao carregar um arquivo JS você deve processá-lo antes de continuar para o próximo arquivo.
A primeira recomendação é sempre colocar os arquivos de estilo como o CSS na parte superior do nosso HTML, isso nos permite fazer o navegador exibir progressivamente a página do aplicativo o mais rápido possível.
Desta forma evitamos ver uma página em branco por muitos segundos antes de ver tudo carregado, caso contrário vemos como a página está sendo construída gradativamente, isso serve como um alívio para os usuários, principalmente aqueles que possuem uma conexão mais lenta à rede ou à Internet .
Se as folhas de estilo ou CSS estão na parte inferior, os navegadores normalmente não carregam as informações para evitar ter que alterar o estilo assim que chegarem a esse ponto, fazendo com que o usuário não veja nada.
O propósito disso é que o navegador possa continuar carregando os recursos da página, pois se encontrar um arquivo JS até carregá-lo sem erros, ele não fará o download de outros recursos, mesmo que estejam em um CDN.
Onde colocar os arquivos JS?Para isso colocamos os arquivos JS o mais longe que pudermos em nosso HTML, embora haja casos em que isso não seja possível devido à estrutura da aplicação, então podemos colocar o atributo adiar com o qual informamos ao navegador que ele pode carregá-lo no final de tudo.
O problema com o atributo adiar é que nem todos os navegadores o interpretam da mesma maneira, então às vezes ele não pode fazer o que pensamos; no entanto, se pudermos colocar um arquivo, esse atributo significa que ele pode ser movido para o final.
Vamos ver na imagem a seguir como é o processo de carregamento de uma página, na primeira parte os arquivos estão todos no topo e sem uma ordem específica, na segunda parte estão os CSS para cima e o JS baixa:
Com isso encerramos este tutorial, agora podemos adicionar um novo elemento para melhorar a velocidade e o desempenho de nossa aplicação, além de reduzir a espera do usuário para ver o que seu navegador está carregando.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
