Syllabus Point
- Investigate methods to support and manage the load times of web pages/applications
Effective load time management involves optimising both frontend and backend processes, reducing payload sizes, and understanding metrics like Core Web Vitals that measure user experience.
Why is it important to manage load times?
- Creates a good user experience, which reduces bounce rates and improves SEO
Methods to support and manage loading times
Optimising frontend performance
- Minimise HTTP requests by combining CSS and JS files, and using asynchronous loading
- Removing unnecessary characters
- CDNs
- Browser and client side caching
- Lazy loading
Backend optimisation techniques
- Efficient database queries with good structures and indexing
- Load balancing by distributing network traffic
- Server side caching and asynchronous processing
Reducing payload size
- Optimising images and video (compress files)
- Efficient API responses
How load time can be improved using PWA
- Pre-caching important resources allows files like image-gallery.js and video-gallery.js to be loaded into memory or cache while the rest of the pages loads
- Service workers cache resources to ensure faster load times for repeat visits and offline functionality
- Background synchronisation and background fetching updates content in the background, so users can see the latest information without slowing down the initial load
Core Web Vitals
Core Web Vitals introduced by Google to measure the user experience.
Largest Contentful Paint (LCP)
- Helps assess how quickly the main content is available to the user, by measuring the time for the largest element to be fully rendered
- Focuses on loading performance from a user's perspective
- Improve: Optimise images and videos, use a CDN, minimise resources that slow down rendering, enable SSR
First Input Delay (FID)
- Measures the time for the page to respond to the first user interaction
- Assesses the interactivity of a web page
- Improve: Reducing JavaScript, split and optimise long tasks, use third party scripts
Cumulative Layout Shift (CLS)
- Measures unexpected visual stability of a webpage by tracking how layout shifts as elements load and change position
- Assesses how visually stable a page feels as it loads
- Improve: Specify dimensions, reserve space for dynamic content, avoid adding content above existing
Content Delivery Network (CDN)
A network of servers strategically placed around the world - caches static files (users receive content from the closest server).
Example: Cloudflare - if the requested content is already cached on the nearby edge server, Cloudflare directly serves it.
Related Resources
Keep Progressing
Use the lesson navigation below to move through the module sequence.
