O desempenho é crucial quando se trata de fornecer uma boa experiência ao usuário. Em uma era de smartphones e conexões de internet rápidas, os usuários têm pouca ou nenhuma tolerância para um UX ruim.

As primeiras impressões significam tudo, portanto, se o seu site demorar mais do que o necessário para carregar, isso pode significar uma venda ou cliente a menos para sua empresa.

Então, como obtemos a cobiçada pontuação verde de 100 % de desempenho do Farol ?

Ultimamente, tenho trabalhado no meu site pessoal (ainda em versão beta!). Nunca prestei atenção ao desempenho desde que comecei o projeto no ano passado, então, naturalmente, fiquei curioso quando me deparei com a ferramenta de desenvolvedor Lighthouse.

Resolvi fazer um teste rápido. Abaixo foram os resultados.

Desnecessário dizer que não fiquei feliz com essas pontuações! Comecei a pesquisar para ver o que estava acontecendo sob o capô, especificamente para desempenho.

De acordo com as ponderações de desempenho do Lighthouse , Mudança cumulativa de layout (CLS) e Maior pintura de conteúdo (LCP) estavam arrastando minha classificação de desempenho para baixo. O que está acontecendo?

Vamos tentar melhorar meu site lidando com essas duas métricas.

Mudança cumulativa de layout (CLS)

CLS é uma medida da maior explosão de pontuações de mudança de layout para cada mudança inesperada de layout que ocorre durante todo o tempo de vida de uma página. Essas mudanças geralmente ocorrem devido a alterações de fonte, imagens sem dimensões ou anúncios, incorporações e iframes sem dimensões.

Para descobrir quais elementos afetam a pontuação do CLS, pulei para a guia Desempenho . Acontece que foi o cabeçalho do meu título que estava causando a mudança.

Para ver o CLS acontecendo em tempo real, reduzi minha conexão com a Internet na guia de rede para “Fast 3G” e recarreguei minha página. Acontece que o cabeçalho estava usando a fonte padrão do sistema inicialmente, Times New Roman , mas apenas por um breve segundo. Então minha fonte personalizada, League Spartan , entrou em ação, o que resultou em uma mudança repentina em uma fração de segundo na família de fontes.

Consegui capturar as fotos antes e depois graças à velocidade de internet simulada mais lenta. Comparação abaixo:

A mudança na fonte estava causando uma mudança abrupta no tamanho do elemento e nos contêineres ao redor. Embora a mudança de tamanho pareça relativamente pequena, ela causa um efeito chocante para o usuário.

Uma maneira de combater essa mudança de layout induzida por fonte é usar uma fonte alternativa . A página usará essa fonte alternativa antes que tenha tempo de carregar corretamente sua fonte personalizada. A estratégia aqui é minimizar a mudança ajustando o tamanho da fonte alternativa para corresponder ao tamanho da fonte personalizada.

A fonte alternativa deve utilizar uma fonte padrão do sistema, como Arial ou Times New Roman. Use propriedades CSS como size-adjustou ascent-overridepara dimensionar adequadamente a fonte alternativa.

/* main.css */

@font-face {
  font-family: 'League Spartan';
  font-weight: 100 900;
  src: url(/assets/fonts/LeagueSpartan-VariableFont_wght.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'League Spartan-fallback';
  size-adjust: 78.5%;
  src: local('Arial');
}


/* Home.css */

h1 {
  font-family: 'League Spartan', 'League Spartan-fallback';
}

Maior pintura de conteúdo (LCP)

O LCP mede quando o maior elemento de conteúdo na viewport é renderizado na tela. Isso aproxima quando o conteúdo principal da página é visível para os usuários. Um tempo de LCP superior a 4 segundos é considerado uma classificação ruim.

Acontece que minha baixa pontuação de LCP também estava relacionada ao meu cabeçalho de título com minha fonte personalizada!

Para encurtar a história, eu tinha muitas fontes personalizadas e arquivos de imagem grandes afetando o carregamento inicial da página. Eu tinha duas telas de efeito paralaxe na página inicial, cada uma com mais de 6 arquivos de imagem grandes. Além disso, eu tinha 6 fontes personalizadas diferentes que precisavam ser carregadas. Os arquivos de fonte são grandes e caros.

Para melhorar minha pontuação, removi uma tela de efeito de paralaxe junto com os arquivos de imagem grandes. Também otimizei o restante das minhas imagens usando compactação de imagem e alternando para o formato de imagem WEBP em vez de usar JPEG ou PNG.

Isso eliminou um tamanho considerável da carga útil da rede.

Se o seu site tiver uma carga útil de rede alta, pode fazer sentido dividir os tempos de carregamento de seus recursos com carregamento lento ou remover alguns recursos caros e agradáveis, mas não essenciais. Mudar para um CDN ou armazenar ativos em cache também é uma maneira eficaz de melhorar as renderizações iniciais e subsequentes.

Otimizações adicionais

Às vezes, as bibliotecas externas podem não ser a solução ideal para o seu site. Por exemplo, acabei removendo minha biblioteca DateTime e substituindo-a por soluções leves e escritas por mim.

As bibliotecas que contêm efeitos CSS e componentes personalizados costumam ficar inchadas. Tente pesquisar algumas soluções online ou peça ao ChatGPT para ajudar a encontrar uma solução alternativa apropriada. Considere as compensações ao adicionar dependências, pois minimizar o tamanho do pacote JavaScript é uma das maneiras mais fáceis de melhorar o desempenho.

Meu site está longe de estar completo e espero otimizá-lo ainda mais mudando para um provedor de CDN para meus ativos. A migração para uma estrutura de geração de site estático como o Next.js também será benéfica ao buscar meu conteúdo no tempo de compilação usando, getStaticPropsem vez de depender da busca de dados do lado do cliente.

Se você tiver dicas e truques essenciais de desempenho, comente abaixo! Eu adoraria ouvir de você.