You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
7.2 KiB
107 lines
7.2 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-22T23:16:56+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# 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](https://developers.google.com/web/tools/lighthouse) - Auditorias abrangentes
|
|
- [GTmetrix](https://gtmetrix.com/) - Insights de desempenho e otimização
|
|
- [WebPageTest](https://www.webpagetest.org/) - Condições de teste do mundo real
|
|
- [Pingdom](https://tools.pingdom.com/) - Monitoramento de desempenho global
|
|
|
|
**Ferramentas de análise especializadas:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Análise de tamanho de pacotes JavaScript
|
|
- [Ferramentas de otimização de imagens](https://squoosh.app/) - Oportunidades de otimização de ativos
|
|
- [Análise de cabeçalhos de segurança](https://securityheaders.com/) - Impacto de desempenho na segurança
|
|
|
|
## Formato dos Entregáveis
|
|
|
|
Crie um relatório profissional (2-3 páginas) que inclua:
|
|
|
|
1. **Resumo Executivo** - Visão geral das principais descobertas e recomendações
|
|
2. **Metodologia** - Ferramentas utilizadas e abordagem de teste
|
|
3. **Avaliação de Desempenho Atual** - Métricas e medições de base
|
|
4. **Problemas Identificados** - Análise detalhada dos problemas com dados de suporte
|
|
5. **Recomendações** - Estratégias de melhoria priorizadas
|
|
6. **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](https://github.com/Azure/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. |