“If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors” Performance is one of the most critical aspects of any web project and plays a major role in the success of any online venture. Your site may have the best services, products, and content found on the web, but if your site performance is off, you’re hurting your brand and driving users to the competition. How can we make sure that performance is not going to hold us back from success? Join me in this session as we tackle these big questions head-on and unravel different approaches and practices that will assist you in writing highly performant web apps as is expected today. ​ ​

1. Because Performance Matters!

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

12. 12
User Centric Approach
HOW ?

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

35. 35
PreloadAllModules
RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})

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