Performance is a Feature, the janky your website displays, the lesser will be the user interaction and conversions, thereby impacting the growth and revenue of your business.

Yet many people are not able to understand the performance gotchas completely, and don’t make it a part of their deployment process to measure the rendering performance of their webpages.

In this workshop, participants will Performance Audit Web Applications to make them run them at 60fps.

Workshop will consist of:

  • Understand the working behind several jQuery functions and their performance impacts.
  • Profiling with Dev Tools available in Browsers, to explore the rendering issues and their respective remedies.
  • Discussion of case studies of already audited web applications, and discuss their performance remedies as well.
  • Live Audit of Web applications by Workshop attendees.



Outline/Structure of the Workshop

Warmup Session - (Duration: 20 mins)

  • Discuss the best practices to follow while coding your CSS and JS, to avoid performance glitches.
  • Starting with Chrome Dev Tools, give a brief overview of Chrome Dev Tools(specifically Timeline and Memory Profiler).
  • Discuss the functioning of Tracing tool in Chrome.

Discuss 2-3 case studies of already audited Websites (Duration: 20mins)

  • Start with exploring the issues in Rendering performance of websites. Find the issues using tools discussed and profile in front of the workshop attendees.
  • Discuss the issues, performance tweaks or a different approach to consider altogether.

Divide the participants into Teams and perform PerfAudit runup (Duration: 20mins)

  • Share different scenarios with the teams, and ask to share the potential solutions for the same.
  • Let teams discuss and share the approach they'll take to understand the issues, think of how to find the issue, and finally how to resolve the issue

Live Audit websites with Teams and perform PerfAudit marathon (20mins)

  • Share already built webpages(for offline access) / websites(of individual participants) lacking performance.
  • Ask teams to find the issues and resolve the same through coding
  • Team able to resolve the issues at the earliest gets rewarded

Discuss as to How one can make Performance a part of their Deployment process (10mins)

  • Automation is necessary to follow the best practices and never run into an issue related to page performance in production
  • Share and discuss the different tools / integrations available to make it a part of your Continuous Integration cycle.
  • Share and discuss example case studies / workflows used.

Learning Outcome

Participants will:

  • Get in-depth understanding of browser rendering process.
  • Performance impact of different jQuery functions, and the hacks to run Applications at 60fps.
  • Understand Profiling tools/techniques to increase Rendering Performance of a Webpage using Chrome Dev tools and other tools.
  • Learn techniques to consider when coming across issues related to networking/rendering performance, and apply the same in your projects.
  • Live Audit of web applications will help them understand and overcome the issues related to their own project's page performance.

Target Audience




schedule Submitted 5 years ago

Public Feedback