Find Your Actual LCP Element Before You Optimize Anything
A clear order confirmation email answers the questions buyers ask support most often: what was bought, what it cost, when it ships, and how to track it. Getting those details right cuts ticket volume in the busiest week of the order cycle.
A clear order confirmation email answers the questions buyers ask support most often: what was bought, what it cost, when it ships, and how to track it. Getting those details right cuts ticket volume in the busiest week of the order cycle.
This guide walks through order confirmation emails in plain steps, with the trade offs stated honestly and a short list of checks you can run yourself. Nothing here needs special equipment or a professional call out to get started, and each section ends with the decision that actually matters.
Address validation checks a typed address against postal data as the shopper types, then suggests the corrected version. Used well it cuts failed deliveries and reshipping costs. Used badly it rejects valid rural, military, and new build addresses, so always let the shopper keep their original entry.
A good checkout error names the exact field, says what went wrong in plain words, and tells the shopper the one action that fixes it. Errors should appear next to the field, keep everything the shopper already typed, and never blame the shopper for a formatting difference the store could handle itself.
Neither format wins on its own. Drawers suit small baskets and single product stores because they keep the shopper on the page they were browsing. Full cart pages suit larger baskets, discount codes, and gift options, where shoppers want room to review before paying. Pick based on how your shoppers actually edit a basket, not on what looks modern.
Export the last ninety days of returns and group them by reason code first, product second. A sizing problem on one product, a quality complaint spread across a category, and a wave of arrived late codes are three different fixes with three different owners. Do it now, while there is still time to change a size chart, a product photo, or a carrier promise before peak volume multiplies whatever is already wrong.
Put the balance checker above everything else on the gift card page, ahead of the buy buttons and ahead of the terms. The majority of gift card page visits after a holiday are recipients, not purchasers, and a recipient who cannot find the balance tool in ten seconds becomes a support ticket or a live chat that costs more than the margin left on the card. Selling cards is the second job of that page. The first job is the balance.
Open one product page, one collection page, and your homepage in a field data tool or in Chrome DevTools Performance panel, and write down the exact element reported as LCP for each: the hero image, a headline block, a product image, a banner. Until that element is named, speed advice is guesswork, and stores routinely spend a sprint compressing images that render after the LCP element and move the metric by nothing. The metric has a culprit. Find it per template, because it is rarely the same element on every page type.
Why generic speed checklists waste the sprint
Compress images, minify CSS, remove apps. The list is not wrong, it is just unordered, and order is the whole game when the team has a week. If the LCP element on your product template is the product title block waiting on a web font, image compression does nothing for the number anyone is watching. If it is a hero image served at twice its display size, font work does nothing. One afternoon of measurement replaces a quarter of arguing about which fix matters.
There is a second trap: lab data from a fast test machine hides the element that hurts on a mid range phone over a real connection. Check the field data split by device when you can, and test throttled. The LCP element can differ between desktop and mobile on the same template, especially where a mobile banner or a sticky header pushes the real content down.
The usual culprits, template by template
On product pages the LCP element is most often the main product image, and the fixable problems are boring: the image is lazy loaded when it should be prioritized, it is served larger than any screen shows it, or a slider makes the browser fetch three images before painting one. On collection pages it is frequently the first row of product images delayed by a banner above them. On homepages, a video hero or a headline waiting on a font swap takes the blame more often than owners expect.
None of that is a diagnosis for your store. It is a list of suspects. The point of naming the element is that each suspect has a different fix, a different owner, and a different cost, and two of the three are usually a settings change rather than a rebuild.
What to do once you have the name
Change one thing about that element: its size, its load priority, or whatever blocks it from painting. Then remeasure the same template before touching anything else. Speed work fails in a specific way, which is five changes shipped together, a small improvement nobody can attribute, and no idea what to do next quarter. One element, one change, one measurement is slower theater and faster progress.
Write the result down where the next person will find it: template, element, change, before and after at p75. The p75 part matters. Averages flatter speed the way blended conversion rate flatters a store. Most of your visitors on bad connections live in the tail you averaged away.
When to stop
Under roughly three seconds at p75 on mobile, LCP stops being the loudest problem on most stores, and the next hour is better spent on the checkout or on the product page content itself. Speed is a floor, not a dial to polish forever. The stores that keep tuning past the floor are usually avoiding a harder argument about offer or traffic quality, and the metric gives them something measurable to hide behind. Name your element, fix it to the floor, and go do the harder thing.
Keep reading: How Edge Personalization Works Without Slowing the Storefront Down, Edge Observability: Seeing Storefront Errors Where They Actually Happen, and Image and Font Delivery at the Edge: The Quiet Speed Win cover the nearby cases in this series.
Frequently asked questions
What is an LCP element?
It is the single largest piece of content the browser paints in the viewport: an image, a video frame, or a block of text. Largest contentful paint measures how long that specific element takes to appear.
Why does the LCP element differ between page types?
Each template leads with different content. A product page leads with the product image, a homepage may lead with a hero or a headline, so the element and its fix differ per template.
Should the main product image be lazy loaded?
No. Lazy loading the image that is the LCP element delays the very thing the metric measures. Prioritize the first product image and lazy load the gallery images below it.
When is LCP good enough to stop working on?
When mobile p75 sits comfortably under about three seconds and holds there, further tuning returns little. At that point checkout friction and traffic quality usually cost more revenue than the remaining milliseconds.