Website speed is no longer a nice-to-have — it directly impacts your search rankings, conversion rates, and user satisfaction. Google has made Core Web Vitals a ranking factor, and studies consistently show that each additional second of load time reduces conversions by 7-12%. This guide covers the most impactful speed optimisation techniques we use at Born Digital.
Understanding Core Web Vitals
Google's Core Web Vitals measure three key aspects of user experience: Largest Contentful Paint (LCP) measures loading performance — your largest visible element should render within 2.5 seconds. Interaction to Next Paint (INP) replaced First Input Delay in 2024 and measures responsiveness — interactions should respond within 200 milliseconds. Cumulative Layout Shift (CLS) measures visual stability — unexpected layout shifts should score below 0.1.
Use Google PageSpeed Insights and Chrome DevTools to measure these metrics with real user data (CrUX) and lab data. Focus on field data over lab data — it reflects actual user experience across different devices and network conditions.
Image Optimisation
Images are typically the largest assets on a page and offer the most significant optimisation opportunities. Modern image formats like WebP and AVIF deliver 25-50% smaller file sizes compared to JPEG and PNG with equivalent visual quality.
- Use responsive images: Serve different image sizes based on viewport width using the
srcsetandsizesattributes. - Lazy load below-fold images: Use
loading="lazy"on images that are not visible in the initial viewport. - Set explicit dimensions: Always include width and height attributes to prevent layout shifts as images load.
- Use a CDN with image transformation: Services like Cloudflare Images or imgix can resize, compress, and format-convert images on the fly.
JavaScript and CSS Optimisation
Excessive JavaScript is the single biggest performance killer on modern websites. Every kilobyte of JavaScript must be downloaded, parsed, compiled, and executed — and this cost is especially punishing on mobile devices. Audit your JavaScript bundles using Chrome DevTools Coverage tab to identify unused code.
Code splitting allows you to load only the JavaScript needed for the current page. Tree shaking eliminates dead code from your bundles. Defer non-critical scripts with the defer attribute, and consider moving analytics and tracking scripts to web workers where possible.
For CSS, extract critical above-the-fold styles and inline them in the HTML head. Load the remaining CSS asynchronously. Remove unused CSS rules — tools like PurgeCSS can automate this process during your build step.
Server and Hosting Optimisation
Your server response time (Time to First Byte) sets the baseline for all other performance metrics. Use a CDN to serve content from edge locations close to your users. Enable HTTP/2 or HTTP/3 for multiplexed connections. Implement server-side caching with appropriate cache headers — static assets should have long cache lifetimes with cache-busting filenames.
Enable Brotli compression (superior to Gzip) for text-based assets. Pre-connect to required third-party origins using <link rel="preconnect"> to eliminate connection overhead for external resources like fonts and analytics.
Measuring and Iterating
Speed optimisation is an ongoing process, not a one-time project. Set up Real User Monitoring (RUM) to track performance over time. Google Search Console provides Core Web Vitals reports based on real user data. Set performance budgets for your team — maximum JavaScript size, maximum image weight, target LCP and INP values — and enforce them in your CI/CD pipeline.
At Born Digital, we build performance into our development process from day one. Our Astro-based sites consistently achieve perfect Lighthouse scores because we prioritise zero-JavaScript-by-default architecture. Whether you need a performance audit of your existing site or want to build something fast from scratch, we can help.