Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Frontend Performance Engineering
Rating: 4.4 out of 5(47 ratings)
90 students

Frontend Performance Engineering

Performance Engineering, Performance Testing
Created bySid Sriram
Last updated 4/2024
English
English [Auto],

What you'll learn

  • INTRODUCTION OF FRONTEND PERFORMANCE ENGINEERING
  • UNDERSTANDING WEB PERFORMANCE FUNDAMENTALS
  • OPTIMIZING WEB ASSETS
  • RESPONSIVE WEB DESIGN FOR PERFORMANCE
  • JAVASCRIPT PERFORMANCE OPTIMIZATION
  • CSS PERFORMANCE OPTIMIZATION
  • LIVE DEMO

Explore related topics

Course content

1 section • 7 lectures • 1h 57m total length

  • Introduction25:05

    Explore front end performance engineering by rendering, assets, and network optimization to deliver fast, responsive web applications, using metrics like first contentful paint and largest contentful paint.

  • Understanding Web Performance Fundamentals18:11

    Explore web performance fundamentals by mastering HTTP basics and the critical rendering path. Learn network optimization and caching strategies, including compression and CDNs, to accelerate front-end loads.

  • Optimizing Web Assets Final19:07

    Optimize web assets to improve frontend performance by compressing and lazy loading images, minifying and bundling CSS/JS, and applying efficient font loading, CDN delivery, and script management.

  • Responsive Web Design for Performance6:00

    Explore responsive web design for performance by applying fluid grids, flexible units, and media queries to optimize adaptive images and content across devices, using viewport concepts and testing with Lighthouse.

  • JavaScript Performance Optimization17:03

    Profile and fix JavaScript bottlenecks to boost page speed using Chrome devtools and Lighthouse, optimizing DOM, loops, and algorithms with async patterns, caching, and progressive web apps.

  • CSS Performance Optimization9:56

    Optimize css performance by efficient selectors, pre-processing and post-processing, critical css generation, grid and flexbox, minify, bundle, cache, and test across browsers.

  • DEMO22:00

    Learn practical frontend performance engineering with single user testing, developer tools, network and waterfall analysis, and lighthouse and webpagetest diagnostics to optimize JavaScript, CSS, and HTML.

Requirements

  • No Programming experience required

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

Report abuse