Os usuários estão reclamando do seu site lento? Este artigo compartilha 7 truques para levar o desempenho do seu site para a lua . Vamos começar!

1. Busque apenas recursos relevantes

Você sabia que pode buscar apenas os arquivos CSS relevantes para o dispositivo atual?

A linktag possui um mediaatributo que pode ser usado para especificar a consulta de mídia para a qual a folha de estilo se destina.

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

Uma demonstração ao vivo disso pode ser encontrada em w3schools .

2. Minimize seu código

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

Independentemente da ferramenta de compilação ( Webpack , Vite , Snowpack , etc) que você usar, ela terá uma opção de minificação . Por exemplo, no webpack , você pode usar o TerserPlugin para minificar seu código .

3. Pré-busca de recursos

Você pode pré-carregar imagens , CSS , JS e até páginas inteiras usando a linktag.

<link rel="preload" as="image" href="image.png" />

Quicklink é uma biblioteca que pré-busca links na viewport, usando a API do Intersection Observer , e os faz carregar mais rápido, enquanto Guess é uma biblioteca que usa Machine Learning para prever qual página o usuário provavelmente visitará em seguida.

4. Use imagens responsivas ou direção de arte

Esta é possivelmente a maior vitória de desempenho que você pode obter.

Você pode usar o srcsetatributo para especificar várias fontes de imagem para diferentes tamanhos de tela . Isso permite que o navegador escolha a imagem mais apropriada para o dispositivo atual.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
  alt="some random image"
/>

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

Lazy loading é uma técnica que permite adiar o carregamento de recursos não críticos até que sejam necessários.

Requer apenas que você adicione o loading="lazy"atributo aos elementos relevantes e pronto.

<img
  src="placeholder.png"
  alt="some random image"
  loading="lazy"
/>

6. Agite seu código na árvore

A agitação da árvore é um termo comumente usado em um contexto JavaScript para descrever a remoção de código morto . Ele depende das instruções de importação e exportação para detectar se os módulos de código são exportados e importados para uso entre arquivos JavaScript

Assim como a minificação , o tree-shaking e a poda de código não utilizado também são um recurso da ferramenta de construção .

Aqui está a documentação do webpack sobre o tree-shaking

7. Use o Page Speed ​​Insights para detectar possíveis problemas

O Page Speed ​​Insights do Google é uma ótima ferramenta para detectar possíveis problemas com seu site.

Ele não apenas fornece uma pontuação , mas também fornece um relatório detalhado dos problemas que você precisa corrigir.

Isso é tudo, pessoal!

Siga-me para novidades quinzenais sobre o domínio da tecnologia !

Precisa de um freelancer de desenvolvimento front-end com a melhor classificação para acabar com seus problemas de desenvolvimento? Entre em contato comigo no Upwork

Quer ver no que estou trabalhando? Confira meu site pessoal e GitHub

Quer se conectar? Entre em contato comigo no LinkedIn

Sou nômade digital e viajo ocasionalmente. Siga-me no Instagram para conferir o que estou fazendo.