Modern CSS Rendering Performance: The Internals of Web Pages Optimization

Development Practices

In this talk, we'll demystify the browser's rendering pipeline and explore the different ways you can enhance the user experience by improving your CSS rendering performance.

First off, we'll take a look at how the web page is rendered in a browser, walk through the key stages of the rendering pipeline, and clarify what each of them represents. You'll learn how the browser recalculates styles and how to limit the performance impact that such changes entail. To fully grasp how the rendering pipeline works, we will use Chrome DevTools and in real time go over the basic workflow for analyzing runtime performance.

Next, we'll review Core Web Vitals, Google's new ranking standard—you'll learn about the latest features and all-time favorite best practices to help you boost your web performance introducing only small changes in CSS.

Going into detail on performance optimization, we'll identify the practices geared towards streamlining this goal. We'll skip the already default techniques like using CSS animations instead of JavaScript and focus on more innovative approaches to building an effective performance improvement strategy. First, we'll bring a fresh perspective on transform vs transition properties in CSS and as a finishing touch, with the latest contain and content visibility properties, we'll squeeze out the last bit of improvements you can get to boost the performance score.

All of the covered implementations will be demoed for you to see their real-world application.

Michael Hladky

Michael Hladky is a Google Developer Expert (GDE), Microsoft MVP, trainer, and consultant with a focus on Angular and RxJS. For years he has been helping companies and developers to set up scalable architectures and performant processes enabling teams to keep up with state-of-the art development. A vibrant member of the tech community, he organizes multiple community events and workshops each year to give back.