WDD 231: Desenvolvimento Frontend para Web I

S05 - Atividades de Aprendizagem: Experiência do Usuário - Desempenho da Página

Visão Geral

Para quem trabalha com desenvolvimento web, criar páginas bonitas e seguindo os padrões é apenas o começo. Para ser eficaz, seu site também deve ter um bom desempenho e oferecer uma ótima experiência do usuário (UX).

Esta atividade de aprendizagem apresenta as principais perguntas e métricas que você deve considerar ao desenvolver seu site para otimizar e obter melhor desempenho. Concentrar-se nesses dados de desempenho permitirá que você melhore a experiência geral do usuário e o engajamento.

Preparação

Quando os usuários acessam uma página, a experiência deles pode ser dividida em quatro perguntas principais:

1. Está acontecendo?
   • A navegação começou com sucesso? O servidor respondeu?
   • Nesta fase, o usuário quer saber se algo está acontecendo. Ele clicou em um link, chegou à página e quer ver se ela está respondendo. Um atraso aqui pode dar a impressão de que o site está com problema.
2. É útil?
   • Já foi renderizado conteúdo suficiente para que o usuário possa ver e interagir?
   • Mais do que apenas saber que a página começou a carregar, o usuário quer enxergar conteúdo relevante o quanto antes. Se não enxergar, poderá ficar frustrado e sair da página.
3. É utilizável?
   • O usuário consegue interagir com a página ou ela ainda está travada ou sem resposta?
   • Às vezes, a página parece carregada visualmente, mas se os botões não funcionam ou tudo trava, ela não está utilizável.
4. Está agradável de usar?
   • As interações são suaves, naturais e sem atrasos?
   • Aqui o foco é o acabamento. Animações fluidas e interações responsivas fazem com que a experiência seja de alta qualidade e agradável. Por outro lado, conteúdos que pulam na tela ou travam passam uma sensação de amadorismo.

Métricas de Desempenho

Para responder às perguntas acima de forma mensurável, os desenvolvedores web usam métricas de desempenho web. Abaixo estão três métricas principais:

• First Contentful Paint (FCP)
  • O que é? Tempo entre o carregamento da página e a exibição do primeiro conteúdo (como texto ou imagens).
  • Por que é importante? Dá ao usuário a confiança de que algo está acontecendo.
• Largest Contentful Paint (LCP)
  • O que é? Tempo até que o maior elemento de conteúdo visível (geralmente uma imagem ou um grande bloco de texto) apareça.
  • Por que é importante? Ajuda a determinar quando o conteúdo principal está visível e utilizável.
• Cumulative Layout Shift (CLS)
  • O que é? Uma pontuação que representa o quanto o layout muda inesperadamente durante o carregamento.
  • Por que é importante? Mudanças podem fazer com que os usuários cliquem na coisa errada ou se sintam desorientados.

Percepção do Usuário

Além das métricas acima, também é importante considerar a percepção do usuário. Uma página rápida que parece estranha ainda pode causar frustração, enquanto uma página um pouco mais lenta, mas suave, pode proporcionar uma experiência melhor. Com isso em mente, é importante considerar:

• Os dados objetivos (como as métricas mencionadas acima)
• A experiência subjetiva (suavidade, fluxo e feedback do usuário).

A seguir estão algumas dicas para melhorar a experiência geral do usuário e o desempenho.

• Use o carregamento lento para imagens fora da área visível inicial da página.
• Minimize o bloqueio do thread principal causado por JavaScript e CSS.
• Use cache eficiente e redes de fornecimento de conteúdo (CDNs).
• Evite alterações inesperadas de layout ao definir atributos de tamanho em imagens e incorporações.
• Teste em vários dispositivos reais e condições de rede.

Ferramentas do Lighthouse

Ao longo deste curso e dos cursos anteriores, você usou a ferramenta Lighthouse Google, que está integrada ao DevTools. Ela gera relatórios sobre métricas de desempenho, bem como acessibilidade, melhores práticas e otimização de mecanismos de busca (SEO). Você já está executando esta ferramenta, e ela é considerada em muitas rubricas das tarefas.

A seguir estão alguns dos princípios e métodos de diagnóstico específicos que você tem usado neste curso e em outros anteriores para considerar o desempenho:

• Otimize imagens, dimensione-as adequadamente e considere formatos de última geração
• Defina uma largura e altura explícitas nos elementos de imagem para reduzir mudanças de layout e melhorar o CLS.
• Evite imagens e conteúdo fora da tela, inclusive usando carregamento lento e outros métodos.
• Use uma Rede de Fornecimento de Conteúdo (CDN)
• Evite tamanhos muito grandes de DOM
• Reduza CSS e JavaScript não utilizados.
• Reduza o escopo e a complexidade dos cálculos de estilo

Instruções da Atividade

Nesta atividade, você avaliará o desempenho do site da Igreja usando as ferramentas do Lighthouse.

1. No seu navegador, inicie uma janela anônima ou uma sessão de navegação privada.
2. Navegue até o URL antigo da Igreja: https://lds.org. Por que o URL redireciona para um novo domínio?

   Observe que o serviço de encaminhamento de nome de domínio altera o URL para https://www.churchofjesuschrist.org. (Além disso, seu parâmetro de idioma preferido pode fazer parte da string de consulta da URL com um par nome-valor, por exemplo, ?lang=por )

3. Quanto tempo levou para a página renderizar o botão Entrar acionável da perspectiva do usuário final?
4. Abra o DevTools do navegador nesta página para verificar o desempenho usando métricas.
5. Execute uma auditoria na página usando a aba Performance (Desempenho) e clicando no botão reload (recarregar).

   

   

6. Use a linha do tempo da captura de tela para descobrir quanto tempo levou para finalmente renderizar o botão Entrar. Você pode fazer isso visualmente.

   

7. Usando a ferramenta Lighthouse, selecione Mobile (dispositivo móvel), ative a categoria Performance (Desempenho) e clique em Analyze page load (Analisar carregamento da página).
8. Confira as métricas de esempenho e o diagnóstico.Há algo que você possa sugerir como algo fácil de corrigir?
9. Publique um comentário ou responda a uma publicação no Microsoft Teams.
10. Avalie seu próprio trabalho de carregamento de página usando essas ferramentas de desempenho de página.