Olá pessoal! Já faz um tempo que não escrevo um blog pela última vez e, admito, isso me deixa um pouco triste. A realidade é que há muito para aprender e às vezes parece que nunca há tempo suficiente para mergulhar em tudo. Quem estou enganando? A verdade é que tenho procrastinado muito ultimamente.

Mas recentemente, tenho explorado o desempenho da web – um tópico crucial para qualquer desenvolvedor front-end – e estou animado para compartilhar o que aprendi. Otimização de desempenho é uma daquelas coisas que, quando bem feita, pode fazer uma grande diferença na forma como os usuários experimentam seu site ou aplicativo da web. Isso não apenas melhora a experiência do usuário, mas também aumenta o SEO e pode até impactar as taxas de conversão.

Então, vamos começar!

Por que o desempenho da Web é importante

No mundo acelerado de hoje, os usuários esperam que os sites carreguem rapidamente e interajam sem problemas. Se o seu site for lento, os usuários irão embora – é simples assim. Estudos mostram que um atraso de alguns segundos pode levar a taxas de rejeição mais altas e menor engajamento. Como desenvolvedores front-end, somos responsáveis ​​por garantir que nossos aplicativos não apenas tenham uma boa aparência, mas também tenham um bom desempenho sob diversas condições.

Quando se trata de medir o desempenho, o Google é frequentemente considerado o padrão ouro. O Google fornece um conjunto de métricas importantes, conhecidas como Core Web Vitals, que ajudam os desenvolvedores a monitorar e melhorar o desempenho de seus sites. Vamos decompô-los:

De acordo com o senhor Google essas coisas são importantes no desempenho

• FCP (primeira pintura com conteúdo)
• LCP (Maior pintura com conteúdo)
• CLS (mudança cumulativa de layout)
• TTI (tempo de interação)
• INP (Interação com a próxima pintura)

Vamos explorá-los mais de perto

FCP (primeira pintura com conteúdo)

O que mede: O FCP mede o tempo que leva para o primeiro conteúdo (texto, imagens, etc.) aparecer na tela depois que um usuário navega até sua página. É uma métrica crítica porque dá aos usuários feedback de que a página está carregando. Quanto mais rápido for o FCP, melhor será a experiência do usuário.

Como melhorar o FCP:

Minimize recursos de bloqueio de renderização: Reduza ou elimine recursos que bloqueiam a renderização da página, como JavaScript ou CSS síncrono. Use para recursos críticos.

Adiar JavaScript não crítico: Use os atributos defer ou async para scripts não essenciais para garantir que eles não bloqueiem a pintura inicial.

*Use renderização no lado do servidor (SSR): * SSR ajuda a entregar o HTML inicial mais rapidamente, especialmente para conteúdo dinâmico, para que os usuários possam ver conteúdo significativo mais cedo.

Otimize a entrega de CSS: Minimize o tamanho do seu CSS e do CSS crítico embutido, para que o navegador possa renderizar o conteúdo mais rapidamente.

Use uma rede de distribuição de conteúdo (CDN): veicule ativos estáticos de uma CDN para reduzir a latência e acelerar a entrega de recursos.

LCP (Maior pintura com conteúdo)

O que mede: LCP concentra-se no tempo que leva para o maior elemento (geralmente uma imagem principal, um bloco de texto grande ou um vídeo) ser totalmente renderizado na janela de visualização. É um ótimo indicador da velocidade de carregamento percebida, pois os usuários consideram a página pronta assim que o maior conteúdo é carregado. Procure manter o LCP abaixo de 2,5 segundos para uma experiência rápida.

Como melhorar o LCP:

Otimizar e compactar imagens: Use formatos de imagem modernos como WebP, compacte imagens e garanta que os tamanhos de imagem corretos sejam exibidos usando atributos srcset e tamanhos.

Carregamento lento de imagens abaixo da dobra: Implemente o carregamento lento para imagens que não são imediatamente visíveis para priorizar o carregamento de conteúdo acima da dobra.

Pré-carregar recursos importantes: Use a tag para carregar recursos importantes, como fontes, imagens principais ou arquivos de mídia grandes, mais rapidamente.

Minimize CSS de bloqueio de renderização: Assim como com FCP, minimize o uso de arquivos CSS grandes que podem bloquear a renderização.

Reduza scripts de terceiros: Anúncios, análises ou outros scripts de terceiros podem desacelerar o LCP. Adie ou carregue de forma assíncrona scripts não essenciais.

