Building Fast Apps with Server-Side Rendering (SSR
•Download as PPSX, PDF•
3 likes•1,119 views
The document discusses optimizing the performance of web apps by tracking key metrics like First Paint, First Meaningful Paint, and First Interaction. It explains techniques like inline critical CSS, deferring scripts, browser preloading, server-side rendering, and streaming responses from the server to improve these metrics. Examples are given of how to implement many of these techniques, such as using defer, async, and preload attributes for scripts. Metrics measured before and after optimizations show improvements, with First Interaction decreasing from 6.5s to 4.2s in one case. The document emphasizes the importance of performance tracking and provides resources for further reading on techniques like async script loading.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building Fast Apps with Server-Side Rendering (SSR
Similar to Building Fast Apps with Server-Side Rendering (SSR (20)
Recently uploaded
Recently uploaded (20)
Building Fast Apps with Server-Side Rendering (SSR
- 1. Rahul Yadav (@dxtr026) Building fast and performant apps
- 2. Housing Go
- 3. Fast and Performant Apps Source - http://static.comicvine.com/uploads/original/11120/111200613/4204672-3221623855-The_F.jpg
- 4. Fast and Performant Apps
- 5. Metrics to track First Paint First Meaningful Paint First Interaction
- 6. Critical Rendering Path Source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
- 7. Version 1 { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ }
- 8. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction
- 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. First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s
- 12. First Paint Inline Critical CSS 5.2s 7.4s 6.9s
- 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. First Paint { connectivity : ‘3G’, location: ‘Dulles:Chrome’, url : ‘https://housing.com/in/buy/mumbai/powai’ } 5.2s 7.4s 6.9s
- 16. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction
- 17. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction 3.7s 7.0s 6.5s
- 18. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction
- 20. index.html vendor.js app.js view.js 3.7s 7.0s 6.5s First Interaction
- 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. 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. 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. 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. 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. 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
- 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. 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. 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. First Interaction ● dynamically inserted script tags ● async=false http://www.html5rocks.com/en/tutorials/speed/script-loading/ 3.7s 7.0s 6.5s
- 32. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction
- 33. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 6.5s First Interaction 3.7s 7.0s 4.7s
- 34. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction
- 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
- 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. 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. 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. 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. 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. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction
- 43. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.7s First Interaction 3.7s 7.0s 4.6s
- 44. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction
- 46. First Paint Client Side Rendering 3.7s 7.0s 4.6s
- 49. First Paint Server Side Rendering 3.7s 7.0s 4.6s
- 52. First Meaningful Paint Server Side Rendered App 3.7s 7.0s 4.6s
- 53. Why server side rendering ? 3.7s 7.0s 4.6s
- 54. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction
- 55. Metrics to track First Paint First Meaningful Paint 3.7s 7.0s 4.6s First Interaction 3.8s 3.8s 4.6s
- 56. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction
- 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
- 65. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction
- 66. Metrics to track First Paint First Meaningful Paint 3.8s 3.8s 4.6s First Interaction 3.8s 3.8s 4.2s
- 67. Metrics to track First Paint First Meaningful Paint 5.2s 7.4s 6.9s First Interaction 3.8s 3.8s 4.2s
- 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. First Interaction Resource : https://css-tricks.com/prefetching-preloading-prebrowsing/ 3.7s 7.0s 4.7s
Editor's Notes
- This talk is mostly derived from the experiences and learnings we had while developing our PWA, Housing Go.
- So, what are fast or performant apps. What the one thing that comes to one’s mind when talking about fast 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.
- 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.
- 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 webpage Optimizing these events result in significantly faster webpages.
- This is how it looks when a user opens the website on a 3G connection.
- 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.
- 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.
- This is how it looks when a user opens the website on a 3G connection.
- Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.
- Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.
- 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.
- 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.
- 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.
- Spec says: Download together, execute in order after any pending CSS, block rendering until complete. Browsers say: Yes sir!
- Spec says: Download together, execute in order just before DOMContentLoaded. Ignore “defer” on scripts without “src”. IE < 10 says: I might execute 2.js halfway through the execution of 1.js. Isn’t that fun?? Other browsers say: Ok, but I might not ignore “defer” on scripts without “src”.
- Spec says: Download together, execute in whatever order they download in. The browsers in red say: What’s ‘async’? I’m going to load the scripts as if it weren’t there. Other browsers say: Yeah, ok.
- What is the real solution .. putting JS at the bottom of the page.
- 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
- How does talk console.time works.
- Mention about vendor.js and manifest.js ,
- Mention about vendor.js and manifest.js
- Mention about vendor.js and manifest.js
- 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 don’t support the async attribute conveniently execute dynamically-added scripts in the order they’re added to the document anyway.
- 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 don’t / cannot execute javascript so any URLs inserted using javascript aren’t visible to it.
- 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 don’t / cannot execute javascript so any URLs inserted using javascript aren’t visible to it.
- Mandatory and high-priority fetch for a resource that is necessary for the current navigation
- 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.
- Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.
- Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.
- Divide your css into core and noncore, the most important css which is required for the content to be shown to user, is inlined.
- Will talk about it in more detail