Optimizing web performance and critical rendering path

Optimizing web performance and critical rendering path, available at $49.99, has an average rating of 4.5, with 32 lectures, based on 284 reviews, and has 1043 subscribers.

You will learn about How the browser renders the frame The effect of CSS properties on the rendering of the frame How and why should you promote an element into a layer Choosing the right CSS properties for animation Understanding and fixing the paint issue Improve the critical rendering path This course is ideal for individuals who are Intermediate front end developer or CSS developer It is particularly useful for Intermediate front end developer or CSS developer.

Enroll now: Optimizing web performance and critical rendering path

Summary

Title: Optimizing web performance and critical rendering path

Price: $49.99

Average Rating: 4.5

Number of Lectures: 32

Number of Published Lectures: 32

Number of Curriculum Items: 32

Number of Published Curriculum Objects: 32

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will Learn

How the browser renders the frame

The effect of CSS properties on the rendering of the frame

How and why should you promote an element into a layer

Choosing the right CSS properties for animation

Understanding and fixing the paint issue

Improve the critical rendering path

Who Should Attend

Intermediate front end developer

CSS developer

Target Audiences

Intermediate front end developer

CSS developer

Performance is a very important aspect of every web application.

Web page should be loaded as quickly as possible and the animation should flow smoothly.

People are very sensitive to any kind of motion. For any kind of visual change on the screen, like scrolling, hover effect, opening the sidebar etc., the browser is going to render a new frame onto the screen. When rendering of the frame takes longer, the frame rate drops, and it negatively impacts the user experience.

Low frame rate will create a poor user experience. For this to happen, there doesn’t need to be some complex animation, it can happen with just a regular page scrolling!

I am pretty sure that you already had experience with websites that have a low frame rate, which causes that “laggy” animation? You click on something, open the sidebar and the whole page is lagging. Or even worse, you might have noticed that you have a laggy experience when scrolling the web page. Scrolling doesn’t seem like something you had to think about from the performance perspective, but you should. Therefore, in this course we will be talking about fixing the performance issues and so, you might expect that this course is about JavaScript…but surprisingly – it’s not. This course is about CSS. A lot of developers think that as long as JavaScript runs well, there’s nothing else left to do for the performance optimization. JavaScript has a great impact on the performance of the website, however CSS is unjustly neglectred in this area. In many situations CSS might be the only problem.

There’s another very important impact that CSS has on the webpage.

CSS is render blocking (by default). The browser will not begin to render the page until all CSS has been downloaded. Any delays on the Critical Rendering Path will leave users looking at a blank screen. CSS is truly critical if you want to have a fast loading page. Sometimes, just to parse CSS file it takes more than 500ms. Just to parse, without network – just a single CSS loaded from a hard drive will cause users to see only a blank screen until the parsing process is finished.

Optimizing the performance your website may also have an impact on the google search result ranking algorithm.

In this course we will show you CSS in a new light.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Prerequisites

Chapter 2: Browser Rendering Pipeline

Lecture 1: Introduction

Lecture 2: Style Calculations

Lecture 3: Style Calculation Demo

Lecture 4: Layout

Lecture 5: Paint

Lecture 6: Update Layer Tree

Lecture 7: Composite Layers

Lecture 8: Summary

Chapter 3: Optimizing Critical Rendering Path

Lecture 1: Introduction

Lecture 2: FPS

Lecture 3: The Performance of style calculation

Lecture 4: Running Performance Issue

Lecture 5: Paint Profiler

Lecture 6: Performance Analysis

Lecture 7: How layers work

Lecture 8: Creating a new layer

Lecture 9: Multiple Layers

Lecture 10: Older browsers

Lecture 11: Properties impact

Lecture 12: JS vs CSS

Lecture 13: Summary

Chapter 4: Optimizing Critical Resources and Critical Bytes

Lecture 1: Introduction

Lecture 2: Parser Blocking JavaScript

Lecture 3: Render Blocking CSS

Lecture 4: Imports

Lecture 5: Non Render Blocking CSS

Lecture 6: Unused Styles

Lecture 7: Base64

Lecture 8: Minification and Gzip Compression

Lecture 9: Summary

Instructors

Vislavski Miroslav
Professional Web Developer

Rating Distribution

1 stars: 2 votes

2 stars: 6 votes

3 stars: 35 votes

4 stars: 94 votes

5 stars: 147 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!