Meta Refresh 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.

Outline

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.

Requirements

A laptop to work out examples as I show them. Also, a good pre-read would be http://juvenileoutpost.blogspot.in/2015/03/perffirst-understanding-critical.html

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

Links

• My blog on understanding critical rendering path : http://juvenileoutpost.blogspot.in/2015/03/perffirst-understanding-critical.html
• CRP detail : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
• How to Optimize : https://developers.google.com/web/fundamentals/performance/
• Chrome plugin developed by my colleague and me for measuring and optimizing : https://chrome.google.com/webstore/detail/analyze-page-performance/hemibacgndhdhkfahkjdedjdgfapmfki
• Ilya’s talk on the same topic : https://www.youtube.com/watch?v=YV1nKLWoARQ

Slides

http://www.slideshare.net/sbmadhav/optimizing-the-critical-rendering-path-meta-refresh-2015