Web Development · Advanced level

Advanced level · Module 3: Web Performance and Search Optimisation · Lesson 2 of 4

Faster Loading

Reduce what pages load and when: images, fonts, JavaScript and render-blocking resources.

In this lesson you will

  • Optimise images and fonts
  • Reduce and defer JavaScript and CSS

Key concepts

responsive images and modern formatslazy loadingfont loadingcode splitting

The lesson

Serve images at the size displayed, in modern formats such as WebP or AVIF, with srcset for different screens and loading="lazy" for images below the fold. Always set width and height to prevent layout shift.

Web fonts can delay text; limit the number of font files, use font-display: swap or the system font stack. Every font weight is another download.

JavaScript is costly on slow phones. Split code so each page loads only what it needs, remove unused libraries and keep third-party scripts to a minimum.

Step by step

  1. Convert and resize the site's images.
  2. Add lazy loading and dimensions.
  3. Reduce font files.
  4. Split the React bundle by route and measure the change.

Practice activity

Apply loading optimisations and measure them against the baseline.

Expected result: Measured improvements in page weight and LCP compared with the baseline.

Check your understanding

  1. What does loading="lazy" do on an image?

    Show answer

    Delays loading it until it is near the visible area.

  2. Why set width and height on images?

    Show answer

    So the browser reserves space and the layout does not shift.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.