- 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
- At least the basic knowledge of web development
- At least the basic knowledge of CSS
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!
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.Who this course is for:
- Intermediate front end developer
- CSS developer