Web-Dev-For-Beginners/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.