Building Fast and Performant Apps.

Rahul Yadav (@dxtr026) Building fast and performant apps

Housing Go

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

Fast and Performant Apps

Metrics to track First Paint First Meaningful Paint First Interaction

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

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

Metrics to track First Paint First Meaningful Paint 5.2s 7.4s
6.9s First Interaction

5.2s 7.4s 6.9s First Paint

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width, initial-scale=1.0,
maximum-scale=1.0, user- scalable=no, minimum-scale=1.0' /> <meta name="mobile-web-app-capable" content="yes"> ... <link rel='stylesheet' href='https://housingcdn.com/mobile/searchView.css' type='text/css'/> ... </head> <body> ... </body> </html> 5.2s 7.4s 6.9s First Paint

First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url :
‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s

First Paint Inline Critical CSS 5.2s 7.4s 6.9s

First Paint <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta
http-equiv = 'Content-type' content = 'text/plain; charset=x-user-defined'/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimum-scale=1"/> ... <style type="text/css" id="app-css"> 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)} </style> <style type="text/css" id="chunk-searchView"> .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} </style> ... </head> <body> ... </body> </html> 5.2s 7.4s 6.9s

First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url :
‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s

First Paint 5.2s 7.4s 6.9s

6.9s First Interaction 3.7s 7.0s 6.5s

3.7s 7.0s 6.5s First Interaction

index.html vendor.js app.js view.js 3.7s 7.0s 6.5s First Interaction

First Interaction Plain script tags - Download together, execute in
order after any pending CSS, blocks rendering until complete and is itself parse blocking. 3.7s 7.0s 6.5s <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... <script src="vendor.js"></script> <script src="app.js"></script> <script src="view.js"></script> </body> </html>

First Interaction Defer - Download together, execute in order just
before DOMContentLoaded. 3.7s 7.0s 6.5s <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... <script src=“vendor.js" defer ></script> <script src=“app.js" defer ></script> <script src=“view.js" defer ></script> </body> </html>

First Interaction Aysnc - Download together, execute in whatever order
they download in. 3.7s 7.0s 6.5s <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... <script src=“vendor.js" async ></script> <script src=“app.js" async ></script> <script src=“view.js" async ></script> </body> </html>

First Interaction Source - http://images2.fanpop.com/image/photos/9800000/Chemical-X-powerpuff-girls-movie-9885363-427-320.jpg 3.7s 7.0s 6.5s

First Interaction Async false - Download together, execute in order
as soon as all download. 3.7s 7.0s 6.5s <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... <script> [‘vendor.js’,‘app.js','view.js'].forEach( function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); }); </script> </body> </html>

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.7s 7.0s 6.5s

First Interaction 3.7s 7.0s 6.5s window.performance.mark(‘label’)

First Interaction 3.7s 7.0s 6.5s Time (ms) 4500 5125 5750
6375 7000 1 2 3 4 <script> <script defer></script> Async = false Timings for app.js

7125 8000 1 2 3 4 <script> <script defer></script> Async = false Timings for view.js

7125 8000 1 2 3 4 <script> <script defer></script> Async = false Timings for interaction

First Interaction • dynamically inserted script tags • async=false http://www.html5rocks.com/en/tutorials/speed/script-loading/
3.7s 7.0s 6.5s

First Interaction Browser Preloaders Source -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping-tom-figurine-to-scare-people-8873-1.jpg 3.7s 7.0s 4.7s

First Interaction Source -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping-tom-figurine-to-scare-people-8873-1.jpg 3.7s 7.0s 4.7s Pre-browsing Meta Tags

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ DNS resolution 3.7s 7.0s 4.7s
<!DOCTYPE html> <html lang="en"> <head> ... <link rel=“dns-prefetch" href="//assets-0.housing.com"> ... </head> <body> ... </body> </html>

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ TCP handshake + TLS negotiation
3.7s 7.0s 4.7s <!DOCTYPE html> <html lang="en"> <head> ... <link rel="preconnect" href="//assets-1.housing.com"> ... </head> <body> ... </body> </html>

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ Resource definitely needed in future
3.7s 7.0s 4.7s <!DOCTYPE html> <html lang="en"> <head> ... <link rel="prerender" href=“https://housing.com”> ... </head> <body> ... </body> </html>

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ Resource definitely needed in future.
Optional low priority fetch 3.7s 7.0s 4.7s <!DOCTYPE html> <html lang="en"> <head> ... <link rel="prefetch" href=“mystery-man.jpg”> ... </head> <body> ... </body> </html>

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ Mandatory and high-priority fetch for
a resource that is necessary for the current navigation 3.7s 7.0s 4.7s <!DOCTYPE html> <html lang="en"> <head> ... <link rel="preload" href=“app.js” as=“script”> ... </head> <body> ... </body> </html>

3.7s 7.0s 4.6s First Meaningful Paint

First Paint Client Side Rendering 3.7s 7.0s 4.6s

First Meaningful Paint 3.7s 7.0s 4.6s

First Paint Server Side Rendering 3.7s 7.0s 4.6s

First Meaningful Paint Server Side Rendered App 3.7s 7.0s 4.6s

Why server side rendering ? 3.7s 7.0s 4.6s

Streaming response from server Source - https://www.colourbox.com/preview/1988328-3d-illustration-of-laptop-computer-with-binary-code-stream.jpg 3.8s 3.8s 4.6s

Thank You! @dxtr026 @HousingEngg

Building Fast and Performant Apps.

Building Fast and Performant Apps.

More Decks by Rahul Yadav

Other Decks in Technology

Featured

Transcript