Industry: Retail / Coffee Equipment
Services Delivered: Performance optimisation, WordPress customisation, frontend refinement, plugin configuration

Fixing Performance Without Breaking UX

BeanMachines — an established retailer of commercial coffee machines — was seeing a sudden and dramatic drop in Google rankings across its product pages. Core Web Vitals had flagged poor LCP (Largest Contentful Paint) scores, and the client suspected this was tied to both SEO performance and a visibly slow image load on mobile devices.

They came to me needing targeted help: identify the issue, resolve it without degrading user experience, and get Google’s performance metrics back in the green.

What They Needed

  • Diagnose and fix LCP issues on product pages
  • Avoid disrupting rankings further while improving site UX
  • Ensure fixes were testable, reversible, and maintainable
  • Future-proof the site for ecommerce reactivation

How I Helped

Deep Analysis & Staging Setup

I began with an audit of both live and staging environments. The product pages suffered from:

  • Render-blocking CSS: large unused stylesheets delaying the first paint
  • Early image loading: theme overrides that disabled lazy loading
  • JavaScript delays: deferred interactivity until scripts loaded
  • Cloudflare interference: conflicting Rocket Loader optimisation

Working in a controlled staging environment, I tested various plugin and theme-level optimisations — carefully isolating their impact.

Smart Optimisation Strategy

To solve the LCP issue and improve perceived load time, I:

  • Replaced WP Meteor with Perfmatters for finer control
  • Removed unused CSS and inlined critical CSS
  • Lazy-loaded images and iframes, excluding LCP elements
  • Hooked into theme logic to override anti-lazy-loading classes
  • Addressed YouTube embeds that were blocking interactivity
  • Introduced loading spinners to show users the gallery was interactive
  • Moved and styled WooCommerce buy buttons to feel more integrated

All changes were modular, documented, and placed in the child theme for easy rollback.

Collaboration That Builds Trust

Throughout the project, I maintained regular communication with the client — explaining trade-offs, offering fallback plans, and ensuring no changes went live without approval.

We prioritised perceived UX just as much as Google metrics — identifying the balance point where user experience and performance scores could both thrive.

Tech Stack

  • WordPress (with WooCommerce active but disabled for checkout)
  • Perfmatters (CSS/JS/image optimisation)
  • Cloudflare (caching, CDN)
  • Custom filters + theme overrides (CSS & template integration)

Results

  • Product page LCP scores moved back into the green
  • Key images loaded earlier and visibly — improving UX and bounce rate
  • PageSpeed Insights scores reached 98+ on mobile for key pages
  • Structured fixes ensured minimal disruption to SEO or functionality
  • Buy button integration and frontend gallery updates delivered a polished, sales-ready experience

Why It Worked

By carefully balancing frontend performance tweaks with real-world user behaviour, this project avoided the trap of chasing “perfect scores” at the cost of usability. With custom filters, CSS overrides, and clear fallback strategies, the client gained a faster, friendlier site — without breaking what worked.

“Ray took the time to really understand what we needed — not just technically, but in terms of how the site feels to customers. He explained every step clearly, avoided risky changes, and worked with us to strike the right balance between Google’s metrics and real user experience. We’re now seeing much faster load times and better engagement. Hugely appreciated!“

— Andrew B.