review-web-performance
Voltar à Trilha

Revisão de Desempenho Web

--- id: 6724e18296fa40173cc2437c title: Revisão de Desempenho Web challengeType: 31 dashedName: review-web-performance --- # --description--

Diferenças Entre Desempenho Real e Percebido

  • Perceived Performance: This is how users perceive the performance of a website. É assim que eles avaliam em termos de responsividade e confiabilidade. Esta é uma medida subjetiva, então é difícil quantificá-la, mas é muito importante, já que a experiência do usuário determina o sucesso ou fracasso de um site.
  • Real Performance: This is the objective and measurable performance of the website. É medido usando métricas como tempo de carregamento da página, tempo de resposta do servidor e tempo de renderização. Essas medições são influenciadas por múltiplos fatores relacionados à rede e ao próprio código.

Técnicas para Melhorar a Performance Percebida

  • Lazy Loading: Esta técnica reduz o tempo de carregamento inicial ao máximo carregando recursos não essenciais em segundo plano.
  • Minimize os Atrasos de Fonte: Se o seu site possui fontes personalizadas, você também deve tentar minimizar os atrasos no carregamento das fontes, pois isso pode resultar em piscadas ou na exibição da fonte fallback enquanto a fonte personalizada está sendo carregada. Uma sugestão para isso é usar uma fonte fallback que seja semelhante à fonte personalizada, assim caso isso aconteça, a mudança será mais sutil.
  • Uso de Indicadores de Carregamento: Mostrar um indicador de carregamento para um processo de longa duração assim que o usuário clicar em um elemento pode ajudar o usuário a se sentir conectado e envolvido com o processo, fazendo o tempo de espera parecer mais curto.

Conceitos Centrais de Performance

  • Ordem de origem: Isso se refere à forma como os elementos HTML estão estruturados no documento. Isso determina o que carrega primeiro e pode impactar significativamente o desempenho e a acessibilidade.
Algumas melhores práticas para a ordem de origem incluem:
  • Colocando conteúdo crítico como títulos, navegação ou texto principal mais alto na estrutura HTML.
  • Adiar scripts não essenciais como os de analytics ou widgets de terceiros para que eles não bloqueiem a renderização.
  • Usando aprimoramento progressivo, para garantir que a experiência principal funcione mesmo antes de os estilos e scripts serem carregados. Aprimoramento progressivo é uma forma de construir sites e aplicações baseada na ideia de que você deve fazer sua página funcionar com HTML primeiro.
Aqui está um exemplo de boa ordem de origem, usando as melhores práticas que acabamos de ver: 
<h1>Welcome to FastSite!</h1>
<p>Critical information loads first.</p>
<script src="slow-script.js" defer></script>
  • Critical Rendering Path: Esta é a sequência de etapas que o navegador segue para converter o código em pixels na tela.
  • Latência: Este é o tempo que uma requisição leva para viajar entre o navegador e o servidor. Ou seja, alta latência significa páginas lentas.
Algumas formas de reduzir a latência incluem:
  • Usando CDNs, ou Redes de Distribuição de Conteúdo, para servir arquivos de locais mais próximos.
  • Habilitando compressão usando coisas como Gzip para reduzir o tamanho dos arquivos.
  • Otimização de imagens e uso de lazy loading.
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

Melhorando o INP

  • Definição: INP (Interaction to Next Paint) avalia a responsividade geral de uma página medindo o tempo desde quando um usuário interage, como um clique ou pressionamento de tecla, até a próxima vez que o navegador atualiza a exibição. Um INP menor indica uma página mais responsiva.
