Page speed problems fall into several distinct categories: server performance, resource delivery, render-blocking assets, unoptimised media, and excessive third-party code. Fixing all of them requires a systematic approach rather than applying random optimisations and hoping for the best.

Diagnose Before You Fix

Open Google PageSpeed Insights and enter your URL. The tool splits results into two sections: field data from real Chrome users and lab data from a simulated Lighthouse test. Focus on field data first because it reflects actual user experience. Lab data shows what a fresh load looks like under controlled conditions and helps diagnose specific bottlenecks.

Chrome DevTools Network panel shows every resource the page requests, how long each one takes, and in what order the browser processes them. The Waterfall view reveals dependencies: if a JavaScript file blocks rendering, nothing below it in the waterfall executes until it finishes.

Improve Time to First Byte

Time to First Byte (TTFB) measures how long the server takes to start sending a response after receiving a request. A TTFB above 600 milliseconds on a dedicated server suggests database query problems, PHP processing bottlenecks, or inadequate server resources. A TTFB above 600 milliseconds on shared hosting often means the plan simply cannot handle your traffic volume.

Enable server-side caching immediately. On WordPress, plugins like WP Rocket or W3 Total Cache store pre-built HTML files and serve them without executing PHP or running database queries for every visit. On custom servers, Nginx FastCGI caching or Varnish caching achieve the same result at the server level.

Use a Content Delivery Network

A CDN stores copies of your static assets (images, CSS, JavaScript, fonts) on servers in multiple geographic locations. When a user in Sydney visits your site hosted in London, the CDN serves assets from the nearest Sydney node instead of making the browser wait for a transatlantic round trip.

Cloudflare offers a free CDN tier that works with any hosting provider. After pointing your DNS through Cloudflare, enable auto-minification for JavaScript, CSS, and HTML, and turn on Brotli compression for all text assets.

Optimise Images

Images account for the largest share of page weight on most sites. Convert JPEGs and PNGs to WebP format, which delivers 25 to 35 percent smaller file sizes at equivalent visual quality. Use AVIF for hero images where browser support allows, as AVIF achieves 50 percent smaller files than JPEG for complex photographic content.

Implement lazy loading on all images below the fold using the loading="lazy" attribute. The browser skips downloading those images until the user scrolls near them, reducing the initial page weight dramatically. Always preload the largest above-the-fold image (your LCP element) using <link rel="preload" as="image"> so the browser fetches it at the highest priority.

Serve images at the correct display dimensions. Uploading a 3000-pixel-wide image and displaying it at 600 pixels wastes 80 percent of the download. Use responsive images with srcset so the browser downloads the appropriately sized version for each screen size.

⚠️ Common Mistake Adding loading="lazy" to your hero image above the fold delays the LCP element and hurts your score. Only lazy load images that appear below the visible viewport on initial load.

Eliminate Render-Blocking Resources

When the browser encounters a <script> tag without async or defer, it stops parsing HTML, downloads the script, executes it, and only then continues. This blocks everything: layout, painting, and the display of any content below that script tag.

Add defer to all JavaScript files that do not need to execute before the page renders. Scripts that must run immediately (such as analytics or A/B testing that affect above-the-fold content) should load asynchronously using async. Move all <script> tags to just before the closing </body> tag if you cannot use defer or async.

For CSS, extract the styles that control above-the-fold content and inline them directly in the <head>. Load the full stylesheet using the print media trick: media="print" onload="this.media='all'". This pattern tells the browser not to block rendering for the stylesheet but to load it in the background and apply it once ready.

Minify and Compress Text Assets

Minification removes whitespace, comments, and long variable names from CSS and JavaScript files without changing their behaviour. The resulting files download faster because they contain fewer bytes. Webpack, Rollup, and Parcel handle minification automatically for JavaScript. CSS minifiers like cssnano integrate into build pipelines or run as standalone tools.

Enable Gzip or Brotli compression on your server. Brotli achieves 15 to 25 percent better compression than Gzip for text files. Both Apache and Nginx support Brotli with the appropriate module installed. Cloudflare enables Brotli compression for all traffic that routes through its network.

Reduce Third-Party Script Impact

Third-party scripts from analytics providers, social media widgets, advertising networks, and customer chat tools often execute on the main thread and delay interactive time. Audit every third-party script on your site by checking the Coverage tab in Chrome DevTools.

Load non-critical third-party scripts after the main page content by wrapping them in a DOMContentLoaded or load event listener. For chat widgets that users activate on demand, load the script only when the user clicks the chat button rather than on page load. Each deferred script reduces the main thread work the browser performs before the page becomes interactive.

Leverage Browser Caching

Set long cache lifetimes for static assets using Cache-Control headers. CSS, JavaScript, and image files that do not change frequently should carry a max-age of at least one year. When you update a file, change its filename or add a version query string so the browser fetches the new version instead of serving the cached copy.

🔗 Get Your Page Speed Score Run a free audit on your site with our SEO Audit Tool to see your current page speed metrics, Core Web Vitals scores, and prioritised improvement recommendations.

Monitor After Every Change

Page speed optimisation is not a single project. Every new plugin, image, or script you add affects load times. Set up continuous monitoring with a tool like SpeedCurve or WebPageTest to run automated tests after each deployment. Catch regressions before they compound and undo weeks of performance work.