building fast and performant apps

Rahul Yadav (@dxtr026)Building fast and performant apps

Housing Go

This talk is mostly derived from the experiences and learnings we had while developing our PWA, Housing Go.

Fast and Performant Apps

Source - http://static.comicvine.com/uploads/original/11120/111200613/4204672-3221623855-The_F.jpg

So, what are fast or performant apps. What the one thing that comes to ones mind when talking about fast apps.

Fast and Performant Apps

Its page load time, Page load time though may not be the accurate indicator or perceived speed but that what is there on top of our mind. The most important factor from which page load time is derived is Critical Rendering Path. You optimize you critical rendering path, you fix your CRP everything will fall into place.

Metrics to trackFirst PaintFirst Meaningful Paint

First Interaction

I will show you two versions of this webpage, one version will not be optimized for the critical render path and one version (the page you are reading) is optimized.

Critical Rendering Path

Source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

What is the critical rendering path?

It is the series of events that must take place to render (display) the initial view of a webpage.Example: get html > get resources > parse > display webpageOptimizing these events result in significantly faster webpages.

Version 1

{ connectivity : 3G, location: Dulles:Chrome,url : https://housing.com/in/buy/mumbai/powai }

This is how it looks when a user opens the website on a 3G connection.


5.2s7.4s6.9sFirst Interaction

5.2s7.4s6.9sFirst Paint

By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed. Rendering blocking css can sometimes be the reason for the white screens that we see on browsers.

...

...

...

5.2s7.4s6.9sFirst Paint

Let me show you an example. Here the first resource requested in the css for our page. It's the first request as it was in the head at the start. The content Download completed at 3.2s but the browser waits until the css is loaded and parsed to start render, which happens at 4.6s.

First Paint


5.2s7.4s6.9s

This is how it looks when a user opens the website on a 3G connection.

First Paint

Inline Critical CSS

5.2s7.4s6.9s

Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.

First Paint

...

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}footer,header,main,menu,nav,section{display:block}li,ol,ul{list-style:none;padding:0;margin:0}a{background-color:transparent;color:#000;text-decoration:none}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}img{border:0}svg:not(:root){overflow:hidden}button,input,select{color:inherit;font:inherit;margin:0;outline:none}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}.shell .shell-header{position:absolute;top:5px;padding:0 10px;line-height:40px;color:#fff;font-size:18px;-webkit-transition:transform .2s linear;-webkit-transition:-webkit-transform .2s linear;transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear,-webkit-transform .2s linear;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;will-change:transform}.shell .shell-header.hide-sheader{-webkit-transform:translateY(-50px);transform:translateY(-50px)}

.collectioncard{width:210px;height:83px;background-color:#fff;position:relative;margin-right:12px;box-shadow:0 2px 2px rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1)}.collectioncard>div:last-child{margin-right:0}.collectioncard .col-top-box{height:40px;padding:12px}.collectioncard .col-top-box .col-title{margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collectioncard .col-top-box.stub{margin:0;background-color:#f9f9f9}.collectioncard .col-bottom-box{width:100%;line-height:18px;color:#7323dc;padding:12px;border-top:1px solid #e6e6e6;display:block;font-size:12px}.collectioncard .col-bottom-box.stub{width:170px;padding:8px;margin:14px 0 0 10px;background-color:#f9f9f9;border-color:#f9f9f9}.collectioncard .col-vl{width:49%;text-align:left}.home-seed-container .seed-elem-container{border-bottom:none;box-shadow:0 1px 2px rgba(0,0,0,.1);margin-bottom:10px;overflow:hidden}.home-seed-container .seed-elem-container:last-of-type{margin-bottom:0}.recent-search .icon-last-search{font-size:60px;color:#e62878}

... ...

5.2s7.4s6.9s

Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.

First Paint


5.2s7.4s6.9s

This is a webpage test with inline css show that the content downloaded still gets completed at around 3.1 seconds, even though the doc size is increased. The improvement is that start render happens at around 3.5s, improvement of about 1s.

First Paint

5.2s7.4s6.9s





3.7s7.0s6.5s




By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed. Rendering blocking css can sometimes be the reason for the white screens that we see on browsers.

index.htmlvendor.jsapp.jsview.js


In modern SPAs it's important to maintain separate chunks of JS files and at the same time download and execute them synchronously. In context of housing.com there are generally 3 files that we load for our app to work. General download techniques are as follows.

First InteractionPlain script tags - Download together, execute in order after any pending CSS, blocks rendering until complete and is itself parse blocking.

3.7s7.0s6.5s

... ...

Spec says: Download together, execute in order after any pending CSS, block rendering until complete.

Browsers say: Yes sir!

First InteractionDefer - Download together, execute in order just before DOMContentLoaded.

3.7s7.0s6.5s

... ...

Spec says: Download together, execute in whatever order they download in.The browsers in red say: Whats async? Im going to load the scripts as if it werent there.Other browsers say: Yeah, ok.

First Interaction

Source - http://images2.fanpop.com/image/photos/9800000/Chemical-X-powerpuff-girls-movie-9885363-427-320.jpg

3.7s7.0s6.5s

What is the real solution .. putting JS at the bottom of the page.

First InteractionAsync false - Download together, execute in order as soon as all download.

3.7s7.0s6.5s

... ... [vendor.js,app.js','view.js'].forEach( function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); });

Spec says: Download together, execute in order as soon as all download.http://www.html5rocks.com/en/tutorials/speed/script-loading/async = false telll the browser to not execute the scripts asynchronously and in order they are added dynamically generated scripts do not block rendering

explain html async=false

First Interaction When does the app.js load ?When does the view.js load ?When does the componentDidMount of the view gets called (JS interactive) ?

3.7s7.0s6.5s

First Interaction

3.7s7.0s6.5swindow.performance.mark(label)

How does talk console.time works.

First Interaction

3.7s7.0s6.5sTimings for app.js

Mention about vendor.js and manifest.js ,

First Interaction

3.7s7.0s6.5sTimings for view.js

Mention about vendor.js and manifest.js

First Interaction

3.7s7.0s6.5sTimings for interaction

Mention about vendor.js and manifest.js

First Interactiondynamically inserted script tagsasync=falsehttp://www.html5rocks.com/en/tutorials/speed/script-loading/

3.7s7.0s6.5s

Loading scripts this way is supported by everything that supports the async attribute, with the exception of Safari 5.0 (5.1 is fine). Additionally, all versions of Firefox and Opera are supported as versions that dont support the async attribute conveniently execute dynamically-added scripts in the order theyre added to the document anyway.





3.7s7.0s4.7s



First Interaction

Browser PreloadersSource -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping-tom-figurine-to-scare-people-8873-1.jpg

3.7s7.0s4.7s

When the browser is blocked on a script, a second lightweight parser scans the rest of the markup looking for other resources e.g. stylesheets, scripts, images etc., that also need to be retrieved.The pre-loader then starts retrieving these resources in the background with the aim that by the time the main HTML parser reaches them they may have already been downloaded and so reduce blocking later in the page.Pre-loaders extract URLs from markup and dont / cannot execute javascript so any URLs inserted using javascript arent visible to it.

First InteractionSource -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping-tom-figurine-to-scare-people-8873-1.jpg

3.7s7.0s4.7sPre-browsing Meta Tags

When the browser is blocked on a script, a second lightweight parser scans the rest of the markup looking for other resources e.g. stylesheets, scripts, images etc., that also need to be retrieved.The pre-loader then starts retrieving these resources in the background with the aim that by the time the main HTML parser reaches them they may have already been downloaded and so reduce blocking later in the page.Pre-loaders extract URLs from markup and dont / cannot execute javascript so any URLs inserted using javascript arent visible to it.

First InteractionResource : https://css-tricks.com/prefetching-preloading-prebrowsing/ DNS resolution

3.7s7.0s4.7s

...

building fast and performant apps

Engineering