Buying an espresso machine is rarely a quick decision, and coffee equipment sites are built to support a long look. Product pages carry close-up photography of polished steel, extraction videos, grinder pairing options, finance for the dearer machines and a “subscribe and save” box for beans. Guides run to thousands of words with embedded videos. Spares pages show exploded diagrams with dozens of clickable parts.

All of that has a cost on a phone. This guide explains how Google scores page speed and works through the parts of a coffee site where the cost usually lands.

What Google scores, and how

Google’s Core Web Vitals come from real Chrome visits and are judged at the 75th percentile, with mobile and desktop reported separately.

MeasurePlain meaningTargetPoor beyond
LCPTime until the largest thing in view is drawnup to 2.5 seconds4 seconds
INPLag after a click, tap or key pressup to 200 milliseconds500 milliseconds
CLSUnexpected movement of contentup to 0.10.25

INP took over from First Input Delay in 2024. For diagnosis, Lighthouse and Chrome DevTools give lab results from one controlled load. Lighthouse has no way to record INP, so it shows Total Blocking Time in its place.

What I measured on UK coffee equipment product pages (October 2026)

On 23 October 2026 I put five UK coffee equipment product pages through PageSpeed Insights, one mobile run each, with the tool emulating a mid-range phone over slow 4G.

PagePerformance scoreLab LCPTotal Blocking TimeLab CLS
Retailer A2815.5 s1,620 ms0.08
Retailer B4118.8 s640 ms0.00
Retailer C3516.8 s1,090 ms0.00
Retailer D465.4 s760 ms0.04
Retailer E317.8 s2,860 ms0.00

These were slow pages. The median score was 35, below the median of 41 across all 103 valid pages I tested, and the median lab LCP was 15.5 seconds. Every coffee page recorded at least 640 ms of Total Blocking Time, and one reached 2,860 ms. Layout held steady, with no lab CLS above 0.1, even though Lighthouse listed layout shift culprits on four pages. It also flagged late discovery of the LCP image on four, which matches the heavy machine photography and bundle scripts discussed below.

Field data was richer for coffee than for most trades. Three pages had Chrome UX Report data for their own URL, and only one of those passed Core Web Vitals; of the two with whole-site (origin) data only, one passed. A lab run on a throttled phone is much slower than most real visits, and lab LCP is not what Google assesses. Five espresso and grinder pages are a small sample, not a league table.

Polished steel and the hero image

The largest element on most product pages is an image. The 2024 Web Almanac performance chapter found an image as the LCP element on 73.3% of mobile pages and 83.3% of desktop pages, across the whole web. On a coffee machine page, that image is typically the first gallery shot.

Machine photography is demanding. Reflections, brushed metal and fine detail around the group head make files large, and studio exports often arrive at print resolution. In 2024, 8% of mobile LCP images on the web were over 1,000 KB. A product shot of that size on a phone is a long wait for the one image the buyer came to see.

What to do about it:

  • Export to the layout, not the camera. Serve a set of widths through srcset so a phone gets a phone-sized file, in AVIF or WebP.
  • Mark the hero for early loading. Put it in the HTML as a normal <img> and add fetchpriority="high". In 2024 only 15% of mobile pages across the web did this for their LCP image, so most pages in that data had not taken this simple step.
  • Keep it out of the lazy queue. loading="lazy" belongs on images further down the page, never on the first one.
  • Check the four parts of LCP. Google’s LCP optimisation guide gives a guideline: server response and image download each take roughly 40% of the time, while the two delays stay under 10% and ideally close to zero. A long wait before the image starts loading often means the browser could not find it early.

Extraction videos and autoplay heroes

Coffee lends itself to video: crema forming, milk being steamed, a grinder dosing into a portafilter. A muted autoplay loop at the top of a page can look good, but it is expensive.

Google’s LCP rules treat a <video> as a candidate, timed from whichever comes first, the poster image loading or the first frame painting. That gives a practical fix. Always set a poster image, sized and compressed like a hero photograph, so LCP can complete before the video file has downloaded. On product pages, my advice is to load the video only when the buyer presses play, and to keep the gallery image as the first thing on screen.

Embedded players from video platforms bring their own scripts. A still image with a play button, swapped for the player on click, keeps that script off the initial load.

Bundle builders, grind options and subscriptions (INP)

Coffee pages have more choices to tap than most. A buyer may pick a finish, add a grinder, choose a bean subscription frequency and select a water filter, all on one page. Each tap is an interaction that INP records, and it usually reports the slowest one of the visit.

web.dev’s INP article breaks each interaction into input delay, processing time and presentation delay. On a bundle builder, the processing step is the likely problem: recalculating prices, swapping images and updating a summary all at once.

  • Update the price and the selected option first, then do anything else.
  • Precompute bundle prices where possible, rather than calculating them in the browser on every tap.
  • Keep subscription and loyalty apps from running heavy scripts on every option change.
  • Remember what INP ignores: hovering over a grinder, scrolling the gallery or pinch-zooming a photo are not counted.

Subscription boxes, finance and reviews (CLS)

Layout shift on coffee pages can come from apps that inject content near the add-to-basket button after the page has drawn. A subscription selector, a finance line for an expensive machine, review stars and a “pairs well with” carousel can each push the button down just as the buyer reaches for it.

CLS groups shifts into bursts that are less than a second apart, up to five seconds long, and reports the worst burst. web.dev’s CLS guidance names late-loading content, content inserted above existing content and resizing third-party widgets among the causes. The fixes are layout work rather than speed work:

  • Give each app a placeholder of the right height before its content arrives.
  • Insert recommendation carousels below the buy box, not above it.
  • Set width and height, or an aspect-ratio, on every gallery and thumbnail image.

A shift that follows within half a second of a tap is excluded, so a subscription panel that opens when the buyer selects it does not count against you.

Parts diagrams and long guides

Spares sections often show an exploded diagram with a hotspot for every part. Drawn as a large inline SVG with hundreds of elements, it adds to page size and can make each hotspot tap slower. Splitting the machine into sections (group, boiler, steam, case) keeps each diagram and its list of parts smaller.

Brew guides behave differently from product pages. Their largest element may be a block of text rather than an image: in 2024, text was the LCP element on 26.3% of mobile pages across the web. For text, a common delay is the web font. Preload the font used for headings and body, and choose a fallback of similar size so the swap does not move the text.

Seven checks for a coffee equipment site

  1. In Search Console’s Core Web Vitals report, compare product pages with guide pages; they may fail for different reasons.
  2. Run a machine page through PageSpeed Insights and note the LCP element and its file size.
  3. Check whether the hero image carries fetchpriority="high" and no lazy loading.
  4. On a product page with video, confirm a poster image is set and the player loads on demand.
  5. On a mid-range phone, choose a finish, add a grinder and change the subscription option, timing the response.
  6. Record the page loading and watch whether the add-to-basket button moves.
  7. Open a spares diagram on a phone and tap through several hotspots.

Speed and search work together on a coffee site; the coffee machine SEO guide covers finishes, spares and bundles from the search side. For help with the speed work, see Core Web Vitals or Shopify speed optimisation. You can also try the coffee demos, and selling coffee equipment online completes the set.

Sources