Back to Web Dev For Beginners

Analyze a site for performance

5-browser-extension/3-background-tasks-and-performance/assignment.md

latest5.7 KB
Original Source

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:

Specialized analysis tools:

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

CriteriaExemplary (90-100%)Adequate (70-89%)Needs Improvement (50-69%)
Analysis DepthComprehensive analysis using 4+ tools with detailed metrics, root cause analysis, and user impact assessmentGood analysis using 3 tools with clear metrics and basic problem identificationBasic analysis using 2 tools with limited depth and minimal problem identification
Tool DiversityUses browser tools + 3+ third-party services with comparative analysis and insights from eachUses browser tools + 2 third-party services with some comparative analysisUses browser tools + 1 third-party service with limited comparison
Problem IdentificationIdentifies 5+ specific performance issues with detailed root cause analysis and quantified impactIdentifies 3-4 performance issues with good analysis and some impact measurementIdentifies 1-2 performance issues with basic analysis
RecommendationsProvides specific, actionable recommendations with implementation details, expected impact, and modern best practicesProvides good recommendations with some implementation guidance and expected outcomesProvides basic recommendations with limited implementation details
Professional PresentationWell-organized report with clear structure, visual evidence, executive summary, and professional formattingGood organization with some visual evidence and clear structureBasic 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.