In this talk, we will demys­ti­fy the browser’s ren­der­ing pipeline and explore the dif­fer­ent ways you can enhance the user expe­ri­ence by improv­ing your CSS ren­der­ing performance. 

First off, we will take a look at how the web page is ren­dered in a brows­er, walk through the key stages of the ren­der­ing pipeline, and clar­i­fy what each of them rep­re­sents. You will learn how the brows­er recal­cu­lates styles and how to lim­it the per­for­mance impact that such changes entail. To ful­ly grasp how the ren­der­ing pipeline works, we will use Chrome Dev­Tools and in real time go over the basic work­flow for ana­lyz­ing run­time performance.

Next, we will review Core Web Vitals, Google’s new rank­ing stan­dard – you will learn about the lat­est fea­tures and all-time-favorite best prac­tices to help you boost your web per­for­mance by intro­duc­ing only small changes in the CSS.

Going into detail on per­for­mance opti­miza­tion, we will iden­ti­fy the prac­tices geared towards stream­lin­ing this goal. This time, we will briefly touch upon the already default tech­niques like using CSS ani­ma­tions instead of JavaScript and focus on more inno­v­a­tive approach­es to build­ing an effec­tive per­for­mance improve­ment strat­e­gy. First, we will bring a fresh per­spec­tive on lay­out and paint work in the Brows­er. And as a fin­ish­ing touch, with the lat­est con­tain and con­tent vis­i­bil­i­ty prop­er­ties, we will squeeze out the last bit of improve­ments you can get to boost the per­for­mance score.

All of the cov­ered imple­men­ta­tions will be demoed for you to see their real-world application.