Aumente o desempenho do site com três métricas

Jan 25, 2024

A web é um meio de rápido crescimento. Com milhares de novos sites registrados diariamente, como você ganha vantagem sobre os concorrentes? Uma categoria negligenciada que melhora seu site e ajuda a aumentar o tempo de engajamento do usuário é o desempenho. Desempenho importa! O desempenho do site é fundamental para criar uma experiência de usuário positiva, permitindo acessibilidade e aumentando o tráfego. O desempenho inadequado pode alterar essas métricas e se tornar uma responsabilidade, criando um ambiente mais desafiador para um negócio prosperar. Melhorar o desempenho também levará a uma melhor Otimização de Mecanismos de Busca (SEO).

Existem muitas métricas de desempenho. Abordaremos melhorias para três: Deslocamento Cumulativo de Layout (CLS), Maior Pintura de Conteúdo (LCP) e Tempo Total de Bloqueio (TBT). Com a atual versão 9 do Lighthouse, as três métricas cumulativas respondem por 70% da pontuação de desempenho do Lighthouse do Google.

O Cumulative Layout Shift (CLS) é uma das métricas de experiência do usuário mais fáceis de entender. Componentes individuais em uma determinada página podem melhorar ou prejudicar a experiência do usuário. Às vezes, os usuários não obtêm o que esperam quando carregam inicialmente uma página. Cada componente deve ter uma ação previsível para um usuário.

O tamanho do conteúdo envolve definir uma largura e altura para os seletores para reduzir o deslocamento do conteúdo. Ele também fornece aos usuários com conexão lenta um entendimento de que o conteúdo será carregado naquele local assim que o processo de renderização for concluído. Alguns elementos demoram mais para carregar, afetando o CLS de forma negativa. Por exemplo, imagens responsivas requerem cobertura adicional. Considere definir sua proporção ou converter o elemento em absoluto enquanto define seu pseudoseletor com uma porcentagem de preenchimento superior.

As animações são uma forma única de tornar uma página agradável para o usuário, quando feitas corretamente. Evite usar posições (superior, direita, inferior, esquerda) e largura/altura para animações. Em vez disso, use o seletor de transformação e seu atributo translate para a posição. Para maior flexibilidade, incorpore seletores de margem. O seletor de transformação não aciona o layout, a menos que seja absolutamente necessário.

As fontes da Web estão se tornando um método cada vez mais popular de branding para um site. Eles podem ser implementados internamente ou solicitados por outros sites. Um usuário com conexões lentas pode ter problemas para visualizar webfonts. Nesses casos, os navegadores normalmente mostram a versão regular até que o arquivo seja carregado. Depois de carregado, se o navegador for compatível com webfonts, ele mudará para a versão correta automaticamente. Caso contrário, o usuário receberá fontes padrão.

A métrica Maior pintura de conteúdo (LCP) mede quanto tempo adicional é gasto na renderização de um elemento (imagem, vídeo, texto). Para proporcionar uma ótima experiência ao usuário, busque uma pontuação métrica inferior a 2,5 segundos. Para melhorar o LCP via texto, use a mesma estratégia usada para CLS. Para reduzir as velocidades LCP para imagens, otimize a imagem com o seguinte.

Todo o processo para o Largest Contentful Paint é fazer com que seu elemento (imagem, vídeo, texto) seja renderizado na página o mais rápido possível. Essas estratégias ajudam a priorizar elementos importantes na guia de rede. Quaisquer arquivos JavaScript que não serão necessários no carregamento inicial da viewport devem ser adiados para mais tarde.

Tempo total de bloqueio (TBT) é uma métrica de desempenho para medir a capacidade de resposta do carregamento em uma página. Embora seja a última categoria deste artigo, ela também tem o maior peso de 30%. O TBT mede o tempo que uma página é impedida de responder a uma entrada do usuário, seja essa entrada cliques do mouse, toques na tela ou pressionamentos do teclado. Time to Interactive (TTI) mede quanto tempo uma página leva para se tornar responsiva. First Contentful Paint (FCP) é quando o navegador renderiza a primeira parte do conteúdo do Document Object Model (DOM). TBT é a soma de todos os períodos entre FCP e TTI. Para melhorar esta categoria, você deve primeiro dividir os scripts internos e de terceiros.

Como resultado, o tempo total de bloqueio é a métrica de desempenho de maior impacto. Time to Interactive e First Contentful Paint desempenham papéis importantes no TBT e em seu tópico principal. Considere analisar FCP ou TTI se estiver preso em TBT.