Zurück zum Programm
08.11.2022 - 11:30 Uhr

The internals of web pages optimization

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.

Lernziele

  • Understanding the browser rendering pipeline
  • How to apply CSS containment strategies & content-visibility
  • Reading the Flame Chart and detecting render work
  • In-browser debugging with DevTools
  • Detecting the layout root and reducing render time
  • Browser’s native performance tools
  • How to reduce layout and paint work in the browser
  • RenderingNG architecture’s capabilities

Niveau

Expertenniveau
Michael Hladky
Michael Hladky
Push-Based
twitter: 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.