Aqui estão algumas maneiras de melhorar o INP:
  • Reduza o trabalho da thread principal dividindo tarefas longas em JavaScript.
  • Use requestIdleCallback() para scripts não críticos. Isso colocará uma função na fila para ser chamada durante os períodos ociosos do navegador.
  • Adie ou carregue preguiçosamente os recursos pesados que foram abordados anteriormente.
  • Otimize os manipuladores de eventos. Se esses manipuladores forem executados com muita frequência ou realizarem operações pesadas, eles podem deixar a página lenta e aumentar o INP. A solução para isso é o debounce. O debounce garante que a função seja executada somente depois que o usuário parar de digitar por um curto período - por exemplo, 300ms. Isso evita cálculos desnecessários e melhora o desempenho.

Como o Rendering Funciona no Navegador

  • How Rendering works: First the browser parses the HTML and builds the DOM. Em seguida, o navegador processa o CSS, construindo o CSS Object Model, ou CSSOM. Esta é outra estrutura de árvore que determina como os elementos devem ser estilizados. Finalmente, o navegador pinta os pixels na tela, renderizando cada elemento com base nos estilos e layout calculados. Em páginas complexas, isso pode envolver múltiplas camadas que são compostas juntas para formar a saída visual final.

Como o Desempenho Impacta a Sustentabilidade

  • Background Information: The internet accounts for around 2% of global carbon emissions—that's the same as the airline industry! Cada byte transferido requer eletricidade, desde data centers até dispositivos do usuário. Arquivos maiores e scripts ineficientes significam maior consumo de energia. Um site de alto desempenho não é apenas mais rápido, ele também reduz o processamento desnecessário e o uso de energia.

Maneiras de Reduzir os Tempos de Carregamento da Página

  • Otimize os Ativos de Mídia: Imagens e vídeos grandes são culpados comuns por tempos de carregamento lentos. Ao otimizar esses ativos, você pode acelerar significativamente seu site. Isso inclui coisas como comprimir imagens, usar formatos modernos como WebP e usar carregamento preguiçoso para os ativos.
  • Aproveite o Cache do Navegador: O cache permite que os navegadores armazenem partes do seu site localmente, reduzindo o tempo de carregamento para visitantes que retornam.
  • Minificar e Comprimir Arquivos: Reduzir o tamanho dos seus arquivos pode levar a downloads mais rápidos. Isso inclui reduzir o tamanho dos arquivos transmitidos e minificar arquivos CSS e JavaScript.

Melhorando o "time to usable"

  • Definição: "time to usable" é o intervalo desde quando um usuário solicita uma página até quando ele pode interagir significativamente com ela. Para melhorar o "time to usable" você pode carregar seus assets de forma preguiçosa ou minimizar recursos que bloqueiam a renderização.

Métricas-chave para Medir o Desempenho

  • First Contentful Paint ou FCP: Mede a rapidez com que o primeiro conteúdo—texto ou imagem—aparece na tela. Um bom FCP é considerado um tempo abaixo de 1,8 segundos e um FCP ruim é acima de 3 segundos. Você pode verificar seu FCP usando o Chrome DevTools e conferindo a aba de performance.
  • Total Blocking Time: Isso mostra por quanto tempo a thread principal fica bloqueada por tarefas pesadas de JavaScript. Se o Total Blocking Time (TBT) estiver alto, os usuários experimentam interações lentas. Para melhorar o TBT, divida tarefas longas e adie scripts não essenciais.
  • Taxa de Rejeição: Esta é a porcentagem de visitantes que saem sem interagir. Se o seu site tem altas taxas de rejeição pode ser porque sua página está muito lenta.
  • Usuários Únicos: Esta métrica acompanha quantos visitantes individuais acessam seu site. Para visualizar a Taxa de Rejeição e Usuários Únicos, você pode usar o Google Analytics. Ele permitirá que você monitore essas métricas e melhore o engajamento.

