Ilustração de foguete voando para fora da tela de um notebook
Freepik/studiogstock

Atualizado em

Melhorar o desempenho no carregamento de um site é importante não apenas para que seus usuários acessem o conteúdo mais rápido, tendo mais chances de voltar no futuro, como também ajuda no SEO. Sites mais rápido e que exigem menos do navegador são melhore ranqueados em mecanismos de busca, aparecendo primeiro em resultados de pesquisa. Este rápido tutorial mostra 7 dicas e truques para deixar seu site mais leve e veloz.

1. Carregue apenas o necessário

Você sabia que é possível “chamar” apenas os arquivos CSS relevantes para o dispositivo que está acessando a página?

A tag link tem um atributo media que pode ser usado para especificar os arquivos CSS para determinadas resoluções de tela – obviamente, você vai precisar separar seu CSS em mais de um arquivo primeiro.

<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 600px)"
/>

O código acima avisa ao navegador para dar preferência ao aquivo mobile.css se a resolução da tela do dispositivo for inferior a 600px.

Repita o mesmo código para o arquivo desktop.css e troque a propriedade max-width para min-width. Deve ficar assim:

<link
  rel="stylesheet"
  href="desktop.css"
  media="screen and (min-width: 600px)"
/>

2. Minifique seu código

A minificação é o processo de remoção de dados desnecessários ou redundantes sem afetar como um recurso é processado pelo navegador. Minificação pode incluir a remoção de comentários de código, espaços em branco e código não utilizado, bem como a abreviação de nomes de variáveis e funções.

Independentemente da ferramenta de CMS que você usa para gerar seu site, ela certamente terá uma opção de minificação ou um plugin criado pela comunidade. Com o WordPress, você pode usar o WP Super Minify. No Jekyll, o jekyll-minifier vai resolver o seu problema e ajudar a reduzir seu código.

3. Pré-carregue arquivos importantes

Você pode pré-carregar imagens, fontes, CSS, JS e até mesmo páginas inteiras usando a tag link. Com o pré-carregamento, o navegador sabe que precisa baixar esse arquivo mais cedo. Isso pode evitar quebras de layout por uma folha de estilo ou fonte que demorou mais tempo para ser baixada durante o carregamento da página, por exemplo.

<link 
  rel="preload" 
  href="roboto.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
 />

Você pode até mesmo usar também o quicklink para pré-carregar recursos de maneira otimizada.

4. Use imagens responsivas

Essa é possivelmente o melhor truque para melhor desempenho que você pode fazer. Por mais que você comprima imagens com os melhores formatos, como .WebP, elas provavelmente ainda serão o arquivo mais pesado durante o carregamento de uma páginas.

Você pode usar o atributo srcset para especificar várias imagens para diferentes tamanhos de tela. Isso permite que o navegador escolha a imagem mais apropriada para a resolução.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
  alt="descrição da imagem"
/>

Direção de arte

A direção de arte é uma técnica que permite servir imagens diferentes para dispositivos diferentes. Isso é útil quando você deseja servir uma imagem diferente para dispositivos móveis e desktops.

<picture>
  <source
    media="(min-width: 900px)"
    srcset="desktop.jpg"
  />
  <source
    media="(min-width: 480px)"
    srcset="tablet.jpg"
  />
  <img src="mobile.jpg" alt="some random image" />
</picture>

O código acima diz pra o site qual imagens servir para dispositivos com resolução mínima de tela de 900 ou 480 pixels e uma imagem padrão, menor, para resoluções abaixo disso.

5. Use Lazy Loading

O carregamento atrasado (ou “lazy loading”, em inglês) é uma técnica que permite adiar o carregamento de recursos não críticos até que sejam necessários.

Basta adicionar o atributo loading="lazy" aos elementos relevantes e pronto.

<img
  src="imagem.jpeg"
  alt="descrição da imagem"
  loading="lazy"
/>

O ideal é usar o atraso de carregamento apenas em imagens, vídeos e outros recursos que estão “depois da dobra” – como é chamada a porção do layout que não é visível antes do usuário rolar a página.

No WordPress, você pode instalar o plugin Lazy Loader. No Jekyll, o jekyll-loading-lazy. Ambos adicionam o atributo loading="lazy" em todas as imagens automaticamente e deixam o navegador decidir quais imagens “antes da dobra” carregar primeiro. Teste e veja se há alguma diferença de desempenho.

6. Use o Page Speed Insights

O Page Speed Insights é uma ferramenta do Google capaz de analisar e diagnosticar problemas no seu site, página por página, e dá pontuações de 0 a 100 para performance, acessibilidade, SEO e melhores práticas, segmentado por versões móvel e desktop.

Ele também fornece um relatório detalhado dos problemas que você precisa corrigir e dá dicas de como melhorar cada item apresentado. É uma ferramenta essencial para detectar os pontos mais fracos de cada página.