Boas práticas para melhorar o tempo de carregamento de uma página

Confira abaixo algumas dicas que vão melhorar a velocidade de carregamento da sua página!

Se sua página está apresentando um carregamento lento ou o resultado do PageSpeed ​​Insights não é o desejado, saiba que existem alguns pontos que podem ser melhorados.

Para começar, você pode retirar da sua página os seguintes elementos: 

  • Imagens maiores do que o contêiner em que são usadas;
  • Imagens de fundo responsivas grandes (maiores que 1200 px de largura);
  • Imagens JPG transparentes;
  • Gifs animados;
  • Contêineres vazios;
  • Javascripts grandes;
  • Muitos estilos adicionais inseridos na tag <head>;
  • Links para arquivos CSS externos;
  • Um grande número de componentes interativos;

Remover ou reduzir a quantidade de elementos na primeira seção da sua página,  pode ser muito útil para reduzir o tempo de carregamento da página. Isso acontece já que é justamente essa área que é carregada assim que um visitante acessa a publicação. 

Imagens

Suas páginas responsivas alterarão automaticamente a forma como o conteúdo é processado em sua página, mas não necessariamente otimizarão o tamanho do arquivo para dispositivos móveis.

Isso garante que as imagens sejam as mais claras possível e assim mantenham o conteúdo interativo em um formato adequada para garantir uma boa velocidade da página em dispositivos móveis.

Recomendamos o uso de arquivos PNG em vez de JPGs sempre que possível, pois os PNGs geralmente possuem um menor tamanho.

Se precisar compactar uma imagem, você pode utilizar a ferramenta de redução de imagens de Ion. 

Além disso, se você estiver usando uma imagem maior do que o contêiner o qual deseja inseri-la, faça o upload de uma versão menor,  para que assim a imagem não precise ser redimensionada.

Imagens transparentes

As imagens JPG transparentes inseridas na plataforma, serão transformadas em imagens PNG. Isso acontece uma vez que o formato JPGs não permite que a imagem tenha algum fundo transparente e para ajudar a manter a qualidade da imagem, um novo PNG é gerado. O problema é que essa transformação dentro da plataforma, aumentará o tamanho do arquivo, o tornando mais pesado e afetando o tempo de carregamento. 

Dessa forma, priorize sempre o Upload de imagens já em formato PNG. 

Conteúdo Interativo

Estes componentes são uma ótima maneira de adicionar interatividade às suas páginas.  Entretanto, cada componente adicionado, afetará a velocidade da sua página. Se o tempo de carregamento da sua página estiver alto, você deve utilizar de maneira mais estratégica estes componentes interativos, reduzindo a quantidade de itens desnecessários na sua publicação. 

Scripts

Os códigos Javascript que estão no <head> terão um efeito direto no carregamento da página, pois é acionado antes do resto do seu conteúdo.

Se você não conseguir remover o javascript deste local, entre em contato com o fornecedor deste script para conferir se existe uma versão assíncrona do script ou se ele pode ser movido para o </ body de fechamento >. A tag neste local não impactará tanto as velocidades de carregamento da página. 

Móvel

Uma boa prática é sempre pensar em como cada elemento irá performar nos dispositivos móveis. Caso existam diversos conteúdos na página que não podem ser ocultados para a versão móvel, o ideal será criar uma página otimizada para celular e redirecionar os visitantes de celular para essa versão da sua publicação.

Dicas extras:

Para conferir a fundo quais são os elementos que estão afetando no tempo de carregamento de uma página, você pode remover momentaneamente todos os scrips dela. Assim será possível ter uma base de quanto tempo a página demora para carregar, ignorando elementos de script.

Se a sua página ainda apresentar um tempo de carregamento inferior ao esperado, confira os elementos da primeira seção da sua publicação. Algum deles provavelmente apresentarão algum dos erros mencionados no início deste nosso artigo. 

Basta buscar estes elementos e otimizá-los. 

 

 * Importante:  Existem alguns scripts e outros elementos, que o Google recomenda retirar, entretanto, estes são essenciais para o correto funcionamento de Ion. 

Ao otimizar suas experiências, recomendamos focar nas imagens, conteúdo interativo e scripts de rastreamento fornecidos por plataformas externas.


Caso você tenha dúvidas, por favor, entre em contato conosco help@rockcontent.com. 😀