Ferramentas Comuns de Medição de Desempenho

  • Chrome DevTools: Chrome DevTools is a built-in tool inside Google Chrome that lets you analyze and debug performance in real-time. O DevTools mostrará tempos de carregamento, uso da CPU e atrasos na renderização. It's especially useful for measuring First Contentful Paint, or FCP, is how fast a user sees the first visible content. Se o seu site parecer lento, o DevTools ajudará você a identificar os gargalos.
  • Lighthouse: Esta é uma ferramenta automatizada que verifica desempenho, SEO e acessibilidade.
  • WebPageTest: Esta ferramenta permite que você teste como seu site carrega a partir de diferentes locais e dispositivos. Esta ferramenta fornece uma análise detalhada do Speed Index, Total Blocking Time e outras métricas de desempenho chave do seu site. Se você quer saber como usuários reais experimentam seu site globalmente, WebPageTest é a ferramenta certa para isso.
  • PageSpeed Insights: Esta ferramenta analisa seu site e sugere melhorias rápidas para dispositivos móveis e desktop. Ela informará o que está deixando seu site lento e dará recomendações específicas como otimizar imagens, remover scripts que bloqueiam a renderização e reduzir os tempos de resposta do servidor. PageSpeed Insights é uma maneira rápida e fácil de verificar como o Google vê o desempenho do seu site.
  • Real User Monitoring: ferramentas de RUM acompanham o comportamento real dos usuários, mostrando como visitantes reais experimentam seu site. Ferramentas populares de RUM incluem Google Analytics, que monitora tempos de carregamento de página e taxas de rejeição, e New Relic ou Datadog, que monitoram problemas de desempenho em tempo real. Se você quer dados de usuários reais, ferramentas de RUM são essenciais.

Trabalhando com Performance Web APIs

  • Definição: As Performance Web APIs permitem que os desenvolvedores acompanhem quão eficientemente uma página web carrega e responde diretamente no código. Essas APIs permitem medir os tempos de carregamento da página, acompanhar atrasos na renderização e interação e analisar o tempo de execução do JavaScript.
  • performance.now(): Esta API fornece timestamps de alta precisão (em milissegundos) para medir quanto tempo diferentes partes do seu site levam para carregar.
const start = performance.now();  
// Run some code here  
const end = performance.now();  

console.log(Execution time: ${end - start}ms);
  • Performance Timing API: Esta API fornece uma análise detalhada de cada etapa do carregamento da página, desde a consulta DNS até DOMContentLoaded.
const timing = performance.timing;  

const pageLoadTime = timing.loadEventEnd - timing.navigationStart;  
console.log(Page load time: ${pageLoadTime}ms);
  • PerformanceObserver: Esta API escuta eventos de desempenho como deslocamentos de layout, tarefas longas e interações do usuário.
const observer = new PerformanceObserver((list) => {  
  list.getEntries().forEach((entry) => {  
    console.log(Long task detected: ${entry.duration}ms);  
  });  
});  

observer.observe({ type: "longtask", buffered: true });

Técnicas para Melhorar o Desempenho do CSS

  • CSS Animations: Animating certain CSS properties, such as dimensions, position, and layout, triggers a process called "reflow", during which the browser recalculates the position and geometry of certain elements on the page. Isso requer uma repintura, que é computacionalmente cara. Portanto, é recomendado reduzir o número de animações CSS ao máximo ou pelo menos dar ao usuário uma opção para ativá-las ou desativá-las.

Técnicas para Melhorar a Performance do JavaScript

  • Code Splitting: Dividir seu código JavaScript em módulos que executam tarefas críticas e não críticas também é útil. Dessa forma, você poderá pré-carregar os críticos o mais rápido possível e adiar os não críticos para renderizar a página o mais rápido possível.
  • Manipulação do DOM: Lembre-se que Manipulação do DOM refere-se ao processo de alterar dinamicamente o conteúdo de uma página com JavaScript ao interagir com o Document Object Model (DOM). Manipular o DOM é computacionalmente custoso. Reduzir a quantidade de manipulação do DOM no seu código JavaScript melhorará o desempenho.
# --assignment-- Revise os tópicos e conceitos de Web Performance.