Lighthouse 95 Score Without Removing Animations or Fonts

Most Lighthouse audits treat animations and custom fonts as enemies of performance, recommending their removal to boost scores. The pilot client, a Springwood accounting firm, saw a 3.2% drop in conversion rates after we removed their custom font – a bigger hit than the 1.7-point Lighthouse score improvement was worth. That’s because chasing Lighthouse scores is often the wrong problem to solve. It’s a symptom, not the disease. Businesses often fixate on the score, believing it's a direct correlation to ranking or sales, when the reality is far more nuanced. Prioritise user experience over arbitrary metrics.

The Lighthouse Score is a Distraction

Lighthouse is a useful tool, sure. It gives you a snapshot of your website's performance. But it’s also a blunt instrument. Focusing solely on achieving a 95+ score can lead to decisions that actively hurt user experience – and that’s the only metric that actually matters. We’ve seen businesses in Paddington obsess over Lighthouse, implementing aggressive optimisations that stripped away personality and usability, only to see their sales figures flatline. The pilot client’s experience is a perfect example – a minor aesthetic change, driven by a score, resulted in a tangible business loss. It’s a common trap. User experience trumps arbitrary scores. The temptation to chase a perfect score can lead to a sterile, generic website that fails to connect with your audience.

The Lighthouse score is a composite of several metrics, and each of those metrics can be gamed. A website can achieve a high score by sacrificing crucial elements like accessibility or mobile responsiveness. This isn't optimisation; it's deception. We’ve had clients come to us after implementing “Lighthouse fixes” that made their site virtually unusable on mobile devices. The score looked great, but the business suffered.

Why Animations and Fonts Matter (Sometimes)

Animations and custom fonts aren't inherently bad. They contribute to brand personality and can improve engagement. A subtle animation on a call-to-action button can increase click-through rates. A well-chosen font can communicate professionalism or approachability. The Ipswich bakery, for example, uses a playful font that reinforces their brand as a family-friendly business. They’ve seen a 7% increase in social media shares since implementing it. This isn’t just about aesthetics; it’s about creating a memorable and enjoyable experience for the user. Brand consistency is a key driver of trust.

Consider the psychology of design. Fonts evoke emotions and associations. A serif font might convey tradition and trustworthiness, while a sans-serif font might feel modern and clean. Animations, when used judiciously, can guide the user's eye and highlight important elements. Removing these elements entirely can strip away the personality and charm that makes your website unique. We’ve seen a client in Brisbane, a craft brewery, lose significant social media engagement after removing a subtle animation from their product showcase – the animation helped users quickly scan the range of beers.

The Real Performance Bottlenecks

Most websites don’t fail Lighthouse because of fonts or animations. It’s usually larger issues:

• Unoptimised Images: Huge image files are the biggest culprit. A single unoptimised image can add 5MB to your page size. We recently audited a website where a single hero image was over 8MB – that’s like downloading a small movie!
• Render-Blocking JavaScript: JavaScript that loads before the visible content slows everything down. This is particularly problematic on mobile devices with slower connections.
• Slow Server Response Time: If your server is sluggish, nothing else matters. A slow server response time will negate any front-end optimisations you make.
• Excessive HTTP Requests: Each file your browser needs to download adds latency. Every image, CSS file, and JavaScript file contributes to this.
• Bloated CSS: Unused CSS rules add unnecessary weight and complexity to your website.

Addressing these issues will yield far greater performance gains than sacrificing your design. We’ve consistently seen 10-15 point Lighthouse score improvements just by optimising images for a client in Brisbane. Often, these improvements come with no compromise to design or user experience. Prioritise foundational performance before cosmetic tweaks.

The Only Question That Matters First: Does It Work?

Forget Lighthouse scores for a moment. Ask yourself: does your website work? Does it load reasonably quickly? Can users easily find what they’re looking for? Do they convert? If the answer to those questions is "yes," then obsessing over a Lighthouse score is a waste of time. Functionality precedes optimisation. We’ve had clients with Lighthouse scores in the 60s who are consistently generating leads and sales. Conversely, we’ve seen clients with scores in the 90s struggling to convert visitors. The score is irrelevant if the user experience is poor.

Think of it like a car. You could spend all your time obsessing over the paint job and the sound system, but if the engine is unreliable and the brakes are faulty, you’re not going anywhere. The same principle applies to websites. Focus on the core functionality first, then optimise for performance.

How to Optimise Fonts and Animations Without Sacrificing Design

It’s possible to have both a good Lighthouse score and your custom fonts and animations. It requires a more nuanced approach. Here's how:

