Optimizing web performance and critical rendering path

1h 16m 17s
English
Paid

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.

Read more about the course

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.

Requirements:
  • At least the basic knowledge of web development
  • At least the basic knowledge of CSS
Who this course is for:
  • Intermediate front end developer
  • CSS developer

What you'll 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

Watch Online Optimizing web performance and critical rendering path

Join premium to watch
Go to premium
# Title Duration
1 Introduction 04:15
2 Prerequisites 01:28
3 Introduction 02:55
4 Style Calculations 03:19
5 Style Calculation Demo 06:05
6 Layout 02:26
7 Paint 02:32
8 Update Layer Tree 01:46
9 Composite Layers 02:49
10 Summary 00:56
11 Introduction 01:21
12 FPS 02:14
13 The Performance of style calculation 04:30
14 Running Performance Issue 02:42
15 Paint Profiler 01:17
16 Performance Analysis 03:16
17 How layers work 02:08
18 Creating a new layer 02:02
19 Multiple Layers 01:58
20 Older browsers 01:55
21 Properties impact 04:31
22 JS vs CSS 01:52
23 Summary 00:32
24 Introduction 02:32
25 Parser Blocking JavaScript 02:02
26 Render Blocking CSS 02:18
27 Imports 01:39
28 Non Render Blocking CSS 02:09
29 Unused Styles 02:15
30 Base64 01:55
31 Minification and Gzip Compression 02:06
32 Summary 00:32

Similar courses to Optimizing web performance and critical rendering path

Lemon Squeezy Course

Lemon Squeezy CourseProdigies University

Category: Others
Duration 1 hour 21 minutes 37 seconds
The Complete Basic Electricity & Electronics Course

The Complete Basic Electricity & Electronics Courseudemy

Category: Others
Duration 6 hours 39 minutes 38 seconds
Programming Language with LLVM

Programming Language with LLVMDmitry Soshnikov

Category: Others
Duration 2 hours 46 minutes 4 seconds
Building a Transpiler from scratch

Building a Transpiler from scratchDmitry Soshnikov

Category: Others
Duration 2 hours 3 seconds
Master Gorgeous UI Design

Master Gorgeous UI Designtogether.art (Pablo Stanley)

Category: Others
Duration 10 hours 56 minutes 16 seconds
Essential Poker Math for No Limit Holdem

Essential Poker Math for No Limit Holdemudemy

Category: Others
Duration 9 hours 49 minutes 5 seconds
Sidekiq in Practice

Sidekiq in PracticeNate Berkopec

Category: Others
Duration 1 hour 4 minutes 45 seconds
Team Dynamics and Soft Skills for Developers | Don’t Imitate

Team Dynamics and Soft Skills for Developers | Don’t ImitateAnthony Alicea

Category: Others
Duration 5 hours 8 minutes 46 seconds
Advanced Prompt Engineering

Advanced Prompt EngineeringDAIR.AI

Category: Others
Duration 1 hour 23 minutes 57 seconds