Your app at the speed of light: Performance strategies for load time and runtime

In this talk, Christian Liebel shows you various measures for the load time and runtime of your web application to keep it as fast as possible. We'll also have a look at different tools to automatically test how well you're doing. Come and see how to make and keep your web apps blazing fast.

Transcript

1. Your App at the Speed of Light Performance strategies for load time and runtime Christian Liebel @christianliebel Consultant
2. Hello, it’s me. Your App at the Speed of Light Performance strategies for load time and runtime Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. 53% of users bounce when a website takes longer than 3 seconds to load. (DoubleClick, Google) For every second of loading time, 10% of users bounce. (BBC) Better performance = lower bounce rate Your App at the Speed of Light Performance strategies for load time and runtime Facts and Figures
4. Don’t over-optimize. Your App at the Speed of Light Performance strategies for load time and runtime First Rule
5. Reduce required computations during runtime - calculations - painting - layouting - … Your App at the Speed of Light Performance strategies for load time and runtime Runtime Performance
6. Performance tab Your App at the Speed of Light Performance strategies for load time and runtime Runtime Performance
7. Performance tab Your App at the Speed of Light Performance strategies for load time and runtime Runtime Performance
8. - Reduce initial load (size & computation) - Reduce perceived loading time - Prevent downloading the same resource again Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
9. PRPL Pattern – Preload the most important resources – Render the initial route as soon as possible – Pre-cache remaining assets – Lazy load other resources and non-critical assets https://web.dev/apply-instant-loading-with-prpl/ Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
10. Preloading – The “preload” link relationship tells the browser to download a critical resource as soon as possible – Link tag is added to the head of an HTML document – Supported for scripts, styles, fonts, images, and others <link rel="preload" as="style" href="style.css"> Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
11. Rendering – The initial route should be rendered as soon as possible – Different approaches – Recommendation by Lighthouse – Inline critical JS – Inline above-the-fold CSS – Defer scripts via async: <script src="app.js" async></script> – Alternative: Server-side rendering (SSR) Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
12. Pre-caching – Idea: Never load the same resource twice – Download resources once and store them in a local cache – The next time the user wants to open the application, load the contents from there – Makes your application sources offline-capable – Significantly improves loading time Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
13. Pre-caching: Service Worker Load Time Performance Service Worker Internet Website HTML/JS Cache fetch Performance strategies for load time and runtime Your App at the Speed of Light
14. Lazy Loading function onClick() { import('./heavy-bundle.js').then(bundle => bundle.compute()); } Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
15. Performance tab Your App at the Speed of Light Performance strategies for load time and runtime Runtime Performance
16. Lighthouse Load Time Performance Auditing tool by Google, integrated in Chrome DevTools Automatically checks performance metrics, PWA support, accessibility, SEO and other best practices and gives tips on how to improve Can simulate mobile devices Performance strategies for load time and runtime Your App at the Speed of Light
17. Lighthouse Your App at the Speed of Light Performance strategies for load time and runtime Load Time Performance
18. Q&A Your App at the Speed of Light Performance strategies for load time and runtime
19. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com