5.7 KiB
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:
- Executive Summary - Key findings and recommendations overview
- Methodology - Tools used and testing approach
- Current Performance Assessment - Baseline metrics and measurements
- Issues Identified - Detailed problem analysis with supporting data
- Recommendations - Prioritized improvement strategies
- 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.