Certificate in Web Performance Optimization

UNIT 1: Fundamentals of Web Performance

Theory

1. Introduction to web performance optimization
2. Importance of website speed
3. Website loading process
4. Browser rendering basics
5. HTTP and HTTPS fundamentals
6. Understanding latency and bandwidth
7. Page load metrics
8. First Contentful Paint (FCP)
9. Largest Contentful Paint (LCP)
10. Cumulative Layout Shift (CLS)
11. Interaction to Next Paint (INP)
12. Time to First Byte (TTFB)
13. Mobile vs. desktop performance
14. Performance budgets and best practices

Practical

1. Test a website's loading speed
2. Use browser Developer Tools
3. Inspect network requests
4. Identify slow-loading resources
5. Analyze page-size breakdown
6. Check image, CSS and JavaScript resources
7. Measure Core Web Vitals
8. Compare desktop and mobile performance
9. Create a basic performance report
10. Identify major performance bottlenecks

UNIT 2: Image, Media & Front-End Optimization

Theory

1. Importance of image optimization
2. Image formats: JPG, PNG, SVG, WebP and AVIF
3. Image compression
4. Responsive images
5. Image dimensions and resolution
6. Lazy loading
7. Video optimization basics
8. CSS optimization fundamentals
9. Minification concepts
10. HTML optimization
11. JavaScript optimization basics
12. Reducing unnecessary page elements
13. Font optimization
14. Critical rendering path basics

Practical

1. Identify large images
2. Compress website images
3. Convert suitable images to modern formats
4. Resize oversized images
5. Implement responsive images
6. Add lazy loading
7. Optimize video assets
8. Minify HTML/CSS/JavaScript
9. Remove unused CSS where appropriate
10. Optimize web fonts
11. Reduce unnecessary scripts
12. Compare website performance before and after optimization

UNIT 3: Caching, Compression, CDN & Server Optimization

Theory

1. Introduction to browser caching
2. Cache-control concepts
3. HTTP caching headers
4. Server-side caching
5. Content compression
6. Gzip and Brotli concepts
7. Content Delivery Networks (CDNs)
8. CDN benefits and limitations
9. DNS and connection basics
10. HTTP/2 fundamentals
11. HTTP/3 and QUIC overview
12. Server response time
13. Time to First Byte optimization
14. Hosting and server performance basics
15. Database performance fundamentals

Practical

1. Inspect HTTP response headers
2. Check browser caching
3. Configure basic cache rules
4. Enable appropriate compression
5. Compare compressed and uncompressed resources
6. Set up or simulate CDN delivery
7. Analyze server response time
8. Identify slow server requests
9. Test different caching strategies
10. Measure TTFB improvements
11. Create a server-performance checklist

UNIT 4: Advanced Front-End & JavaScript Performance

Theory

1. JavaScript performance fundamentals
2. Render-blocking resources
3. Script loading strategies
4. async and defer concepts
5. Code splitting
6. Lazy loading JavaScript
7. Reducing JavaScript execution time
8. DOM size and performance
9. CSS rendering performance
10. Critical CSS concepts
11. Preload, prefetch and preconnect
12. Third-party scripts
13. Web workers overview
14. Responsive performance
15. Mobile performance optimization
16. Accessibility and performance relationship

Practical

1. Identify render-blocking resources
2. Optimize JavaScript loading
3. Apply defer or async appropriately
4. Reduce unnecessary JavaScript
5. Analyze JavaScript execution
6. Inspect DOM size
7. Optimize CSS delivery
8. Test preload and preconnect
9. Review third-party scripts
10. Optimize mobile performance
11. Test performance using browser tools
12. Compare optimized and unoptimized pages

UNIT 5: Performance Testing, Monitoring & Final Project

Theory

1. Website performance testing workflow
2. Performance auditing tools
3. Lighthouse fundamentals
4. PageSpeed Insights overview
5. Browser performance tools
6. Core Web Vitals monitoring
7. Performance profiling
8. Identifying performance bottlenecks
9. Performance regression testing
10. Real User Monitoring (RUM) concepts
11. Synthetic testing concepts
12. Creating performance reports
13. Setting performance goals
14. Website optimization workflow
15. Maintaining long-term performance
16. Professional reporting and presentation

Practical

Project 1 – Website Performance Audit

1. Select a website
2. Run a performance audit
3. Record Core Web Vitals
4. Analyze page size
5. Identify slow resources
6. Identify render-blocking resources
7. Analyze images and media
8. Review JavaScript and CSS
9. Prepare optimization recommendations
10. Create a performance report

Project 2 – Website Optimization

1. Create a baseline performance report
2. Optimize images
3. Optimize HTML/CSS
4. Optimize JavaScript
5. Configure caching
6. Enable compression
7. Optimize fonts
8. Improve loading order
9. Optimize mobile experience
10. Retest the website

Final Project

1. Select a website or sample web project
2. Conduct a complete performance audit
3. Establish performance targets
4. Identify bottlenecks
5. Apply optimization techniques
6. Test Core Web Vitals
7. Compare before-and-after results
8. Document all changes
9. Prepare a professional performance report
10. Present the final optimization project

3-Month Course Progression

MONTH 1 – Performance Fundamentals

Unit 1: Fundamentals of Web Performance

Unit 2: Image, Media & Front-End Optimization

Students learn:

• Website speed fundamentals
• Browser rendering
• Core Web Vitals
• Performance measurement
• Image optimization
• Responsive images
• Lazy loading
• HTML/CSS/JavaScript optimization

Practical Project: Audit and optimize the media and front-end assets of a sample website.

MONTH 2 – Server & Code Optimization

Unit 3: Caching, Compression, CDN & Server Optimization

Unit 4: Advanced Front-End & JavaScript Performance

Students learn:

• Browser caching
• Compression
• CDN concepts
• Server response time
• TTFB
• JavaScript optimization
• CSS optimization
• Render-blocking resources
• Mobile performance

Practical Project: Improve the loading performance of a sample website and document the changes.

MONTH 3 – Testing, Monitoring & Final Optimization

Unit 5: Performance Testing, Monitoring & Final Project

Students learn:

• Performance auditing
• Lighthouse
• PageSpeed Insights
• Core Web Vitals
• Performance profiling
• Monitoring
• Performance reports
• Optimization workflow

Final Project Workflow

Website Selection → Baseline Audit → Performance Measurement → Bottleneck Identification → Optimization → Testing → Core Web Vitals Check → Before/After Comparison → Documentation → Final Presentation

Final Assessment

Theory Examination

Students will be assessed on:

• Web performance fundamentals
• Browser rendering
• Core Web Vitals
• Image optimization
• HTML/CSS/JavaScript optimization
• Caching
• Compression
• CDN
• Server performance
• Mobile optimization
• Performance testing

Practical Examination

Students should demonstrate:

1. Run a website performance audit
2. Measure Core Web Vitals
3. Analyze network requests
4. Identify large resources
5. Optimize images
6. Optimize CSS and JavaScript
7. Configure basic caching
8. Check compression
9. Identify render-blocking resources
10. Compare before-and-after performance

Final Project

Students complete a full Website Performance Optimization Project:

Audit → Analyze → Optimize → Test → Measure → Document → Present

The final report should include:

• Initial performance score
• Core Web Vitals
• Identified problems
• Optimization steps
• Technical changes
• Final performance results
• Before-and-after comparison
• Recommendations for ongoing optimization