Most websites have hidden performance issues that tools can quickly reveal. Slow server response times, large unoptimised images, and resources that block your page from displaying all work together to create a sluggish experience. Understanding how to measure and improve these elements helps you make your site faster.
This guide walks you through the audit process using free tools and shows you practical ways to improve your site’s performance. You’ll learn how to test key metrics, identify problems, and apply fixes that make a real difference to your load times.
Understanding Key Metrics: TTFB, Render Blocking, and Image Optimisation
Page speed relies on three core elements that directly affect how quickly your site loads. Time to First Byte measures server response, render-blocking resources control when content appears, and image optimisation reduces file sizes without sacrificing quality.
Importance of Time to First Byte (TTFB)
Time to First Byte measures how long your browser waits to receive the first byte of data from your server. This metric starts when you click a link and ends when your browser gets its first response.
A good TTFB sits under 300 milliseconds. Anything over 600 milliseconds signals a problem that needs attention.
Your TTFB affects all other loading metrics because nothing can happen until that first byte arrives. If your server takes too long to respond, your entire page speed suffers.
Several factors control your TTFB:
- Server processing time – How fast your server generates the page
- Database queries – The speed of your database responses
- Hosting quality – Your server’s hardware and configuration
- Network latency – The physical distance between server and user
TTFB forms part of your Core Web Vitals assessment. Search engines use this data to evaluate your site’s performance and user experience.
Identifying Render-Blocking Resources
Render-blocking resources are files that stop your browser from displaying content until they finish loading. CSS and JavaScript files typically cause these delays.
Your browser must download and process CSS files before it can show anything on screen. This is necessary because CSS controls how your page looks. JavaScript files also block rendering when placed in the wrong location.
You can identify render-blocking resources through PageSpeed Insights or Chrome DevTools. These tools show which files delay your First Contentful Paint.
Common render-blocking resources include:
- External stylesheets
- JavaScript files in the page head
- Custom fonts
- Third-party scripts
You can reduce blocking by loading critical CSS inline and deferring non-essential scripts. This lets your browser paint content faster whilst still loading all necessary files.
Role of Image Optimisation in Page Speed
Images account for most of the data your pages transfer. An unoptimised image can weigh several megabytes whilst an optimised version delivers the same quality at a fraction of the size.
Modern formats like WebP reduce file sizes by 25-35% compared to JPEG without visible quality loss. Proper sizing matters too—sending a 3000-pixel image to display at 300 pixels wastes bandwidth.
Essential image optimisation techniques:
- Compression – Reduce file size without losing visible quality
- Correct dimensions – Match image size to display size
- Modern formats – Use WebP or AVIF when supported
- Lazy loading – Load images only when they enter the viewport
Lazy loading improves your initial load time by deferring off-screen images. Your browser loads visible content first and fetches additional images as users scroll.
Web Vitals and User Experience
Core Web Vitals measure three aspects of user experience: loading speed, interactivity, and visual stability. Your work on TTFB, render-blocking resources, and images directly improves these scores.
Largest Contentful Paint (LCP) tracks when your main content appears. It should occur within 2.5 seconds. Images often serve as the LCP element, making optimisation crucial.
First Input Delay (FID) measures how quickly your page responds to interactions. Heavy JavaScript files that block rendering increase this delay.
Cumulative Layout Shift (CLS) scores visual stability. Images without defined dimensions cause layout shifts as they load and push content around.
Users leave sites that load slowly. A one-second delay in load time reduces conversions by 7%. Every 100 milliseconds of improvement in your metrics creates a measurable increase in user satisfaction and engagement.
Auditing Page Speed: Tools and Analysis
Modern page speed auditing relies on specialised tools that measure specific performance metrics. These tools evaluate TTFB, render delays, and Core Web Vitals to identify bottlenecks affecting your website’s loading speed.
Using Lighthouse and Audit Tools
Lighthouse provides comprehensive page speed analysis directly through Chrome DevTools. You can run audits by opening DevTools, navigating to the Lighthouse tab, and generating a report that scores your performance from 0 to 100.
The tool measures six key metrics and flags issues like unoptimised images, render-blocking resources, and slow server response times. Each audit includes actionable recommendations ranked by potential impact.
Beyond Lighthouse, tools like Yellow Lab Tools and PageSpeed Insights offer alternative perspectives on your website’s performance. These platforms analyse the same metrics but may present data differently or highlight additional front-end quality issues.
Chrome DevTools Network tab lets you examine individual resource loading times and TTFB values. You can filter by resource type, review waterfall charts, and identify which assets delay page rendering.
Assessing Core Web Vitals Scores
Your Core Web Vitals scores directly impact search rankings and user experience. Largest Contentful Paint (LCP) should occur within 2.5 seconds, measuring how quickly your main content loads.
Interaction to Next Paint (INP) must stay below 200 milliseconds to ensure responsive interactions. Cumulative Layout Shift (CLS) needs to remain under 0.1 to prevent unexpected content movement that frustrates users.
Google Search Console displays your real-world Core Web Vitals data from actual visitors. This field data reveals how your pages perform across different devices and connection speeds.
Monitor these scores regularly through tools like Auditzy or DebugBear, which track changes over time and alert you when metrics deteriorate.
Analysing Load and Render Delays
Page rendering delays often stem from render-blocking CSS and JavaScript files. The Network waterfall chart shows which resources prevent the browser from displaying content quickly.
TTFB exceeding 600 milliseconds indicates server-side performance issues. You need to investigate database queries, hosting infrastructure, or origin server configuration when TTFB measurements consistently exceed this threshold.
First Contentful Paint (FCP) marks when users first see content on screen. Long delays between TTFB and FCP usually point to render-blocking resources or excessive DOM processing.
Tools like SpeedVitals test TTFB from multiple global locations, helping you identify regional performance variations. This geographic data proves essential for websites serving international audiences.
Optimisation Strategies: Enhancing Performance
Faster page speeds require targeting three critical areas: server response times, resource loading priorities, and media file efficiency. These optimisations directly impact your Core Web Vitals scores and user experience.
Reducing Time to First Byte
TTFB measures how long it takes for the first byte of data to reach your browser after requesting a webpage. Your server’s response time should stay under 600 milliseconds for good performance.
Start by upgrading your hosting infrastructure. Shared hosting often struggles with TTFB because resources are divided among multiple sites. A virtual private server or dedicated hosting provides more consistent response times.
Enable server-side caching to store pre-generated versions of your pages. This eliminates the need to rebuild content for every visitor. Database query optimisation also reduces the time your server spends fetching information before sending responses.
Content delivery networks distribute your site’s files across multiple geographic locations. When someone visits your site, they receive data from the nearest server rather than your origin server. This cuts down network latency significantly.
DNS lookup times contribute to TTFB even though performance audits don’t always include them. Choose a reliable DNS provider with fast resolution times to shave milliseconds off your initial connection.
Eliminating Render-Blocking Resources
Render-blocking resources prevent your page from displaying content until specific CSS and JavaScript files finish loading. These delays directly harm your Largest Contentful Paint scores.
Critical CSS techniques inline the styles needed for above-the-fold content directly in your HTML. Your remaining stylesheets can load asynchronously without blocking the initial render. Extract only the CSS rules required for your LCP element and visible content.
JavaScript files should use the defer or async attributes. The defer attribute loads scripts in order without blocking HTML parsing. The async attribute works best for independent scripts that don’t rely on other files.
Remove unused CSS and JavaScript from your codebase. Many sites load entire framework libraries when they only use a fraction of the code. Tools can identify which styles and scripts your pages actually need.
Font files often block rendering whilst they load. Use font-display: swap to show system fonts immediately whilst your custom fonts download in the background.
Advanced Image Optimisation Techniques
Images typically account for the largest portion of page weight. Reducing image file sizes improves both loading speeds and bandwidth consumption.
WebP format provides superior compression compared to JPEG and PNG files. You can achieve 25-35% smaller file sizes with identical visual quality. Most modern browsers support WebP, though you should include fallback formats for older browsers.
Lazy loading defers offscreen images until users scroll near them. This prioritises loading your LCP element and other critical above-the-fold content first. Native lazy loading works with a simple loading="lazy" attribute on image tags.
Responsive images serve different file sizes based on device specifications. Use the srcset attribute to provide multiple image versions. Mobile users receive smaller files whilst desktop users with larger screens get higher resolution images.
Compress images before uploading them to your site. Lossless compression removes unnecessary metadata without affecting quality. Lossy compression reduces file sizes further by simplifying image data in ways most viewers won’t notice.
Improving Largest Contentful Paint and Load Experience
Largest Contentful Paint (LCP) measures when the largest visible element in the viewport finishes loading. Breaking down LCP into its component parts reveals specific delays you can target, whilst optimising both the element itself and how quickly it renders directly impacts your page speed.
Analysing LCP Subparts
LCP time divides into four distinct subparts that pinpoint where delays occur. Time to First Byte (TTFB) tracks how long your server takes to respond to the initial request. Resource Load Delay measures the gap between TTFB and when the LCP element starts downloading.
Resource Load Time covers how long the actual download takes. Element Render Time shows how long the browser needs to paint the element on screen.
You can identify which subpart causes your slowest LCP time using Chrome DevTools or PageSpeed Insights. Look for the largest contributor in your LCP breakdown. If TTFB dominates your timeline, your server response needs work. When Resource Load Delay is high, render-blocking resources are likely interfering with your LCP element.
Accelerating LCP Element Load Time
The LCP element is typically a hero image, background image, or large text block above the fold. Compressing images reduces Resource Load Time significantly—use WebP format and properly sized images for different viewport widths.
Add fetchpriority="high" to your LCP image element. This tells the browser to download it before lower-priority resources. Remove any lazy loading attributes from above-the-fold images, as they delay the start of your LCP element download.
Implement a Content Delivery Network (CDN) to serve images from locations closer to your users. This reduces both TTFB and Resource Load Time. Consider using responsive images with srcset to deliver appropriately sized files based on screen dimensions.
Addressing LCP Render Delay
Render delay occurs when CSS or JavaScript blocks the browser from painting your LCP element. Inline critical CSS needed for above-the-fold content directly in your HTML <head>. This eliminates the render-blocking external stylesheet request.
Defer non-critical JavaScript using the defer or async attributes. Move scripts to the bottom of your page when possible. Remove unused CSS and JavaScript that loads before your LCP element appears.
Font loading can also delay LCP rendering. Use font-display: swap in your CSS to show text immediately with a system font whilst custom fonts load. Preload critical fonts with <link rel="preload"> to fetch them earlier in the page load sequence.
If you’re tired of traffic that doesn’t convert, Totally Digital is here to help. Start with technical seo and a detailed seo audit to fix performance issues, indexing problems, and lost visibility. Next, scale sustainably with organic marketing and accelerate results with targeted paid ads. Get in touch today and we’ll show you where the quickest wins are.