JSFoo 2016

Css and JS are the two main blocking elements when it comes to critical rendering path. Today’s modern apps are mostly on React or other SPA’s frameworks which make it difficult to maintain the asset loading pipeline and track the page load metrics.

The talk would be cover different ways of improving the first paint time, removing parse blocking JS from the page maintaining multiple JS on the pages and execution order, the pre-connect, pre-fetch meta tags for managing assets and connections, and chunking of the response from the server for the faster download.

The talk introduces PWA@Housing.com and how caching strategies and service workers help improve the page speed and better UX helps improve the percieved speed. The talk is inpired by the efforts that went into revamping Housing.com’s mobile website and making it stand at best in almost all known metrics possible.

Outline

Summary:

1. Critical Rendering Path
2. Loading multiple JS
3. Async false the saviour to script loading
4. Prebrowsing tags
5. Chunking response from server
6. Percieved Speed

Requirements

Basics of Critical Rendering Path and Asset Loading in SPAs.

Speaker bio

I’m front end developer at Housing.com, working on multiple single page applications frameworks such as React and Backbone, and Node.js for last 3 years. We here at Housing, have been working on making our apps at par with PWA standards, and making them as performant as possible through both better UX and better performance.

Links

• https://housing.com/
• https://www.linkedin.com/in/rahuly026
• https://github.com/dxtr026

Slides

http://www.slideshare.net/devrj/non-blocking-js-loading-first-paint-and-asset-loading-in-modern-sp-as