525.3 Performance and load time strategies

Learn strategies to reduce load times and improve the responsiveness of web applications.

Overview

In this topic, we explore practical strategies developers use to optimise web performance and reduce page load time. Fast-loading websites improve user satisfaction, support accessibility, and reduce bandwidth and server strain. Students learn how media, code, and layout decisions affect load time, and apply techniques to monitor and enhance page performance across devices.

Targets

In this topic, students learn to:

• Identify factors that affect page load time

• Apply techniques to minimise the size and complexity of web resources

• Optimise images, scripts, and layout to reduce delays

• Use browser tools to measure and analyse performance

• Explain how strategies like caching and CDNs improve delivery speed

Syllabus references

Programming for the web

Designing web applications

• Investigate methods to support and manage the load times of web pages/applications

Why load time matters

Slow websites increase bounce rates, hurt search engine rankings, and frustrate users. Fast load times help:

• Improve first impressions and accessibility

• Support users with limited bandwidth

• Increase engagement and conversions in apps and e-commerce

Web performance is essential on mobile devices and in low-connectivity environments.

Strategy 1: Compress and optimise assets

Large media files slow down websites.

• Resize and compress images (e.g. WebP format)

• Use vector graphics (SVG) for logos and icons

• Minify CSS, JavaScript, and HTML files

• Remove unused styles and scripts using tools like PurgeCSS

Strategy 2: Load critical content first

Prioritise elements that appear in the first screen view (above the fold).

• Inline critical CSS for faster rendering

• Defer non-essential JavaScript using defer or async

• Use lazy loading for images and videos (loading="lazy")

<img src="banner.jpg" loading="lazy" alt="Promotional banner">

Strategy 3: Implement caching

Caching stores website resources temporarily so they don’t have to be downloaded again.

Types of caching:

• Browser caching – keeps static assets on the user’s device

• Server-side caching – stores generated pages or database results

• Service workers – enable offline access in PWAs

Strategy 4: Use a CDN

Content Delivery Networks (CDNs) host static files (images, videos, scripts) on servers distributed around the world. CDNs reduce latency by delivering resources from a location close to the user.

Popular CDNs include:

• Cloudflare

• AWS CloudFront

• Google Cloud CDN

A CDN reduces load time by serving static content from a server near the user, rather than from a distant origin server.

Measuring performance

Use browser tools like Chrome DevTools to monitor:

• First contentful paint

• Total blocking time

• Time to interactive

Third-party tools include:

• Google PageSpeed Insights

• Lighthouse reports

• GTmetrix

Summary

Improving page load time requires careful planning and efficient use of web resources. By compressing files, prioritising visible content, using caching and CDNs, and measuring results, developers can deliver faster, more responsive experiences that benefit all users.