Pagespeed explained: How to measure and improve website loading time

A fast website is essential for success in the digital age as it enhances user experience and positively impacts search engine rankings. Conversely, a slow pagespeed can frustrate visitors and increase bounce rates. This article provides a comprehensive overview of the various methods to measure and optimise website loading times.

What is Pagespeed?

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

Website loading times can vary depending on the type of device. Mobile devices often face different challenges compared to desktop devices, such as lower processing power and varying network speeds. Therefore, Pagespeed optimisation needs to be tailored for both desktop and mobile devices to ensure optimal performance across all platforms.

What Factors Influence Website Loading Time?

Website loading time is a complex interplay of various technical factors:

Server Response Time

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

File Sizes and Formats

Large files, such as high-resolution images, videos, or uncompressed scripts, can significantly prolong loading time. Using optimized file formats and compressing resources are fundamental steps to reduce loading time.

• Images: Using formats like WebP, which offer high quality at lower file sizes.
• Videos: Utilising modern video compression formats and streaming technologies.
• CSS and JavaScript: Minifying and compressing CSS and JavaScript files to reduce their size.

Number of HTTP Requests

Every resource loaded on a website requires a separate HTTP request. The more requests that need to be made, the longer the loading process takes. Techniques such as merging 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 need to be reloaded on subsequent visits.
• Server Caching: Stores frequently requested data on the server to shorten server response time.
• Content Delivery Network (CDN): Distributes content across multiple geographically dispersed servers to reduce loading time by delivering content from the nearest server to the user.

Network Conditions and Bandwidth

Network speed and stability can significantly impact pagespeed. Users with slow internet connections or high latency may experience longer loading times. Utilising CDNs and optimising resource sizes can help minimise these effects.

Third-Party Resources

Third-party resources, such as external scripts, widgets, or advertisements, can extend loading times as they require additional HTTP requests and are not always optimised. It is important to monitor these resources and only integrate necessary third-party content.

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 prolong loading times. Asynchronising scripts and prioritising important resources can reduce render time.

How to Measure Pagespeed?

Measuring a website's loading time is an essential step in evaluating its performance and deriving optimisation measures. Various tools and methods are available to conduct a detailed analysis of pagespeed:

Google PageSpeed Insights

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

Features:

• Rate the loading speed on a scale of 0 to 100
• Provides detailed reports and suggestions for optimization
• Measures key metrics such as LCP, FCP, FID, and CLS

GTmetrix

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

Features:

• Performance evaluation using a points 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 easy way to test a website's loading time and monitor its performance.

Features:

• Evaluation of loading time and performance
• Detailed analysis of individual loading phases
• Reports on performance bottlenecks and optimization 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 conduct tests from various locations and under different conditions
• Measurement of a variety of metrics, including TTFB, LCP, FCP, and CLS

Find out which web hosting provider performs best in our performance test for Pagespeed:

How to Improve Pagespeed?

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

Optimising Images and Videos

• Using modern formats: Images in formats like WebP or AVIF offer high quality at lower file sizes.
• Image compression: Tools like TinyPNG or ImageOptim can significantly reduce image file sizes without compromising quality.
• Video compression: Utilising compression tools and streaming technologies to decrease video file sizes.
• Responsive Images: Providing different image sizes for different device types to optimise loading times on mobile devices.

Minification and Concatenation of CSS and JavaScript

• Removing unnecessary spaces, comments, and line breaks from CSS and JavaScript files.
• Using tools like UglifyJS, CSSNano, or Terser.
• Combining multiple CSS and JavaScript files to reduce the number of HTTP requests.
• Utilising build tools like Webpack or Gulp.

Implementing Lazy Loading

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

Browser Caching and Server Caching

• Configuring HTTP headers to allow returning visitors to load resources from the cache instead of requesting them from the server again.
• Using Cache-Control and Expires headers.
• Utilising Server Caching solutions like Varnish or Nginx Caching to cache frequently requested content in the server memory and deliver it faster.

Reducing HTTP Requests

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

Improving Server Response Times

• Deploying modern and powerful web servers like Nginx or LiteSpeed, which offer more efficient request processing.

PHP Optimization

• Utilising PHP optimizations like OPcache to reduce the execution time of PHP scripts.
• Implementing PHP-FPM (FastCGI Process Manager) to enhance performance.

Reducing Render-Blocking Resources

• Asynchronously loading JavaScript (async or defer attributes).
• Inline Critical CSS: Embedding critical CSS directly in the HTML document to avoid render-blocking.

Optimising website loading time is a crucial factor in enhancing user experience and search engine ranking. Improving pagespeed requires a combination of various techniques and strategies. From optimising images and videos to minifying and merging resources, to utilising CDNs and caching mechanisms – all these measures help to reduce webpage loading time and enhance user experience. Continuous monitoring and regular optimisations are essential for ensuring long-term high performance.

Learn about the fastest web hosting providers in Germany and how they perform in terms of pagespeed.

Our article is based on our own experiences 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)

Image credit:
Castorly Stock on Pexels.com