Frontend Performance Engineering

Description

Module 1: Introduction to Front-end Performance Engineering

1.1 What is Front-end Performance Engineering?

1.2 Why Front-end Performance Matters

1.3 Key Metrics for Measuring Performance

1.4 Tools for Performance Measurement and Analysis

Module 2: Understanding Web Performance Fundamentals

2.1 HTTP Basics and Performance Implications

2.2 Browser Rendering Process

2.3 Critical Rendering Path

2.4 Network Performance Optimization

2.5 Caching Strategies

Module 3: Optimizing Web Assets

3.1 Optimizing Images: Formats, Compression, and Lazy Loading

3.2 Minification and Bundling of CSS and JavaScript

3.3 Efficient Font Loading Techniques

3.4 Defer vs. Async Loading of Scripts

3.5 Handling Third-party Scripts and Dependencies

Module 4: Responsive Web Design for Performance

4.1 Responsive Design Principles and Techniques

4.2 Viewport Optimization

4.3 Media Queries and Breakpoints

4.4 Adaptive Images and Media

Module 5: JavaScript Performance Optimization

5.1 Identifying and Eliminating JavaScript Bottlenecks

5.2 Reducing Execution Time with Optimized Algorithms

5.3 Memory Management and Garbage Collection

5.4 Async Programming and Promises

5.5 Progressive Web Apps (PWAs) for Performance

Module 6: CSS Performance Optimization

6.1 Efficient CSS Selectors

6.2 CSS Preprocessing and Postprocessing

6.3 Critical CSS Generation

6.4 CSS Grids and Flexbox for Performance

6.5 CSS Transitions and Animations

Who this course is for:

• Performance Testers
• Performance Engineers
• Chaos Engineers