Website speed is not a technical nicety. It is a business metric that directly affects your bottom line. Research consistently shows that 53 percent of mobile visitors abandon a site that takes longer than three seconds to load. Google uses page speed as a ranking factor, meaning slower sites appear lower in search results. And conversion rates drop measurably with every additional second of load time. For Perth businesses competing for local customers, a slow website is not just an annoyance. It is actively costing you money. At WebAnchor Studio, performance optimisation is built into every project from the start, and this guide covers the techniques we use to keep websites fast.
Understanding Core Web Vitals
Google's Core Web Vitals are three specific metrics that measure user experience: Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. Understanding these metrics gives you concrete targets for optimisation rather than vague goals like make it faster.
Largest Contentful Paint measures how long it takes for the largest visible element on the page to render. This is usually a hero image, a heading, or a large block of text. Google considers a good LCP to be under 2.5 seconds. To improve LCP, you need to ensure your largest content element loads quickly, which often means optimising images, eliminating render-blocking resources, and ensuring your server responds promptly.
Interaction to Next Paint measures how quickly the page responds to user interactions like clicks, taps, and key presses. It captures the time from when a user interacts with an element to when the browser paints the next frame reflecting that interaction. A good INP is under 200 milliseconds. Poor INP is usually caused by heavy JavaScript that blocks the main thread, preventing the browser from responding to user input promptly.
Cumulative Layout Shift measures visual stability by tracking unexpected layout movements. When a page element shifts position after it has been rendered, it creates a frustrating experience where users might click the wrong button or lose their place while reading. A good CLS score is under 0.1. Common causes of layout shift include images without specified dimensions, dynamically injected content, and web fonts that change text size when they load.
Image Optimisation
Images typically account for 50 to 70 percent of a page's total weight, making them the highest-impact target for optimisation. The three key strategies are compression, format selection, and responsive sizing.
Modern image formats provide dramatically better compression than the JPEG and PNG formats that have dominated the web for decades. WebP offers 25 to 35 percent smaller file sizes than equivalent JPEG images with no visible quality difference. AVIF offers even better compression, with savings of 50 percent or more compared to JPEG. Both formats are supported by all modern browsers. We convert all images to WebP as a standard practice, with AVIF as a progressive enhancement for browsers that support it and JPEG as a fallback for older browsers.
Responsive images ensure that mobile devices download appropriately sized images rather than desktop-resolution versions. A hero image that is 2000 pixels wide on desktop should be served at 800 pixels on a phone. The HTML picture element and the srcset attribute make this straightforward. We generate multiple sizes of each image during the build process and let the browser select the most appropriate version based on the viewport width and device pixel ratio.
Lazy loading defers the downloading of images that are below the visible viewport until the user scrolls toward them. The native loading="lazy" attribute handles this without any JavaScript. For hero images and other above-the-fold content, we use loading="eager" and add a fetchpriority="high" attribute to tell the browser to prioritise these critical images.
Minimising Render-Blocking Resources
When a browser loads a web page, it must download and process CSS and JavaScript files before it can render content. These render-blocking resources delay the time to first paint and can significantly slow down the perceived load time. The goal is to minimise the amount of CSS and JavaScript that must be processed before the page becomes visible.
Critical CSS is the subset of your stylesheet that is needed to render the above-the-fold content. By inlining this critical CSS directly in the HTML document and deferring the full stylesheet, the browser can render the visible portion of the page without waiting for the external CSS file to download. This technique can reduce time to first paint by several hundred milliseconds, which has a noticeable impact on perceived speed.
JavaScript should be loaded with the defer or async attribute to prevent it from blocking rendering. The defer attribute tells the browser to download the script in the background and execute it after the HTML has been fully parsed. The async attribute downloads and executes the script as soon as it is available, which is appropriate for independent scripts like analytics that do not depend on the page structure. For most application JavaScript, defer is the correct choice.
Third-party scripts are often the worst offenders for render-blocking. Analytics scripts, chat widgets, social media embeds, advertising pixels, and marketing tools can collectively add seconds to your page load time. Audit your third-party scripts regularly, remove any that are no longer needed, and load the remaining ones asynchronously with appropriate delays. A chat widget that loads two seconds after the page renders is still available when users need it, but it does not slow down the initial page load.
Server and Hosting Optimisation
The fastest frontend optimisation in the world cannot compensate for a slow server. Time to First Byte measures how long it takes for the server to begin sending the response after receiving a request. A good TTFB is under 200 milliseconds for cached content and under 600 milliseconds for dynamic content. If your TTFB is consistently high, the problem is in your server infrastructure, not your frontend code.
Server location matters for Australian businesses. If your target audience is primarily in Australia and your server is in the United States, every request must travel across the Pacific Ocean and back, adding 150 to 300 milliseconds of latency. Hosting your site in an Australian data centre in Sydney, Melbourne, or Perth eliminates this geographical latency. For businesses targeting Western Australian customers, Perth-based hosting provides the lowest possible latency for local visitors.
Content Delivery Networks distribute cached copies of your static assets across servers worldwide, so users download files from the server closest to them. Even with an Australian-hosted origin server, a CDN can improve performance by serving images, CSS, and JavaScript from edge locations near the user. For businesses with interstate or international audiences, a CDN is essential. For purely local businesses, the benefit is smaller but still worthwhile for the caching and compression features most CDNs provide.
Browser caching allows returning visitors to load your site significantly faster by storing static assets locally. Setting appropriate Cache-Control headers tells the browser how long it can keep cached files before checking for updates. We typically set long cache lifetimes of one year for versioned assets like CSS and JavaScript files with content hashes in their filenames, and shorter lifetimes for HTML documents that may change more frequently.
Font Optimisation
Web fonts can cause two types of performance problems: delayed text rendering and layout shifts. When a browser downloads a custom font, it can either show invisible text while waiting for the font, a behaviour called Flash of Invisible Text, or show text in a fallback font that shifts when the custom font loads, called Flash of Unstyled Text. Both are undesirable, but FOUT is generally preferable because users can read the content immediately.
The font-display CSS property controls this behaviour. We use font-display: swap, which shows text immediately in a fallback font and swaps to the custom font when it loads. To minimise the visual disruption of the swap, we choose fallback fonts that closely match the size and spacing of the custom font, and we use the CSS size-adjust property to fine-tune the fallback font's metrics.
Preloading critical fonts ensures they begin downloading as early as possible. A link element with rel="preload" and as="font" tells the browser to prioritise downloading the font file. We preload only the one or two font weights used in above-the-fold content and let the remaining weights load normally. Subsetting fonts to include only the characters you actually use can also reduce font file sizes significantly, particularly for fonts with large character sets.
Measuring and Monitoring
Optimisation without measurement is guesswork. Google PageSpeed Insights provides a quick assessment of your page's Core Web Vitals along with specific recommendations for improvement. Lighthouse, available in Chrome DevTools, provides more detailed analysis including performance scores, accessibility audits, and best practice checks. WebPageTest offers advanced testing features including multi-step transactions, video comparisons, and testing from different geographic locations.
Real User Monitoring captures performance data from actual visitors to your site, providing a more accurate picture than lab-based testing. Tools like Google Analytics, Datadog, and SpeedCurve collect Core Web Vitals data from real user sessions, showing you how your site performs across different devices, connections, and geographic locations. We set up RUM on every client site and review the data monthly to identify performance regressions before they become significant problems.
Key Takeaways
Website speed directly impacts your business through user experience, conversion rates, and search engine rankings. Focus on Core Web Vitals as your primary performance targets. Optimise images through compression, modern formats, responsive sizing, and lazy loading. Minimise render-blocking CSS and JavaScript. Choose hosting infrastructure that provides low latency for your target audience. Optimise font loading to prevent invisible text and layout shifts. Measure performance regularly with both lab tools and real user monitoring. At WebAnchor Studio, we treat performance as a fundamental design requirement, not an afterthought, because fast websites deliver better results for every business metric that matters.