CLS (mudança cumulativa de layout)

O que mede: CLS mede a estabilidade visual da sua página. Você já leu alguma coisa e de repente o layout mudou, fazendo com que você se perdesse ou clicasse no botão errado? Essa é uma pontuação CLS ruim. O CLS rastreia quantos elementos na página mudam inesperadamente durante o processo de carregamento. Um CLS baixo é essencial para experiências de usuário tranquilas, especialmente em dispositivos móveis.

Como melhorar o CLS:

Definir dimensões para imagens e vídeos: Sempre inclua atributos de largura e altura nas imagens ou use caixas de proporção CSS para reservar espaço para elementos de mídia antes de carregá-los.

Evite inserir conteúdo acima do conteúdo existente: evite adicionar conteúdo dinamicamente acima do conteúdo existente, a menos que seja absolutamente necessário (por exemplo, anúncios).

Use estratégias de carregamento de fontes: Ao carregar fontes personalizadas, use font-display: swap; para evitar mudanças de layout causadas pelo carregamento da fonte.

Evite injetar novos anúncios ou pop-ups sem espaço: certifique-se de que anúncios, banners ou pop-ups carregados dinamicamente sejam contabilizados no espaço do layout para evitar mudanças inesperadas.

Use marcadores ou carregadores de imagem com o mesmo espaço da imagem

TTI (Hora de Interatividade)

O que mede: O TTI mede quanto tempo leva para a página se tornar totalmente interativa. Isso significa que todos os botões, entradas e links podem ser usados, e o thread principal está livre para responder à entrada do usuário. Um TTI rápido garante que os usuários possam interagir com seu conteúdo rapidamente, sem sentir que o site está lento ou sem resposta.

Como melhorar o TTI:

Reduza o tempo de execução do JavaScript: Divida grandes pacotes de JavaScript e carregue apenas scripts essenciais para a primeira interação. Use divisão de código em React (com React.lazy()) ou importações dinâmicas em JavaScript.
Use Web Workers: Transfira tarefas pesadas e sem bloqueio de UI para Web Workers para manter o thread principal responsivo.
Adiar tarefas longas: Divida tarefas longas de JavaScript em tarefas menores para evitar o bloqueio do thread principal por muito tempo.
Pré-carregar recursos críticos: Garanta que os recursos essenciais necessários para interatividade (scripts, estilos) sejam pré-carregados para evitar atrasos no TTI.
Otimize CSS e JavaScript: Minimize, compacte e priorize códigos essenciais. Use a agitação da árvore para eliminar código morto e garantir uma execução mais rápida do script. Use o mecanismo de compressão GZIP ou BROTLI

INP (Interação com a próxima pintura)

O que mede: Uma métrica relativamente mais recente, o INP rastreia o tempo que uma página leva para responder às interações do usuário (como clicar em botões, rolar ou digitar) e atualiza a IU de acordo. Ele ajuda a medir a interatividade geral além do carregamento inicial, garantindo que seu aplicativo permaneça ágil durante toda a sessão do usuário.

Como melhorar o INP:

Reduza a latência de entrada: Certifique-se de que as entradas do usuário (cliques, pressionamentos de tecla) sejam tratadas rapidamente, evitando tarefas JavaScript longas que bloqueiam o thread principal.

Priorizar capacidade de resposta de entrada: Use requestAnimationFrame ou requestIdleCallback para lidar com trabalho não urgente durante o tempo ocioso, deixando o thread principal aberto para tratamento de interação.

Use Debouncing e Throttling: Ao lidar com interações frequentes do usuário (como rolagem ou digitação), debounce ou limite os manipuladores de eventos para evitar que a UI pare de responder.

Código não crítico de carregamento lento: Adie o carregamento de funcionalidades não críticas até depois da interação inicial.
Por exemplo, você pode carregar componentes lentamente no React usando React.lazy() e Suspense.

Seguindo essas estratégias, você pode melhorar significativamente essas métricas principais e oferecer uma experiência de usuário mais rápida e responsiva. Essas otimizações, especialmente quando aplicadas em conjunto, ajudam a garantir que seu site não apenas passe nos testes Core Web Vitals do Google, mas também forneça uma experiência excepcional para seus usuários

Espero que você tenha achado este blog útil e tenha conseguido obter alguns insights importantes dele para ajudar em sua próxima estratégia de melhoria de desempenho.

Para mais blogs incríveis sobre desempenho, segurança na web, reação, angular, vue, continue me seguindo