Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

June 08, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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