Outdoor retailers sell with big scenery and small detail at the same time. The home page leads with a mountain campaign shot or a short film. Category pages list hundreds of jackets with filters for waterproofing, fill, gender and size. Product pages carry a gallery for every colourway, a specification table, a size guide, a fit widget and reviews.
All of that has to work on a phone. This guide shows where outdoor sites tend to lose speed against Google’s measures, and how to fix it without stripping out the imagery and tools that sell kit.
The three measures, in outdoor terms
Google’s Core Web Vitals are scored on real visits at the 75th percentile, with mobile and desktop judged separately.
- Largest Contentful Paint (LCP) times the arrival of the biggest image, video or text block on screen. On an outdoor home page that is often the campaign banner, which should be on screen within 2.5 seconds. Beyond 4 seconds counts as poor.
- Interaction to Next Paint (INP) times the response to clicks, taps and key presses, such as a filter tick or a colourway tap. A filter that responds within 200 ms is good, and anything slower than 500 ms is poor.
- Cumulative Layout Shift (CLS) scores unexpected movement, such as a fit widget pushing the size buttons down. A score of 0.1 or less is good, while a jacket page above 0.25 is rated poor.
INP became a Core Web Vital in 2024, replacing First Input Delay. Field data from the Chrome UX Report shows what visitors experienced, through PageSpeed Insights and Search Console. Lab tests explain why. Lighthouse cannot measure INP at all, so it reports Total Blocking Time instead.
What 2024 data says about phones
The Web Almanac 2024 performance chapter covers the whole web rather than outdoor retail, using mid-2024 Chrome data. Two of its comparisons are relevant to busy shop pages:
- INP was good on 97% of sites on desktop but only 74% on mobile.
- CLS was good on 79% of sites on mobile and 72% on desktop.
It also reported the formats of LCP images on desktop, with mobile similar: JPEG 61%, PNG 26%, WebP 7% and AVIF 0.3%.
For an outdoor retailer, the lesson is to test interactions on a phone, not only on the office desktop, and to check what format the banners are served in.
What I measured on UK outdoor gear product pages (October 2026)
For this section I ran five UK outdoor gear product pages through PageSpeed Insights on 23 October 2026. Each got one mobile run, with an emulated mid-range phone over slow 4G.
| Page | Performance score | Lab LCP | Total Blocking Time | Lab CLS |
|---|---|---|---|---|
| Retailer A | 38 | 15.8 s | 730 ms | 0.000 |
| Retailer B | 50 | 13.9 s | 350 ms | 0.000 |
| Retailer C | 37 | 18.0 s | 810 ms | 0.000 |
| Retailer D | 25 | 16.7 s | 960 ms | 0.182 |
| Retailer E | 53 | 27.4 s | 160 ms | 0.000 |
Every page took more than 10 s to show its main content in the lab. The median lab LCP was 16.7 s and the median score 38. Lighthouse flagged forced reflow on all five pages, the layout thrashing that also slows filter redraws, and late LCP discovery on three. Layout shift was less of a problem: only Retailer D had a lab CLS above 0.1. Median blocking time was 730 ms.
Retailer A shows how far lab and field can differ. Its lab LCP was 15.8 s, yet it was the one page with Chrome UX Report data for its own URL. It passed Core Web Vitals. A throttled lab phone is far slower than most real visits, and Google does not judge on lab LCP. The other four pages had whole-site (origin) data only, and two of those sites passed. Five outdoor pages is a small sample, not a ranking.
Campaign banners and hero film (LCP)
Seasonal campaigns change the home page and category headers several times a year, often under deadline. Banners added through a page builder are sometimes set as CSS backgrounds. The browser can still treat a background image as the LCP element, but it finds it late, because it has to load the stylesheet first. Google does not index CSS images in image search either.
Google’s guide to optimising LCP suggests:
- Use an
<img>element for the banner, or a<picture>with separate phone and desktop crops. If it must stay in CSS, preload it withfetchpriority="high". - Give only the first banner high priority. Later slides in a carousel can take
fetchpriority="low". - Never lazy-load the banner, and do not hide it until a slider script has run.
- Serve WebP or AVIF from your own origin, sized for the screen.
Hero films need a light poster image. For video, LCP is timed from when the poster loads or the first frame appears, whichever comes first.
Email campaigns can add a problem of their own. The LCP guide warns that unique URL parameters can defeat CDN caching, slowing the server response. Newsletter links with a tracking code per subscriber can turn every click into an uncached page. Ask your CDN to ignore tracking parameters when caching.
Filters on category pages (INP)
Category pages are where outdoor sites often get interactive. A shopper might tick “women’s”, then “waterproof”, then “size 12”, then change the sort order. Each is a separate interaction, and INP usually reports the slowest of them for the visit.
The slow part can be the redraw. When a filter tick rebuilds a grid of a hundred product cards, each with colour dots and badges, the browser has a large layout to recalculate. web.dev breaks an interaction into input delay, processing and presentation delay, and links large page structures and layout thrashing to slow responses.
- Show the ticked box straight away, then update the results.
- Limit the first set of results, with “load more” or pages, instead of drawing the full range.
- Update only the cards that change rather than rebuilding the grid.
- Load the first row of card images normally and lazy-load the rest.
- Keep colour-dot images on cards small, and fetch a colourway’s photo only when the buyer shows interest.
Colourways, size guides and fit widgets (CLS)
Product pages for outdoor clothing and boots carry several features that load late. Fit recommendation widgets insert a suggested size, review and Q&A widgets add blocks, and buy-now-pay-later messages appear under the price. Google’s CLS guidance lists third-party widgets that resize, inserted content, late-loading content, unsized images and web fonts among the causes of layout shift.
- Reserve space for the fit widget’s suggestion line and the payment message.
- Keep the gallery a fixed size, so switching from one colourway to another never moves the size buttons.
- Show a loader in the size guide’s reserved space, so the guide does not push content down as it fills.
- Animate drawers and accordions with
transform.
Shifts within 500 ms of a tap or key press are not counted. A size guide that opens when tapped is fine. A suggested-size line that appears three seconds after load is not.
Tent and sleeping bag comparison tables need care too. A wide table built after load by JavaScript can shift the page and add a large structure to redraw. Render it with the page, with fixed column widths.
3D views and pitched-tent spins
A 3D tent or rucksack viewer, or a 360 spin of a pitched tent, helps buyers judge space and layout. Load it only when the buyer asks, and use a still photograph as the stand-in so that the photo, not the model, is the LCP element. Compress models and keep textures in proportion to the screen. You can see this approach in the outdoor configurator demos.
Checking an outdoor site
- In Search Console’s Core Web Vitals report, compare category pages with product pages. Filter-heavy categories may fail INP when product pages pass.
- Run the home page, a busy category and a jacket page through PageSpeed Insights, taking the field figures first.
- On a mid-range Android phone, tick four filters on a category page and note any lag.
- In Chrome DevTools, find the LCP element on the home page. Check whether it is an
<img>or a CSS background. - Click a newsletter link and compare the response time with the same page without its tracking code.
- Switch between three colourways on a product page and watch whether anything below the gallery moves.
- List every third-party script on a product page, its owner and its purpose.
Most of this can be done without changing the design. If you would like help, see Core Web Vitals, Shopify speed optimisation and WooCommerce speed, caching and scripts. The rest of the outdoor series covers selling outdoor gear online and outdoor gear SEO.
Sources
- web.dev, Web Vitals, LCP, Optimise LCP, INP and CLS, all checked October 2026.
- HTTP Archive, Web Almanac 2024, Performance chapter, November 2024. Whole-web figures from mid-2024 Chrome UX Report and lab data, not specific to outdoor retail.
- My own tests: PageSpeed Insights, 5 UK product pages per industry, 23 October 2026 (the outdoor gear results in the table above).