Web-Dev-For-Beginners/translations/en/5-browser-extension/3-background-tasks-and-performance/assignment.md

# Analyze a site for performance

## Assignment Overview

Performance analysis is a critical skill for modern web developers. In this assignment, you'll conduct a comprehensive performance audit of a real website, using both browser-based tools and third-party services to identify bottlenecks and propose optimization strategies.

Your task is to provide a detailed performance report that demonstrates your understanding of web performance principles and your ability to use professional analysis tools effectively.

## Assignment Instructions

**Choose a website** for analysis - select one of the following options:
- A popular website you use frequently (news site, social media, e-commerce)
- An open-source project website (GitHub pages, documentation sites)
- A local business website or portfolio site
- Your own project or previous coursework

**Conduct multi-tool analysis** using at least three different approaches:
- **Browser DevTools** - Use Chrome/Edge Performance tab for detailed profiling
- **Online auditing tools** - Try Lighthouse, GTmetrix, or WebPageTest
- **Network analysis** - Examine resource loading, file sizes, and request patterns

**Document your findings** in a comprehensive report that includes:

### Performance Metrics Analysis
- **Load time measurements** from multiple tools and perspectives
- **Core Web Vitals** scores (LCP, FID, CLS) and their implications
- **Resource breakdown** showing which assets contribute most to load time
- **Network waterfall analysis** identifying blocking resources

### Problem Identification
- **Specific performance bottlenecks** with supporting data
- **Root cause analysis** explaining why each issue occurs
- **User impact assessment** describing how problems affect real users
- **Priority ranking** of issues based on severity and fixing difficulty

### Optimization Recommendations
- **Specific, actionable improvements** with expected impact
- **Implementation strategies** for each recommended change
- **Modern best practices** that could be applied (lazy loading, compression, etc.)
- **Tools and techniques** for ongoing performance monitoring

## Research Requirements

**Don't rely only on browser tools** - expand your analysis using:

**Third-party auditing services:**
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Comprehensive audits
- [GTmetrix](https://gtmetrix.com/) - Performance and optimization insights
- [WebPageTest](https://www.webpagetest.org/) - Real-world testing conditions
- [Pingdom](https://tools.pingdom.com/) - Global performance monitoring

**Specialized analysis tools:**
- [Bundle Analyzer](https://bundlephobia.com/) - JavaScript bundle size analysis
- [Image optimization tools](https://squoosh.app/) - Asset optimization opportunities
- [Security headers analysis](https://securityheaders.com/) - Security performance impact

## Deliverables Format

Create a professional report (2-3 pages) that includes:

1. **Executive Summary** - Key findings and recommendations overview
2. **Methodology** - Tools used and testing approach
3. **Current Performance Assessment** - Baseline metrics and measurements
4. **Issues Identified** - Detailed problem analysis with supporting data
5. **Recommendations** - Prioritized improvement strategies
6. **Implementation Roadmap** - Step-by-step optimization plan

**Include visual evidence:**
- Screenshots of performance tools and metrics
- Charts or graphs showing performance data
- Before/after comparisons where possible
- Network waterfall charts and resource breakdowns

## Rubric

| Criteria | Exemplary (90-100%) | Adequate (70-89%) | Needs Improvement (50-69%) |
| -------- | ------------------- | ----------------- | -------------------------- |
| **Analysis Depth** | Comprehensive analysis using 4+ tools with detailed metrics, root cause analysis, and user impact assessment | Good analysis using 3 tools with clear metrics and basic problem identification | Basic analysis using 2 tools with limited depth and minimal problem identification |
| **Tool Diversity** | Uses browser tools + 3+ third-party services with comparative analysis and insights from each | Uses browser tools + 2 third-party services with some comparative analysis | Uses browser tools + 1 third-party service with limited comparison |
| **Problem Identification** | Identifies 5+ specific performance issues with detailed root cause analysis and quantified impact | Identifies 3-4 performance issues with good analysis and some impact measurement | Identifies 1-2 performance issues with basic analysis |
| **Recommendations** | Provides specific, actionable recommendations with implementation details, expected impact, and modern best practices | Provides good recommendations with some implementation guidance and expected outcomes | Provides basic recommendations with limited implementation details |
| **Professional Presentation** | Well-organized report with clear structure, visual evidence, executive summary, and professional formatting | Good organization with some visual evidence and clear structure | Basic organization with minimal visual evidence |

## Learning Outcomes

By completing this assignment, you will demonstrate your ability to:
- **Apply** professional performance analysis tools and methodologies
- **Identify** performance bottlenecks using data-driven analysis
- **Analyze** the relationship between code quality and user experience
- **Recommend** specific, actionable optimization strategies
- **Communicate** technical findings in a professional format

This assignment reinforces the performance concepts learned in the lesson while building practical skills you'll use throughout your web development career.

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:  
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->