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.
Optimizing web performance and critical rendering path
1h 16m 17s
English
Paid
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
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 32 lessons
0:00
/ #1: Introduction
All Course Lessons (32)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 10mo agoWeb Performance Fundamentals
By: Nadia Makarevich"The Foundations of Web Performance" is devoted to the key aspects of enhancing the speed and responsiveness of web applications in the context of React.
Frequently asked questions
What prior knowledge is required before taking this course?
The course includes a lesson on prerequisites, indicating that some foundational knowledge is likely necessary. While specific details aren't provided, familiarity with web technologies like HTML, CSS, and JavaScript would be beneficial, as the course covers topics such as JS vs CSS and render blocking CSS. Understanding basic web development concepts will help in grasping the performance optimization techniques discussed.
What will I learn to build or optimize in this course?
This course focuses on optimizing web applications for performance. You will learn to improve aspects like style calculations, layout, and painting processes to enhance the user experience. The course covers how to manage rendering processes efficiently, including creating and managing layers, optimizing paint performance, and ensuring smooth animations and transitions.
Who is the target audience for this course?
The course is designed for web developers and designers who are interested in improving the performance of their web applications. It is particularly useful for those who want to understand the critical rendering path and how to optimize style calculations, manage layers, and enhance frame rates for a smoother user experience.
How does this course compare in depth and scope to similar courses?
This course offers a detailed exploration of the critical rendering path and web performance optimization. It covers 32 lessons, including technical processes like style calculations, paint profiling, and layer management. Topics such as parser blocking JavaScript and render blocking CSS are specifically addressed, providing a comprehensive overview of techniques to enhance web application performance.
What specific tools or platforms are used in the course?
The course involves using a paint profiler and conducting performance analysis, which suggests that tools like browser developer tools and performance profiling software may be used. These tools help in understanding the rendering processes and identifying bottlenecks in performance to optimize web applications effectively.
What topics are not covered in this course?
While the course thoroughly addresses web performance optimization, it does not cover server-side performance improvements or backend optimization techniques. The focus is on client-side performance, specifically the critical rendering path, style calculations, and rendering processes.
How much time should I expect to commit to this course?
The course consists of 32 lessons, though the total runtime is not specified. Given the detailed topics covered, such as style calculations, paint profiling, and handling render blocking resources, students should be prepared to dedicate several hours to fully engage with the material and practice the techniques discussed.