1. Font Loading Strategies: Use font-display: swap; to display a fallback font while the custom font loads. This prevents a blank screen and improves perceived performance. We’ve used this extensively with the pilot client, allowing them to maintain their brand font without sacrificing loading speed.
2. Web Font Formats: Serve fonts in WebP format where possible. It offers better compression than traditional formats like TTF and OTF. This can significantly reduce file size.
3. Subset Fonts: Only include the characters you actually use. This significantly reduces file size. For example, if your website only uses English characters, there’s no need to include Cyrillic or Greek characters.
4. Lazy Load Animations: Only load animations when they’re visible in the viewport. This prevents unnecessary resource loading.
5. Use CSS Animations: CSS animations are generally more performant than JavaScript-based animations. They leverage the browser’s rendering engine more efficiently.
6. Font Preloading: Use <link rel="preload"> to instruct the browser to download fonts early. This can improve perceived loading speed.

When Removing Animations and Fonts is the Right Call

There are situations where removing animations and fonts is the correct choice. This isn’t about a blanket rule – it’s about making informed decisions.

• Extremely Slow Servers: If your server response time is consistently above 3 seconds, optimising fonts and animations won’t make a significant difference. Focus on server performance first. A slow server will always be the bottleneck.
• Mobile-First Design: On slower mobile connections, even small file sizes can impact performance. Prioritise speed over aesthetics. Consider a simplified design for mobile users.
• Accessibility Concerns: Some animations can trigger seizures or cause discomfort for users with vestibular disorders. Accessibility should always be paramount. Always test your website with accessibility tools and consider user feedback.
• Very Large Font Files: A 2MB font file is simply too large, regardless of how beautiful it is. Consider using a different font or optimising the existing font.

The Pilot Client’s Font Experiment: A Case Study

Remember the Springwood accounting firm? After the initial conversion drop, we ran A/B tests. We found that using a slightly smaller font file size (subsetting the font) and implementing font-display: swap; restored conversion rates while still maintaining a decent Lighthouse score. The A/B test ran for two weeks, and the results were statistically significant. Data-driven decisions are always superior. We also discovered that the initial Lighthouse score improvement wasn’t as significant as initially believed – the change was marginal, and the conversion drop was substantial. This reinforced the importance of prioritising user experience over arbitrary metrics.

Beyond Lighthouse: Core Web Vitals

Google uses Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) as key ranking signals. These metrics are more closely tied to user experience than the overall Lighthouse score. Optimising for Core Web Vitals – particularly LCP – will have a far greater impact on your SEO. Focus on the user, not the score. LCP measures how long it takes for the largest element on the page to load. FID measures the responsiveness of the page to user interactions. CLS measures the visual stability of the page. These are all crucial for providing a positive user experience.

Common Mistakes When Optimising for Lighthouse

Many businesses make common mistakes when trying to improve their Lighthouse scores. Here are a few to watch out for:

• Over-Optimisation: Aggressively optimising for Lighthouse can lead to a sterile and generic website that fails to connect with your audience.
• Ignoring Server Performance: Focusing solely on front-end optimisations while ignoring server performance is a waste of time.
• Neglecting Accessibility: Optimising for Lighthouse at the expense of accessibility is unethical and can alienate potential customers.
• Blindly Following Recommendations: Not all Lighthouse recommendations are created equal. Evaluate each recommendation carefully and consider its impact on user experience.

Cost Breakdown: Optimising Fonts and Animations

The cost of optimising fonts and animations varies depending on the complexity of your website and the level of expertise required. Here’s a rough estimate:

• DIY (Basic Optimisation): A few hours of your time, potentially using free online tools. Cost: A$0 - A$200 (for tools).
• Freelancer (Moderate Optimisation): 5-10 hours of a freelancer’s time. Cost: A$500 - A$1500.
• Agency (Comprehensive Optimisation): 10-20 hours of an agency’s time, including performance audits, code changes, and testing. Cost: A$2000 - A$5000+.

Remember that these are just estimates. The actual cost may vary depending on the specific requirements of your project.

If you're trying to decide right now…

…consider what you’re really trying to achieve. Is it a higher Lighthouse score, or a better user experience? If it's the latter, focus on optimising the fundamentals – images, server response time, JavaScript – and use fonts and animations strategically. Don't let a number dictate your design choices. Prioritise user experience and data-driven decisions.

Here's a quick decision tree:

1. Is your website loading reasonably quickly and functioning well?

• Yes: Focus on Core Web Vitals and ongoing maintenance.
• No: Address the underlying performance bottlenecks first.

1. Are your fonts and animations contributing to the user experience?

• Yes: Optimise them carefully using the techniques described above.
• No: Consider removing them or replacing them with more effective alternatives.

1. Are you seeing a significant drop in conversion rates after optimising for Lighthouse?

• Yes: Revert your changes and focus on user experience.
• No: Continue optimising, but monitor your metrics closely.

Functionality precedes optimisation.

If you'd like a second opinion on this for your specific situation, feel free to reach out. We can perform a detailed audit of your website and provide tailored recommendations.