Vered Flis: Because performance matters! Architecture Next 20
0 likes3,102 views
The document discusses the critical importance of web performance, highlighting that slow load times significantly affect user experience and conversion rates. It outlines techniques for enhancing website performance, including case studies on Angular apps, strategies like lazy loading, and performance budgeting using tools like Lighthouse. The emphasis is on a user-centric approach to performance, ensuring that the web applications meet diverse user needs effectively.
![24
Defining Angular “Budgets”
{
. . .
“configuration“ : {
“production“ : {
. . .
}
}
}
angular.json
“budgets“ : [
{
"type": “bundle",
“name": “main",
"maximumWarning": “150kb",
"maximumError": “200kb"
}
]](https://image.slidesharecdn.com/becauseperformancematters-200712062659/85/Vered-Flis-Because-performance-matters-Architecture-Next-20-24-320.jpg)
![27
Defining Lighthouse “Budgets” file
budgets.json
[
{
. . .
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
]
}
]](https://image.slidesharecdn.com/becauseperformancematters-200712062659/85/Vered-Flis-Because-performance-matters-Architecture-Next-20-27-320.jpg)
Vered Flis: Because performance matters! Architecture Next 20
- 2. 2 Motivation Agenda Case study exploration Load time enhancement techniques
- 3. About Me 3 Vered Flis https://www.linkedin.com/in/vered-flis/ Senior SW Engineer | veredf@codevalue.net CodeValue
- 4. Why should I even care? Performance issues directly affect the end users experience 4 Slow website speed turns users off Slow websites cost money and damage reputation
- 5. 5 1 second delay means 7% reduction in conversions 1 second delay means 11% loss of page views (SEO) Let’s get statistical (Hubspot research) 47% of the users expects a website to load < 2sec Page slowdown of 1 second could cost Amazon $1.6 billion/year 79% of users who experience poor performance are less likely to visit again
- 6. You won’t get a second chance when it comes to user experience “ “
- 7. 7 High-performant websites results in : Higher traffic High return visits Low bounce rates Higher conversions Higher engagement Higher ranks in organic search
- 8. 8 Google’s ‘Badge of Shame’
- 9. Making performance a business priority “ “
- 10. 10 What Is Performance Anyway? CPU Speed Memory Load Time Reload Time ALL?
- 11. 11 Not everything is important for everybody Different needs for different users Different needs for different devices Different needs for different systems
- 13. Engineering experience in service of user experience “ “
- 14. 14 Case Study @CodeValue Angular 6 app Wanted to scale Wanted to improve SEO rankHigh computations Long load time
- 15. 15 Performance Categories to tackle Load Time (Initial and Reload) Runtime Performance
- 16. 16 User Centric Metrics Measured First Meaningful Paint Time To Interactive ( TTI )
- 17. Loading Is a Journey…
- 18. 18 Goals Under 5s Time to Interactive for 3G Under 170 KB of critical path resources (compressed/minified)
- 19. 19 Actions that were taken Upgrading Angular version - Ivy Lazy loading modules Assets Size – trivial but critical, images optimization Fast hosting , compression and CDN More….
- 20. 20 Know your Bundles! Look for unused packages Replace large packages if possible Remove unnecessary imports
- 21. 21 Using webpack-bundle-analyzer > npm install -g webpack-bundle-analyzer > ng build --stats-json > webpack-bundle-analyzer “../dist/my-performant-project/stats.json“ Webpack Bundle Analyzer is started at http://127.0.0.1:8888
- 22. Introducing performance “Budgets” 22 Set and Monitor bundle size thresholds Performed at build time Integrated as part of CI/CD Highlight the impact of heavy assets
- 23. 23 “Budges” types Bundle - The size of a specific bundle Initial - The initial size of the app All - The size of the entire app
- 24. 24 Defining Angular “Budgets” { . . . “configuration“ : { “production“ : { . . . } } } angular.json “budgets“ : [ { "type": “bundle", “name": “main", "maximumWarning": “150kb", "maximumError": “200kb" } ]
- 25. 25 WARNING in budgets, maximum exceeded for main. Budget 150 kB was exceeded by 218 kB. ERROR in budgets, maximum exceeded for main. Budget 200 kB was exceeded by 168 kB. > ng build --prod
- 26. Using Lighthouse for performance “Budgets” 26 Monitor performance metrics at run time Provides metrics to track whole team work Can be integrated as part of CI/CD Aligned the team around common metric goals
- 27. 27 Defining Lighthouse “Budgets” file budgets.json [ { . . . "timings": [ { "metric": "interactive", "budget": 3000 }, { "metric": "first-meaningful-paint", "budget": 1000 } ] } ]
- 28. 28 Using lighthouse “Budgets” > npm install -g lighthouse > Lighthouse https://example.com --budget-path=./budgets.json Results lighthouse-budgets-report lighthouse
- 29. 29 Introducing “App shells” Provides a fast first impression Provide the user with the perception of a faster page load Launching a static rendered page while the browser loads assets
- 30. 30 Angular App Shell > ng new app-shell-example --routing > ng add @nguniversal/express-engine --client-project app-shell-example > ng run app-shell-example:app-shell > ng generate app-shell --client-project app-shell-example --universal-project app-shell-example-server
- 31. 31 Without App Shell Index.html <body> <app-root></app-root> <script src="runtime-es2015.cdfb0ddb511f65fdc0a0.js" type="module"></script> <script src="runtime-es5.cdfb0ddb511f65fdc0a0.js" nomodule defer></script> <script src="polyfills-es5.44547b4d4a23c72d0f9c.js" nomodule defer></script> <script src="polyfills-es2015.ffa9bb4e015925544f91.js" type="module"></script> <script src="main-es2015.0c419ad3828622f71e56.js" type="module"></script> <script src="main-es5.0c419ad3828622f71e56.js" nomodule defer></script> </body>
- 32. 32 With App Shell Index.html <body> <app-root _nghost-sc0="" > <div _ngcontent-sc0=""><span _ngcontent-sc0="">App Shell Is Running</span></div> <router-outlet _ngcontent-sc0=""></router-outlet> <app-app-shell _nghost-sc1=""> <p _ngcontent-sc1="">My APP SHELL</p> </app-app-shell> </app-root> <script src="runtime-es2015.cdfb0ddb511f65fdc0a0.js" type="module"></script> <script src="runtime-es5.cdfb0ddb511f65fdc0a0.js" nomodule defer></script> <script src="polyfills-es5.44547b4d4a23c72d0f9c.js" nomodule defer></script> <script src="polyfills-es2015.ffa9bb4e015925544f91.js" type="module"></script> <script src="main-es2015.0c419ad3828622f71e56.js" type="module"></script> <script src="main-es5.0c419ad3828622f71e56.js" nomodule defer></script> </body>
- 33. 33 Lazy loading with Preloading Strategy Loading Lazy Modules asynchronously in the background User do not have to wait for a lazy module to be downloaded
- 34. 34 Preloading Options No preloading Preload all lazy modules Custom preloading
- 36. Preloading ALL may create a bottleneck when large # of modules are loaded
- 37. 37 Loading Strategy Eagerly Load the modules required at startup Preload all frequently used modules, may be after some delay Lazy load remaining modules
- 38. 38 Takeaways High performant web apps is a combination of Art Best Practices Sleight Of Hand Set a shared goals and be creative Understand your user’s needs Make performance a business priority
- 39. Q A 39
- 40. Vered Flis Senior SW Engineer | Project Lead veredf@codevalue.net