The Chrome Dev­Tools are a pow­er­ful addi­tion to the developer’s toolset that allows find­ing and elim­i­nat­ing your app’s per­for­mance bot­tle­necks. It is packed with fea­tures per­fect for audit­ing page per­for­mance and deriv­ing action­able insights. By visu­al­iz­ing data at a prop­er lev­el of abstrac­tion, it can help you pin­point per­for­mance-relat­ed issues and set a base­line from which to start intro­duc­ing improvements.

That said, know­ing how to run per­for­mance tests on your web appli­ca­tion prop­er­ly is one thing, and putting those met­rics to good use is anoth­er. Both aspects are crit­i­cal to the over­all suc­cess of the endeav­or. Thus it is so cru­cial to under­stand all the ins and outs of per­for­mance data and per­for­mance tooling.

This might sound like a lot but don’t be put off! Over the course of the event, we will walk through the pit­falls and tricks of the trade of Chrome Dev­Tools to pro­vide you with a com­plete roadmap for per­for­mance analy­sis and optimization. 

Chrome Devel­op­er Tools should be seen as a fount of knowl­edge about your app per­for­mance that any­one can ben­e­fit from. At that real­iza­tion, the best part begins – exper­i­ment­ing and find­ing the most effec­tive ways to improve the application’s speed. 

Takeaways

In this work­shop, we will explore the excit­ing hid­den Dev­Tools fea­tures and learn about:

• Core Web Vitals – what they are and how to mea­sure them
• Net­work tab and request debugging
• Improve LCP with fetchpriority
• CSS per­for­mance & the brows­er ren­der pipeline
• How to read the per­for­mance timeline
• Sched­ul­ing tech­niques and sched­ul­ing priority
• User flows — lat­est per­for­mance Dev­Tools & CI