Ecommerce CRO checklist: rules 1-5, speed and basic usability

This is week 1 of the series 194 CRO rules for ecommerce. Every week we take five criteria from the 2026 ecommerce CRO checklist by Flag Agency, the PrestaShop web agency based in Frattamaggiore (Naples, Italy), and show you how to check them and how to actually fix them on your shop.

We start with the General page: the rules that apply to the whole site, not to a single template. They are the foundations. If your shop is slow or awkward to tap with a thumb, you can write the best product descriptions in the world and the cart will still stay empty.

This week: rules 1-5 of 194.

1. Keep Core Web Vitals within the limits (using field data, not just Lighthouse)

What to check. Google’s three user-experience metrics, measured on mobile and on real user data (Search Console → Core Web Vitals report, or CrUX), not only with a lab test:

• LCP ≤ 2.5 seconds — how long the main element takes to appear (usually the big image or the heading).
• INP ≤ 200 milliseconds — how fast the page reacts when someone taps or clicks.
• CLS ≤ 0.1 — how much the content jumps around while loading.

This rule replaces the old “the page must load in 5 seconds” criterion. What matters today is what the visitor sees and when they can act.

Why it affects sales. People who wait, leave. And people who tap “Add to cart” and see nothing happen tap again, get annoyed and close the tab. LCP loses visits before they start; INP loses them exactly at the buying moment.

How to do it in PrestaShop.

• Connect your domain to Search Console and read the Core Web Vitals report on mobile. Lighthouse gives you a hint, field data tells you the truth.
• Start with the server: slow hosting, high TTFB and no cache mean a broken LCP whatever you do next. If you’re unsure, read how to choose the right PrestaShop server or look at our PrestaShop hosting.
• In the back office, Advanced Parameters → Performance: enable Smarty cache, “never recompile” template compilation, and the minification and combination of CSS and JavaScript. Then test again: older themes and modules sometimes break, so check page by page.
• The theme weighs more than anything else. If yours is full of sliders, carousels and hand-loaded fonts, no setting will save it: consider a theme built light, like Flag Theme for PrestaShop 9.

Common mistake. Celebrating a 95 in Lighthouse on a desktop with fibre while the mobile report in Search Console is all orange. The lab test finds causes; it doesn’t declare victory.

2. Optimise your images (but never lazy-load the main one)

What to check. Three things, in this order:

• Format: WebP or AVIF instead of JPEG and PNG.
• Responsive sizes: the srcset attribute, so a phone downloads the small version, not the 2000 px one.
• Lazy loading only for images below the fold. Never on the main image of the page: that one defines the LCP, and delaying it makes the score worse, not better.

Why it affects sales. On an ecommerce site, images are most of the weight of a product page. The lighter they are, the sooner the customer sees the product. And a customer who sees the product starts evaluating it.

How to do it in PrestaShop.

• Upload originals already cropped to a sensible size: PrestaShop generates thumbnails, it doesn’t work miracles on an 8 MB file.
• Every time you change image formats you must regenerate thumbnails (Design → Image Settings). On large catalogues this times out: there is a module that regenerates them in small batches.
• Check that <img> tags in your theme have width and height. Without them the layout jumps and CLS gets worse.
• Use the browser inspector to confirm the main product photo does not have loading="lazy".

Common mistake. Installing an “image optimiser” module, switching lazy loading on site-wide, and making the product page LCP worse. Faster on paper, slower where it counts.

3. Keep third-party scripts under control

What to check. The list of everything your site loads that you didn’t write: ad pixels, chat widgets, review widgets, maps, social feeds, modules installed and never removed. For each one you need three answers: do we need it?, on every page?, can it load later?

Why it affects sales. Every extra script keeps the browser busy and slows down the response to taps, which is INP. Your customer doesn’t think “JavaScript conflict”. They think “this site doesn’t work”.

How to do it in PrestaShop.

• Open Modules in the back office and uninstall (not just disable) anything you haven’t used in months. A disabled module often leaves files and hooks behind.
• Load pixels after cookie consent: in Europe this is a legal obligation, and as a side effect it removes weight for visitors who refuse. To be clear: consent is about the law, not a speed trick.
• Limit scripts to the pages that need them: chat on product and cart, the map only on the contact page. In PrestaShop this usually means a condition in the theme template or a custom module.
• Measure again after every clean-up. Without measuring it’s faith, not optimisation.

Common mistake. Keeping two analytics tools that do the same job “just in case”, plus three pixels from campaigns that ended two years ago.

4. Make only clickable things look clickable

What to check. Buttons and links must announce themselves: recognisable shape, contrasting colour, a hover state on desktop and a visible focus state for keyboard users. The opposite matters too: a badge, a coloured box or a decorative icon should not look like a button.

Why it affects sales. If the customer has to guess where to click, you’ve added a mental step to every screen. And if they tap something three times that isn’t a button, they decide the site is broken.

How to do it in PrestaShop.

• Use one style for your primary button (“Add to cart”, “Proceed to checkout”) and keep it identical everywhere.
• Never remove the focus outline in your theme CSS: keyboard users need it and it’s an accessibility criterion. To see where you stand, start with a free accessibility audit.
• In category filters, make sure the whole label is clickable, not just the tiny checkbox.
• Run a quick test out loud with someone who doesn’t know the site: “show me where you’d click to buy”.

Common mistake. The ghost button: light grey text on white, no border, because “it looks cleaner”. Clean and invisible.

5. Give thumbs room: tap targets of at least 44×44 px

What to check. Every interactive element — buttons, links, size and colour selectors, fields, the quantity “+”, the close X — needs a tappable area of at least 44×44 px, with enough space around it so you don’t hit its neighbour.

Why it affects sales. Thumbs are wide and the phone is the main channel. A size selector that’s too small gets mis-tapped: the customer orders the wrong size (or gives up) and you get a return.

How to do it in PrestaShop.

• Test the site on your own phone, standing up, one-handed. It’s the most honest test there is.
• In the theme, increase padding and min-height on buttons instead of only enlarging the text, and space out the mobile menu items.
• Watch attribute selectors, pagination and filters: that’s where stock themes make the smallest targets.
• If you need to touch the template without breaking updates, ask for PrestaShop support or start from a theme built mobile-first.

Common mistake. Shrinking everything to “fit the product above the fold”. One extra scroll beats one wrong tap.

In short

• Rule 1 — Core Web Vitals on mobile field data: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
• Rule 2 — Images in WebP/AVIF, srcset, lazy loading below the fold but never on the main image.
• Rule 3 — Third-party scripts only where needed, deferred or loaded after consent.
• Rule 4 — Buttons and links that look clickable (colour, shape, hover, focus); no fake buttons.
• Rule 5 — Tap targets of at least 44×44 px, with space between elements.

Next week we continue with the General page. In the meantime, you can review the basics with 6 tips to increase your ecommerce conversions.