You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
6.1 KiB
100 lines
6.1 KiB
# Analyze wan site for performance
|
|
|
|
## Assignment Overview
|
|
|
|
Performance analysis na important skill for modern web developers. For this assignment, you go have to do detailed performance audit for real website, using both browser-based tools and third-party services to find bottlenecks and suggest how to optimize am.
|
|
|
|
Your work na to provide detailed performance report wey go show how you sabi web performance principles and how you fit use professional analysis tools well-well.
|
|
|
|
## Assignment Instructions
|
|
|
|
**Choose one website** for analysis - pick one from the options wey follow:
|
|
- One popular website wey you dey use often (news site, social media, e-commerce)
|
|
- One open-source project website (GitHub pages, documentation sites)
|
|
- One local business website or portfolio site
|
|
- Your own project or previous coursework
|
|
|
|
**Do multi-tool analysis** using at least three different ways:
|
|
- **Browser DevTools** - Use Chrome/Edge Performance tab for detailed profiling
|
|
- **Online auditing tools** - Try Lighthouse, GTmetrix, or WebPageTest
|
|
- **Network analysis** - Look resource loading, file sizes, and request patterns
|
|
|
|
**Document your findings** for one complete report wey get:
|
|
|
|
### Performance Metrics Analysis
|
|
- **Load time measurements** from many tools and viewpoints
|
|
- **Core Web Vitals** scores (LCP, FID, CLS) and wetin dem mean
|
|
- **Resource breakdown** showing which assets dey contribute most to load time
|
|
- **Network waterfall analysis** wey identify blocking resources
|
|
|
|
### Problem Identification
|
|
- **Specific performance bottlenecks** with data wey support am
|
|
- **Root cause analysis** wey explain why each problem happen
|
|
- **User impact assessment** wey describe how the problems affect real users
|
|
- **Priority ranking** of issues based on how serious and how e hard to fix
|
|
|
|
### Optimization Recommendations
|
|
- **Specific, actionable improvements** with expected impact
|
|
- **Implementation strategies** for each recommended change
|
|
- **Modern best practices** wey fit apply (lazy loading, compression, etc.)
|
|
- **Tools and techniques** for ongoing performance monitoring
|
|
|
|
## Research Requirements
|
|
|
|
**No rely only on browser tools** - expand your analysis with:
|
|
|
|
**Third-party auditing services:**
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Full 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
|
|
|
|
Make one professional report (2-3 pages) wey get:
|
|
|
|
1. **Executive Summary** - Main findings and recommendations overview
|
|
2. **Methodology** - Tools wey you use and how you do the testing
|
|
3. **Current Performance Assessment** - Baseline metrics and measurements
|
|
4. **Issues Identified** - Detailed problem analysis with supporting data
|
|
5. **Recommendations** - Prioritized improvement plans
|
|
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 e fit
|
|
- 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 go show say you fit:
|
|
- **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 professional way
|
|
|
|
This assignment dey reinforce the performance concepts wey you learn for the lesson and help you build practical skills wey you go use for your entire web development career.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Disclaimer**:
|
|
Dis document na to say e don be translated wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translation fit get mistake or no clear. Di original document wey e dey for dia language na di one wey get correct info. If na important info, make person wey sabi translate for human do am. We no go take any wahala or kasala wey fit happen if person no understand or interpret dis translation well well.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |