Meta Refresh 2015

The web in your pocket

Brameshmadhav Srinivasan


#Perffirst - Optimizing the Critical Rendering Path

Submitted Jan 12, 2015

  • Understand the browser’s Critical rendering Path
  • How to use the modern day tools (dev tools, firebug etc) to improve Performance by optimizing the Critical rendering path
  • Demo of pages before and after optimization
  • How to use page insights and other tools to analyse the performace of the page.


Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from us as web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen?

Optimizing for performance is all about understanding what happens in these intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that’s the critical rendering path.

Optimizing the critical rendering path is critical for improving performance of our pages. The goal is to prioritize and display the content that relates to the primary action the user wants to take on a page.


A laptop to work out examples as I show them. Also, a good pre-read would be

Speaker bio

  • Pursuing a career in the field of Information Technology for about 5 and a half years now
  • Appreciating the nuances of how the ‘job gets done’ across different industries’s IT needs
  • Startup oriented (Love the concept of Lean startup and Minimum viable product)
  • Passionate about programming and learning new technologies.
  • Learning from and contributing to various open source technologies and forums
  • Extensive experience as a Java and JavaScript toolkit programmer. Beginner skills in Hack, Dart and Nodejs



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more