7.2 KiB
Analisar um site para desempenho
Visão Geral da Tarefa
A análise de desempenho é uma habilidade essencial para desenvolvedores web modernos. Nesta tarefa, você realizará uma auditoria abrangente de desempenho de um site real, utilizando ferramentas baseadas em navegador e serviços de terceiros para identificar gargalos e propor estratégias de otimização.
Seu objetivo é fornecer um relatório detalhado de desempenho que demonstre sua compreensão dos princípios de desempenho na web e sua capacidade de usar ferramentas de análise profissional de forma eficaz.
Instruções da Tarefa
Escolha um site para análise - selecione uma das seguintes opções:
- Um site popular que você usa frequentemente (site de notícias, redes sociais, e-commerce)
- Um site de projeto de código aberto (páginas do GitHub, sites de documentação)
- Um site de negócios local ou portfólio
- Seu próprio projeto ou trabalho anterior
Realize uma análise com múltiplas ferramentas utilizando pelo menos três abordagens diferentes:
- Ferramentas de desenvolvedor do navegador - Use a aba de Desempenho do Chrome/Edge para um perfil detalhado
- Ferramentas de auditoria online - Experimente Lighthouse, GTmetrix ou WebPageTest
- Análise de rede - Examine o carregamento de recursos, tamanhos de arquivos e padrões de requisição
Documente suas descobertas em um relatório abrangente que inclua:
Análise de Métricas de Desempenho
- Medições de tempo de carregamento de várias ferramentas e perspectivas
- Pontuações dos Core Web Vitals (LCP, FID, CLS) e suas implicações
- Desempenho de recursos mostrando quais ativos contribuem mais para o tempo de carregamento
- Análise de cascata de rede identificando recursos bloqueantes
Identificação de Problemas
- Gargalos específicos de desempenho com dados de suporte
- Análise de causa raiz explicando por que cada problema ocorre
- Avaliação de impacto no usuário descrevendo como os problemas afetam os usuários reais
- Classificação de prioridade dos problemas com base na gravidade e dificuldade de correção
Recomendações de Otimização
- Melhorias específicas e acionáveis com impacto esperado
- Estratégias de implementação para cada mudança recomendada
- Melhores práticas modernas que podem ser aplicadas (lazy loading, compressão, etc.)
- Ferramentas e técnicas para monitoramento contínuo de desempenho
Requisitos de Pesquisa
Não confie apenas nas ferramentas do navegador - amplie sua análise utilizando:
Serviços de auditoria de terceiros:
- Google Lighthouse - Auditorias abrangentes
- GTmetrix - Insights de desempenho e otimização
- WebPageTest - Condições de teste do mundo real
- Pingdom - Monitoramento de desempenho global
Ferramentas de análise especializadas:
- Bundle Analyzer - Análise de tamanho de pacotes JavaScript
- Ferramentas de otimização de imagens - Oportunidades de otimização de ativos
- Análise de cabeçalhos de segurança - Impacto de desempenho na segurança
Formato dos Entregáveis
Crie um relatório profissional (2-3 páginas) que inclua:
- Resumo Executivo - Visão geral das principais descobertas e recomendações
- Metodologia - Ferramentas utilizadas e abordagem de teste
- Avaliação de Desempenho Atual - Métricas e medições de base
- Problemas Identificados - Análise detalhada dos problemas com dados de suporte
- Recomendações - Estratégias de melhoria priorizadas
- Roteiro de Implementação - Plano de otimização passo a passo
Inclua evidências visuais:
- Capturas de tela das ferramentas de desempenho e métricas
- Gráficos ou tabelas mostrando dados de desempenho
- Comparações antes/depois, quando possível
- Gráficos de cascata de rede e análises de recursos
Rubrica
| Critérios | Exemplar (90-100%) | Adequado (70-89%) | Necessita Melhorar (50-69%) |
|---|---|---|---|
| Profundidade da Análise | Análise abrangente usando 4+ ferramentas com métricas detalhadas, análise de causa raiz e avaliação de impacto no usuário | Boa análise usando 3 ferramentas com métricas claras e identificação básica de problemas | Análise básica usando 2 ferramentas com pouca profundidade e identificação mínima de problemas |
| Diversidade de Ferramentas | Usa ferramentas do navegador + 3+ serviços de terceiros com análise comparativa e insights de cada um | Usa ferramentas do navegador + 2 serviços de terceiros com alguma análise comparativa | Usa ferramentas do navegador + 1 serviço de terceiros com comparação limitada |
| Identificação de Problemas | Identifica 5+ problemas específicos de desempenho com análise detalhada de causa raiz e impacto quantificado | Identifica 3-4 problemas de desempenho com boa análise e alguma medição de impacto | Identifica 1-2 problemas de desempenho com análise básica |
| Recomendações | Fornece recomendações específicas e acionáveis com detalhes de implementação, impacto esperado e melhores práticas modernas | Fornece boas recomendações com alguma orientação de implementação e resultados esperados | Fornece recomendações básicas com poucos detalhes de implementação |
| Apresentação Profissional | Relatório bem organizado com estrutura clara, evidências visuais, resumo executivo e formatação profissional | Boa organização com algumas evidências visuais e estrutura clara | Organização básica com evidências visuais mínimas |
Resultados de Aprendizagem
Ao concluir esta tarefa, você demonstrará sua capacidade de:
- Aplicar ferramentas e metodologias profissionais de análise de desempenho
- Identificar gargalos de desempenho usando análise baseada em dados
- Analisar a relação entre qualidade do código e experiência do usuário
- Recomendar estratégias de otimização específicas e acionáveis
- Comunicar descobertas técnicas em um formato profissional
Esta tarefa reforça os conceitos de desempenho aprendidos na aula enquanto desenvolve habilidades práticas que você usará ao longo de sua carreira como desenvolvedor web.
Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.