4. Performance

Best Practices

Extensions modules

Performance centers around making your websites as fast as possible, both in real terms (for example small file sizes, quicker loading), and in terms of how performance is perceived (for example indicating progress and getting initial content to a usable state as fast as possible, even if all the content is not yet loaded).

4.1 Performance basics

Learning outcomes:

  • Understand the concepts of real performance and perceived performance and the difference between the two.

  • Understand key performance concepts:

    • Source order.

    • Critical path.

    • Latency.

    • How a browser renders pages.

  • Understand how performance impacts sustainability — good performance can have a positive impact on the planet by reducing energy usage and bandwidth consumption:

    • Energy efficiency:

    • Hardware efficiency (repairability/utilization).

    • Demand efficiency:

      • Spatial (where do you perform computations).

      • Temporal (when do you perform computations).

Resources:

4.2 Improving page rendering

Learning outcomes:

  • How to reduce page loading times:

    • Use optimal media formats and compression.

    • Remove unnecessary audio from muted video.

    • Use video preload attribute to reduce upfront downloads.

    • Considering using adaptive streaming.

    • Reducing media loading jank with width and height attributes.

    • Be careful about font choices — keep file sizes as small as possible, for example by including only the glyphs, variants, and weights you need.

  • How to improve "time to usable":

    • Minimize initial load by showing only important content initially. Make important interactive features interactive as soon as possible.

    • Additional data and resources can be loaded in the background as users are using the page.

    • Use lazy loading for images and other resources that are not immediately needed.

  • How to improve the perceived performance of features:

    • Use animations to transition between states rather than making the user wait for the end state.

    • Use loading spinners and progress bars to indicate progress, so the user feels like something is happening.

    • Use events wisely, e.g. trigger actions on keydown rather than waiting for keyup.

Resources:

4.3 Measuring performance

Learning outcomes:

  • Understand key metrics for measuring performance, for example first contentful paint, speed index, total blocking time, bounce rate, unique users/page views.

  • How to use common performance measurement tools:

  • How to use Performance Web APIs to create your own performance measurement tools:

    • Performance Timeline API.

    • Navigation Timing API.

    • User Timing API.

    • Resource Timing API.

Resources:

4.4 CSS and performance

Learning outcomes:

  • Understand techniques for improving CSS performance:

    • Only load when needed; optimize with media queries.

    • Minimize animation, and force animation on the GPU.

    • Minimize repaints.

    • Use will-change and contain appropriately.

Resources:

4.5 JavaScript and performance

Learning outcomes:

  • Understand techniques for improving JavaScript performance:

    • Reduce the amount of JavaScript you use.

    • Only load JavaScript when needed, and remove unused code.

    • Use deferred/async JavaScript appropriately.

    • Compressing, packing, and splitting JavaScript.

Resources:

Previous: 3. Web APIsNext: 5. Security and privacy