How to Increase Site Speed - PageSpeed Guide

Site speed is not just a matter of user experience - it is a direct ranking factor on Google. Since 2021, Google site speed metrics are part of the ranking algorithm, and Google PageSpeed Insights is the tool that shows how well your site performs. In this guide we'll go through concrete steps for improving your score.

Understanding PageSpeed metrics

Google PageSpeed Insights measures six key metrics that together make up the overall score. Largest Contentful Paint (LCP) measures how quickly the largest visible element on the page loads - ideally under 2.5 seconds. Interaction to Next Paint (INP) measures how quickly the page responds to user interactions - ideally under 200 milliseconds.

Cumulative Layout Shift (CLS) measures the visual stability of the page - how much elements move during loading. The ideal value is below 0.1. First Contentful Paint (FCP) measures when the first content appears on the screen. Time to First Byte (TTFB) measures how quickly the server responds to the request. Total Blocking Time (TBT) measures how long the main thread is blocked.

Image optimization - the biggest impact

Images are the most common cause of a slow site. An unoptimized 5 MB photo can slow page loading by several seconds. Here's what to do.

First, use modern image formats. The WebP format provides 25-35% smaller size than JPEG at the same quality. AVIF goes even further with 50% smaller size, but doesn't have full support in all browsers. For WordPress, ShortPixel or Imagify plugins automatically convert images to WebP.

Image dimensions must match the display size. If an image is displayed at 800x600 pixels, there's no point loading a 4000x3000 original. Use the srcset attribute for responsive images that adapt to screen size.

Compression is key - for most web images, 80-85% quality is perfectly sufficient. The difference between 85% and 100% quality is imperceptible to the naked eye, but the file size difference can be huge.

Lazy Loading - load only what's visible

Lazy loading defers loading of images and other resources until the user scrolls to them. This dramatically reduces initial page load time because the browser doesn't have to download all images at once.

In modern HTML, lazy loading is trivially simple - add a loading="lazy" attribute to img tags. The WordPress CMS platform automatically adds lazy loading to all images since version 5.5. Just be careful not to apply lazy loading to images in the "above the fold" part of the page (hero images, logo) because that can negatively affect the LCP metric.

For iframes (YouTube video, Google maps), lazy loading is especially important because those resources can be extremely large. Instead of a direct embed, consider displaying a thumbnail image with a play button that loads the iframe only on click.

Caching - don't load the same thing twice

Browser caching allows static resources (images, CSS, JavaScript) to be stored in the visitor's browser. When a user revisits your site, those resources load from their computer instead of from the server - instantly.

On BeoHosting with an advanced LiteSpeed server, caching is exceptionally efficient. LiteSpeed Cache for WordPress automatically creates static HTML versions of your pages, eliminating the need for PHP processing and database queries on every request.

Configure Cache-Control headers for different file types. For images, CSS, and JS files, set a long cache duration (e.g., 1 year). For HTML pages, use a shorter duration or revalidation so content changes appear quickly.

CSS and JavaScript minification

Minification removes unnecessary whitespace, comments, and formatting from CSS and JavaScript files, reducing their size. For a typical site, minification can reduce CSS size by 10-30% and JavaScript by 20-40%.

For WordPress, the LiteSpeed Cache plugin has built-in minification and combining of CSS/JS files. Autoptimize is an excellent alternative. Be careful with combining JavaScript files because it can cause conflicts between plugins - test thoroughly after enabling.

The Critical CSS technique extracts the CSS needed to render "above the fold" content and injects it directly into the HTML, while the rest of the CSS loads asynchronously. This dramatically improves FCP and LCP metrics.

Server-side optimizations

The choice of hosting provider and server configuration has a huge impact on site speed. BeoHosting uses the LiteSpeed Enterprise server, NVMe SSD drives, and CloudLinux for optimal performance. See our hosting plans.

GZIP or Brotli compression reduces the size of transferred data by 60-80%. On BeoHosting, Brotli compression is automatically enabled for all sites. HTTP/2 and HTTP/3 protocols allow parallel loading of multiple resources over a single connection, significantly speeding up loading of pages with many images, styles, and scripts.

PHP OPcache caches compiled PHP code in memory, eliminating the need for re-parsing and re-compiling on every request. On BeoHosting, OPcache is automatically enabled and optimally configured.

Font optimization

Web fonts can significantly slow page loading. Google Fonts, as popular as they are, require additional DNS lookups and downloads from an external server. Consider self-hosting fonts - download font files and serve them from your own server.

Use font-display: swap in CSS so text is immediately visible with the system font while the web font loads. Limit the number of font variants - instead of loading 6 different weights, use the 2-3 you really need. Preload key fonts with link rel="preload" for faster loading.

Database optimization

For WordPress sites, the database can become a performance bottleneck if not regularly maintained. Delete post revisions older than 30 days, spam comments, transients, and unused meta data. The WP-Optimize plugin can automatically maintain the database.

Use object caching (Redis or Memcached) for caching results of frequent database queries. On BeoHosting, Redis is available on the Business and Premium plans and can dramatically reduce page generation time for dynamic sites.

CDN - Content Delivery Network

A CDN distributes your site's static resources to servers worldwide, so visitors load content from the nearest server. For sites with a predominantly American audience, a CDN is not critically important because the BeoHosting server is already in the region. But for sites with a global audience, a CDN can significantly improve speed.

Cloudflare offers a free CDN plan that includes DDoS protection and basic optimization. Integration with WordPress is simple and doesn't require technical knowledge.

Practical PageSpeed optimization checklist

Compress and convert images to WebP. Implement lazy loading for images below the fold. Enable browser caching with long durations for static resources. Minify CSS and JavaScript files. Use PHP 8.4 for maximum performance. Enable GZIP or Brotli compression. Optimize fonts and limit the number of variants. Regularly clean the database. Use page caching (LiteSpeed Cache for WordPress). Minimize the number of external scripts and resources.

Conclusion

Improving the PageSpeed score is an iterative process - don't expect to reach a 100/100 score all at once. First focus on the biggest issues PageSpeed Insights identifies, usually images and JavaScript. With BeoHosting you already have an optimized server side, so you can focus on front-end optimizations. Aim for a green score (90+) for both the mobile and desktop version of your site.