Pagespeed explained: How to measure and improve website load time

What is page speed?

Page speed, also known as website load time, refers to the time a web page takes to fully load. This load time includes all elements of a page, such as HTML, CSS, JavaScript, images and other multimedia content. A fast load time is crucial for the user experience and search engine optimisation (SEO), as it increases visitor dwell time and reduces the bounce rate.

Website load time can vary depending on device type. Mobile devices often face different challenges than desktop devices, such as lower processing power and varying network speeds. Therefore, page speed optimisation should be adapted for both desktop and mobile devices to ensure optimal performance across all platforms.

Which factors influence website load time?

The load time of a website is a complex interplay of various technical factors:

Server response time

The server response time, or server speed, is the time the server needs to process a browser request and send a response. It depends on several factors, including the performance of the server, server configuration and the load from other requests. A low server response time contributes significantly to faster page speed.

File sizes and formats

Large files, such as high-resolution images, videos or uncompressed scripts, can significantly increase loading times. The use of optimised file formats and the compression of resources are fundamental steps to reduce loading time.

• Images: Use formats such as WebP, which offer high quality at a smaller file size.
• Videos: Use modern video compression formats and streaming technologies.
• CSS and JavaScript: Minification and compression of CSS and JavaScript files to reduce their size.

Number of HTTP requests

Every resource loaded on a web page requires a separate HTTP request. The more requests that must be made, the longer the loading process takes. Techniques such as combining files (CSS and JavaScript) and reducing the number of embedded resources can minimise the number of HTTP requests.

Caching mechanisms

Caching plays a central role in reducing loading times. There are different types of caching:

• Browser caching: Stores resources locally in the user's browser so they do not have to be reloaded on subsequent visits.
• Server caching: Stores frequently requested data on the server to reduce server response time.
• Content Delivery Network (CDN): Distributes content across multiple geographically dispersed servers to reduce loading times by delivering content from the server closest to the user.

Network conditions and bandwidth

Network speed and stability can significantly affect page speed. Users with slow internet connections or high latency experience longer loading times. Using CDNs and optimising resource sizes can help minimise these effects.

Third-party resources

Third-party resources, such as external scripts, widgets or advertising, can increase loading times because they require additional HTTP requests and are not always optimised. These resources should be monitored and only necessary third-party content integrated.

Rendering and render-blocking

Browsers render web pages by processing HTML, CSS and JavaScript. Resources that block rendering (render-blocking), such as unoptimised scripts or stylesheets, can increase loading times. By loading scripts asynchronously and prioritising critical resources, render time can be reduced.

How can page speed be measured?

Measuring a website's loading time is an essential step to assess its performance and to derive optimisation measures. Various tools and methods are available to perform a detailed analysis of page speed:

Google PageSpeed Insights

Google PageSpeed Insights is a free tool from Google that analyses the performance of a website for both mobile devices and desktop browsers.

Features:

• Rates the loading speed on a scale from 0 to 100
• Provides detailed reports and optimisation suggestions
• Measures key metrics such as LCP, FCP, FID and CLS

GTmetrix

GTmetrix is a comprehensive tool for analysing website performance, providing detailed reports and suggestions for improvement.

Features:

• Performance rating using a scoring system
• Detailed analysis of PageSpeed and YSlow scores
• Waterfall chart to visualise loading times of individual resources

Pingdom Tools

Pingdom Tools offers a quick and simple way to test a website's loading time and to monitor its performance.

Features:

• Assessment of load time and performance
• Detailed analysis of individual loading phases
• Reports on performance bottlenecks and optimisation suggestions

Uptrends Website Speed Test

Uptrends Website Speed Test is a powerful tool for analysing website performance, offering detailed tests and reports.

Features:

• Detailed performance reports with waterfall charts
• Ability to run tests from different locations and under varying conditions
• Measurement of a variety of metrics, including TTFB, LCP, FCP and CLS

Find out which web host scores best for Pagespeed in our performance test:

How can Pagespeed be improved?

Optimising a website's load time is an ongoing process that involves various techniques and strategies. The following methods are proven approaches to improving Pagespeed:

Optimising images and videos

• Use modern formats: images in formats like WebP or AVIF offer high quality at smaller file sizes.
• Image compression: tools like TinyPNG or ImageOptim can significantly reduce image file sizes without substantially affecting quality.
• Video compression: use compression tools and streaming technologies to reduce video file sizes.
• Responsive images: provide different image sizes for different device types to optimise load time on mobile devices.

Minification and concatenation of CSS and JavaScript

• Removal of unnecessary whitespace, comments and line breaks from CSS and JavaScript files.
• Use of tools such as UglifyJS, CSSNano or Terser.
• Combining multiple CSS and JavaScript files to reduce the number of HTTP requests.
• Use of build tools such as Webpack or Gulp.

Implementation of lazy loading

• Lazy Loading loads images and other non-critical content only when they appear in the user's viewport. This reduces the initial load time and the amount of data transferred when the page is first loaded.

Browser caching and server caching

• Configure HTTP headers to allow returning visitors to load resources from the cache instead of requesting them again from the server.
• Use Cache-Control and Expires headers.
• Use server caching solutions such as Varnish or Nginx caching to store frequently requested content in server memory and deliver it faster.

Reducing HTTP requests

• Merge CSS and JavaScript files to minimise the number of requests.
• Use sprites for images to combine multiple images into a single file.

Improving server response times

• Use modern, high-performance web servers such as Nginx or LiteSpeed, which offer more efficient request handling.

PHP optimisation

• Use PHP optimisations such as OPcache to reduce the execution time of PHP scripts.
• Use PHP-FPM (FastCGI Process Manager) to improve performance.

Reducing render-blocking resources

• Asynchronous loading of JavaScript (async or defer attributes).
• Inline critical CSS: include important CSS directly in the HTML document to avoid render-blocking.

Optimising a website's load time is a crucial factor for improving the user experience and search engine ranking. Improving page speed requires a combination of techniques and strategies. From optimising images and videos to minifying and combining resources, and using CDNs and caching mechanisms – all these measures help to reduce a webpage's load time and enhance the user experience. Continuous monitoring and regular optimisations are essential to ensure high performance in the long term.

Find out about the fastest web hosts in Germany and how they perform in terms of page speed.

Our article is based on our own experience and research as well as information from external sources.

Sources & further links on the topic:
https://tools.pingdom.com/ (Pingdom Tools Website Speed Test)
https://gtmetrix.com/ (GTmetrix Website Performance Testing)
https://www.uptrends.com/tools/website-speed-test (Uptrends Webspeed Test)
https://pagespeed.web.dev/ (Google Pagespeed Insights)