Bags sell on detail. A good product page shows the outside from every side and the inside with its pockets and laptop sleeve. It adds close-ups of zips and stitching, and the bag in hand or on a shoulder. Then come a dimensions diagram, a walkthrough video, reviews and sometimes a monogram preview. Luggage pages may add a spin of the wheels and handle, and a check against airline cabin sizes.
All of that helps a buyer decide. It also gives a phone a lot to download and run. This guide shows how Google measures the result, and how to keep the detail while making the page quicker.
The thresholds, and what moves them on a bag page
Google’s Core Web Vitals are measured on real visits at the 75th percentile, with mobile and desktop judged apart. Put simply, three visits in every four should be “good”.
| Metric | Good | Poor | Likely trigger on a bag or luggage page |
|---|---|---|---|
| LCP, loading | 2.5 s or less | over 4 s | The first product shot, or a video poster at the top |
| INP, responsiveness | 200 ms or less | over 500 ms | Colour switches, typing initials, opening zoom or video |
| CLS, visual stability | 0.1 or less | over 0.25 | Size checkers, review stars, delivery and payment notes |
PageSpeed Insights and Search Console report these from the Chrome UX Report, which is real-visit data. Lighthouse is a lab test of one simulated load. It cannot measure INP and shows Total Blocking Time in its place.
What I measured on UK bag and luggage product pages (October 2026)
On 23 October 2026 I tested five UK bag and luggage product pages with PageSpeed Insights. Each ran once in mobile mode, which emulates a mid-range phone on slow 4G.
| Page | Performance score | Lab LCP | Total Blocking Time | Lab CLS |
|---|---|---|---|---|
| Retailer A | 41 | 5.0 s | 1,960 ms | 0.008 |
| Retailer B | 44 | 15.9 s | 200 ms | 0.231 |
| Retailer C | 11 | 13.2 s | 1,760 ms | 0.402 |
| Retailer D | 27 | 6.3 s | 1,460 ms | 0.186 |
For the four pages that loaded, the median score was 34, the median lab LCP 9.8 s and the median blocking time 1,610 ms. Layout shift is the clearest problem. Lighthouse flagged layout shift culprits and forced reflow on all four, and three had a lab CLS above 0.1. Retailer C reached 0.402, well past the 0.25 “poor” line, which looks like the widgets-in-sequence pattern described further down.
None of these luggage pages had Chrome UX Report data for its own URL. All four showed whole-site (origin) data instead, and two of those sites passed Core Web Vitals. Keep in mind that throttled lab tests run far slower than most real visits, and Google does not judge pages on lab LCP. Four pages is a small sample rather than a ranking. A fifth URL returned a 404 when tested and is not included.
The first product shot
The largest element on a bag product page will typically be the first gallery image. Across the web in 2024, the Web Almanac found the LCP element was an image on 73.3% of mobile pages and 83.3% of desktop pages.
Google’s guide to optimising LCP splits LCP into four parts: server response, the delay before the image starts to load, the download itself and the delay before it is drawn. The two delays should be close to zero. Some zoom galleries break that, because they load images through data-src attributes or inject them with JavaScript. The browser cannot find those images until the script runs. The same Almanac chapter found 35% of mobile LCP elements were not discoverable in the initial HTML.
- Put the first shot in the HTML as an
<img>withsrcandsrcset. - If the gallery must reference it from CSS or script, preload it with
<link rel="preload" fetchpriority="high" as="image">. - Keep the high-resolution zoom file separate and load it only when the buyer taps to zoom.
Cut-out product shots are common in this trade, and they are sometimes saved as PNG to keep a transparent background. PNG files of large photos are heavy. On desktop in 2024, PNG was the format of 26% of LCP images, against 7% for WebP and 0.3% for AVIF. A WebP or AVIF file on a plain background can usually do the same job in a much smaller file.
Walkthrough videos
A short video of someone packing the bag answers a lot of questions. It also adds weight.
When a video is the LCP element, the time is taken from its poster image or its first frame, whichever is earlier. If the video sits at the top of the page, treat the poster as the hero image: small, in the HTML and high priority.
Further down the gallery, a video should cost almost nothing until the buyer asks for it:
- set
preload="none"and show a poster; - load any third-party player only after the play tap, using a still image with a play button until then;
- reserve the player’s space with an
aspect-ratio, so the page does not jump when it loads.
The play tap is an interaction that INP measures, so show a loading state immediately and let the video start when it can.
Typing initials, switching colours, comparing sizes
INP counts key presses as well as taps and clicks. That matters to any shop selling personalised bags. Suppose every letter typed into a monogram box redraws a large canvas or requests a new image from the server. The box then feels slow, and each key press is recorded as a slow interaction.
Google’s INP article divides an interaction into input delay, processing time and presentation delay, and usually reports the slowest one of the visit. In 2024, 74% of sites had good INP on mobile against 97% on desktop, so test personalisers on a phone.
- Show the typed initials straight away as HTML text over the product image. Render the final preview once typing pauses.
- Load the monogram typeface when the buyer focuses the field, not after the first letter.
- On a colour switch, keep the current image visible until the next one has loaded, and load it on intent rather than for every colour up front.
- Keep size comparison tables as plain HTML. Duplicating them in hidden mobile and desktop versions makes the page larger, and the INP article lists large DOM sizes among the causes of slow responses.
For luggage shown in 3D, load the viewer only on request; I cover this in how a 3D product configurator is built.
Size checkers, review stars and delivery notes
Google’s CLS guidance names images without dimensions, web fonts, resizing third-party widgets, content inserted above existing content and late-loading content as causes of layout shift. On luggage pages the late arrivals can include an airline size checker, review stars under the title, a delivery estimate and a payment message near the price.
CLS groups shifts that happen less than a second apart into one window, up to five seconds long, and reports the worst window. A string of widgets arriving one after another can therefore add up into a single large score.
- Reserve space for each widget at its final height.
- Give each gallery image
widthandheight, or anaspect-ratio. In 2024, 66% of mobile pages had at least one image without dimensions, with a median of two. - Let accordions such as “specifications” or “care” open on tap. Shifts within half a second of a tap or key press do not count.
A performance check for a bag and luggage site
- In Search Console’s Core Web Vitals report, see which URL groups fail on mobile, and which metric fails.
- Run a product page with a video and a luggage range page through PageSpeed Insights. Read the real-visit figures first.
- Check what is named as the LCP element, and whether it is in the initial HTML.
- Look at the size and format of the first product image. If it is a large PNG, try WebP or AVIF.
- On a phone, type a set of initials into the monogram box and switch colours several times.
- Watch the page load on mobile data and note each element that pushes content down.
- Check that the zoom file, the video and any 3D model only download when the buyer asks for them.
Most of this work keeps the page looking the same while it loads faster. If you would like it done for you, see Core Web Vitals, or WooCommerce speed, caching and scripts for WooCommerce stores. The bag and luggage configurator demos show personalisation in practice. The series continues with selling bags and luggage online and bag and luggage SEO.
Sources
- web.dev guidance, checked October 2026: Web Vitals, LCP, Optimise LCP, INP, CLS.
- HTTP Archive, Web Almanac 2024, Performance, published November 2024. These figures describe the web as a whole in mid-2024 (CrUX and lab data), not bag or luggage sites.
- My own tests: PageSpeed Insights, 5 UK product pages per industry, 23 October 2026 (the bag and luggage results in the table above).