Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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/analyzi...
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...
First Paint
{ connectivity : ‘3G’, location: ‘Dulles:Chrome’,
url : ‘https://housing.com/in/buy/mumbai/powai’ }
5.2s
7.4s
...
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 = 'te...
First Paint
{ connectivity : ‘3G’, location: ‘Dulles:Chrome’,
url : ‘https://housing.com/in/buy/mumbai/powai’ }
5.2s
7.4s
...
First Paint
5.2s
7.4s
6.9s
Metrics to track
First Paint
First Meaningful Paint
5.2s
7.4s
6.9s First Interaction
Metrics to track
First Paint
First Meaningful Paint
5.2s
7.4s
6.9s First Interaction
3.7s
7.0s
6.5s
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
6.5s First Interaction
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 co...
First Interaction
Defer - Download together, execute in order just before DOMContentLoaded.
3.7s
7.0s
6.5s
<!DOCTYPE html>...
First Interaction
Aysnc - Download together, execute in whatever order they download in.
3.7s
7.0s
6.5s
<!DOCTYPE html>
<h...
First Interaction
Source - http://images2.fanpop.com/image/photos/9800000/Chemical-X-powerpuff-girls-movie-9885363-427-320...
First Interaction
Async false - Download together, execute in order as soon as all download.
3.7s
7.0s
6.5s
<!DOCTYPE html...
First Interaction
When does the app.js load ?
When does the view.js load ?
When does the componentDidMount of the view get...
First Interaction
3.7s
7.0s
6.5s
window.performance.mark(‘label’)
First Interaction
3.7s
7.0s
6.5s
4500
5125
5750
6375
7000
1 2 3 4
Time(ms)
<script> <script defer></script> Async = false
...
First Interaction
3.7s
7.0s
6.5s
4500
5375
6250
7125
8000
1 2 3 4
Time(ms)
<script> <script defer></script> Async = false
...
First Interaction
3.7s
7.0s
6.5s
4500
5375
6250
7125
8000
1 2 3 4
Time(ms)
<script> <script defer></script> Async = false
...
First Interaction
● dynamically inserted script tags
● async=false
http://www.html5rocks.com/en/tutorials/speed/script-loa...
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
6.5s First Interaction
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
6.5s First Interaction
3.7s
7.0s
4.7s
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.7s First Interaction
First Interaction
Browser Preloaders
Source -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping...
First Interaction
Source -http://www.celebmaestro.com/wp-content/uploads/2016/04/scary-peeper-a-peeping-tom-figurine-to-sc...
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
DNS resolution
3.7s
7.0s
4.7s
<!DO...
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
TCP handshake + TLS negotiation
3....
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
Resource definitely needed in futu...
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
Resource definitely needed in futu...
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
Mandatory and high-priority fetch ...
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.7s First Interaction
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.7s First Interaction
3.7s
7.0s
4.6s
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.6s First Interaction
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 Meaningful Paint
3.7s
7.0s
4.6s
First Paint
Server Side Rendering
3.7s
7.0s
4.6s
First Meaningful Paint
3.7s
7.0s
4.6s
First Meaningful Paint
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
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.6s First Interaction
Metrics to track
First Paint
First Meaningful Paint
3.7s
7.0s
4.6s First Interaction
3.8s
3.8s
4.6s
Metrics to track
First Paint
First Meaningful Paint
3.8s
3.8s
4.6s First Interaction
Streaming response from server
Source - https://www.colourbox.com/preview/1988328-3d-illustration-of-laptop-computer-with-...
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
First Meaningful Paint
3.8s
3.8s
4.6s
Metrics to track
First Paint
First Meaningful Paint
3.8s
3.8s
4.6s First Interaction
Metrics to track
First Paint
First Meaningful Paint
3.8s
3.8s
4.6s First Interaction
3.8s
3.8s
4.2s
Metrics to track
First Paint
First Meaningful Paint
5.2s
7.4s
6.9s First Interaction
3.8s
3.8s
4.2s
Thank You!
@dxtr026
@HousingEngg
Housing GO
3.8s
3.8s
4.7s
Metrics to track
defer and async write up
remove 1s from the console.time
change image of dans prefetch
First Interaction ...
First Interaction
Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/
3.7s
7.0s
4.7s
First Interaction
3.7s
7.0s
6.5s
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Epidemiological transition
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

Building fast and performant apps

Download to read offline

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 to improve the first paint time, ways to remove 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 webpagetest.org, a great tool for developers to track the page load metrics.

Related Books

Free with a 30 day trial from Scribd

See all

Building fast and performant apps

  1. 1. Rahul Yadav (@dxtr026) Building fast and performant apps
  2. 2. Housing Go
  3. 3. Fast and Performant Apps Source - http://static.comicvine.com/uploads/original/11120/111200613/4204672-3221623855-The_F.jpg
  4. 4. Fast and Performant Apps
  5. 5. Metrics to track First Paint First Meaningful Paint First Interaction
  6. 6. Critical Rendering Path Source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
  7. 7. Version 1 { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ }
  8. 8. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction
  9. 9. 5.2s 7.4s 6.9s First Paint
  10. 10. <!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
  11. 11. First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s
  12. 12. First Paint Inline Critical CSS 5.2s 7.4s 6.9s
  13. 13. 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,se lect{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
  14. 14. First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s
  15. 15. First Paint 5.2s 7.4s 6.9s
  16. 16. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction
  17. 17. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction 3.7s 7.0s 6.5s
  18. 18. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction
  19. 19. 3.7s 7.0s 6.5s First Interaction
  20. 20. index.html vendor.js app.js view.js 3.7s 7.0s 6.5s First Interaction
  21. 21. 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>
  22. 22. 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>
  23. 23. 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>
  24. 24. 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
  25. 25. 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>
  26. 26. 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
  27. 27. First Interaction 3.7s 7.0s 6.5s window.performance.mark(‘label’)
  28. 28. First Interaction 3.7s 7.0s 6.5s 4500 5125 5750 6375 7000 1 2 3 4 Time(ms) <script> <script defer></script> Async = false Timings for app.js
  29. 29. First Interaction 3.7s 7.0s 6.5s 4500 5375 6250 7125 8000 1 2 3 4 Time(ms) <script> <script defer></script> Async = false Timings for view.js
  30. 30. First Interaction 3.7s 7.0s 6.5s 4500 5375 6250 7125 8000 1 2 3 4 Time(ms) <script> <script defer></script> Async = false Timings for interaction
  31. 31. First Interaction ● dynamically inserted script tags ● async=false http://www.html5rocks.com/en/tutorials/speed/script-loading/ 3.7s 7.0s 6.5s
  32. 32. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction
  33. 33. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction 3.7s 7.0s 4.7s
  34. 34. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction
  35. 35. 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
  36. 36. 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
  37. 37. 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>
  38. 38. 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>
  39. 39. 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>
  40. 40. 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>
  41. 41. 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>
  42. 42. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction
  43. 43. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction 3.7s 7.0s 4.6s
  44. 44. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction
  45. 45. 3.7s 7.0s 4.6s First Meaningful Paint
  46. 46. First Paint Client Side Rendering 3.7s 7.0s 4.6s
  47. 47. First Meaningful Paint 3.7s 7.0s 4.6s
  48. 48. First Meaningful Paint 3.7s 7.0s 4.6s
  49. 49. First Paint Server Side Rendering 3.7s 7.0s 4.6s
  50. 50. First Meaningful Paint 3.7s 7.0s 4.6s
  51. 51. First Meaningful Paint 3.7s 7.0s 4.6s
  52. 52. First Meaningful Paint Server Side Rendered App 3.7s 7.0s 4.6s
  53. 53. Why server side rendering ? 3.7s 7.0s 4.6s
  54. 54. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction
  55. 55. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction 3.8s 3.8s 4.6s
  56. 56. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction
  57. 57. 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
  58. 58. First Meaningful Paint 3.8s 3.8s 4.6s
  59. 59. First Meaningful Paint 3.8s 3.8s 4.6s
  60. 60. First Meaningful Paint 3.8s 3.8s 4.6s
  61. 61. First Meaningful Paint 3.8s 3.8s 4.6s
  62. 62. First Meaningful Paint 3.8s 3.8s 4.6s
  63. 63. First Meaningful Paint 3.8s 3.8s 4.6s
  64. 64. First Meaningful Paint 3.8s 3.8s 4.6s
  65. 65. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction
  66. 66. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction 3.8s 3.8s 4.2s
  67. 67. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction 3.8s 3.8s 4.2s
  68. 68. Thank You! @dxtr026 @HousingEngg
  69. 69. Housing GO 3.8s 3.8s 4.7s
  70. 70. Metrics to track defer and async write up remove 1s from the console.time change image of dans prefetch First Interaction to JS enabled add the streaming images % improvements add speed index read about async=false read about pre-render change video
  71. 71. First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ 3.7s 7.0s 4.7s
  72. 72. First Interaction 3.7s 7.0s 6.5s
  • PaulKinlan

    Oct. 25, 2016
  • ChiragBatra6

    Sep. 18, 2016
  • AmerrnathMurugan

    Sep. 9, 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 to improve the first paint time, ways to remove 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 webpagetest.org, a great tool for developers to track the page load metrics.

Views

Total views

1,069

On Slideshare

0

From embeds

0

Number of embeds

91

Actions

Downloads

10

Shares

0

Comments

0

Likes

3

×