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 - Comprehensive audits
• GTmetrix - Performance and optimization insights
• WebPageTest - Real-world testing conditions
• Pingdom - Global performance monitoring

Specialized analysis tools:

• Bundle Analyzer - JavaScript bundle size analysis
• Image optimization tools - Asset optimization opportunities
• Security headers analysis - 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.

---

Disclaimer:
This document has been translated using the AI translation service 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.