Tweet
Tweet

Slide 1

Slide 1 text

Rahul Yadav (@dxtr026) Building fast and performant apps

Slide 2

Slide 2 text

Housing Go

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Fast and Performant Apps

Slide 5

Slide 5 text

Metrics to track First Paint First Meaningful Paint First Interaction

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

5.2s 7.4s 6.9s First Paint

Slide 10

Slide 10 text

... ... ... 5.2s 7.4s 6.9s First Paint

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

First Paint Inline Critical CSS 5.2s 7.4s 6.9s

Slide 13

Slide 13 text

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.2s 7.4s 6.9s

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

First Paint 5.2s 7.4s 6.9s

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction 3.7s 7.0s 6.5s

Slide 18

Slide 18 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction

Slide 19

Slide 19 text

3.7s 7.0s 6.5s First Interaction

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

First Interaction Defer - Download together, execute in order just before DOMContentLoaded. 3.7s 7.0s 6.5s ... ...

Slide 23

Slide 23 text

First Interaction Aysnc - Download together, execute in whatever order they download in. 3.7s 7.0s 6.5s ... ...

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

First Interaction Async false - Download together, execute in order as soon as all download. 3.7s 7.0s 6.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); });

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

First Interaction 3.7s 7.0s 6.5s Time (ms) 4500 5375 6250 7125 8000 1 2 3 4 <script defer> Async = false Timings for view.js

Slide 30

Slide 30 text

First Interaction 3.7s 7.0s 6.5s Time (ms) 4500 5375 6250 7125 8000 1 2 3 4 <script defer> Async = false Timings for interaction

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction

Slide 33

Slide 33 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction 3.7s 7.0s 4.7s

Slide 34

Slide 34 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ DNS resolution 3.7s 7.0s 4.7s ... ... ...

Slide 38

Slide 38 text

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ TCP handshake + TLS negotiation 3.7s 7.0s 4.7s ... ... ...

Slide 39

Slide 39 text

First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ Resource definitely needed in future 3.7s 7.0s 4.7s ... ... ...

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction

Slide 43

Slide 43 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction 3.7s 7.0s 4.6s

Slide 44

Slide 44 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction

Slide 45

Slide 45 text

3.7s 7.0s 4.6s First Meaningful Paint

Slide 46

Slide 46 text

First Paint Client Side Rendering 3.7s 7.0s 4.6s

Slide 47

Slide 47 text

First Meaningful Paint 3.7s 7.0s 4.6s

Slide 48

Slide 48 text

First Meaningful Paint 3.7s 7.0s 4.6s

Slide 49

Slide 49 text

First Paint Server Side Rendering 3.7s 7.0s 4.6s

Slide 50

Slide 50 text

First Meaningful Paint 3.7s 7.0s 4.6s

Slide 51

Slide 51 text

First Meaningful Paint 3.7s 7.0s 4.6s

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Why server side rendering ? 3.7s 7.0s 4.6s

Slide 54

Slide 54 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction

Slide 55

Slide 55 text

Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction 3.8s 3.8s 4.6s

Slide 56

Slide 56 text

Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 59

Slide 59 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 60

Slide 60 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 61

Slide 61 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 62

Slide 62 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 63

Slide 63 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 64

Slide 64 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 65

Slide 65 text

First Meaningful Paint 3.8s 3.8s 4.6s

Slide 66

Slide 66 text

Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction

Slide 67

Slide 67 text

Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction 3.8s 3.8s 4.2s

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Thank You! @dxtr026 @HousingEngg