Adobe Commerce SEO audit: the issues built into Adobe Commerce — and how to fix them

Audit your XML sitemap and internal linking so that every product and category page is discoverable and crawlable by Google — not hidden behind JavaScript, pagination, or missing links.

1. 1Admin › Marketing › SEO & Search › Site Map: create or regenerate your sitemap. Set the path and filename (e.g., /pub/sitemap.xml) and configure the frequency and priority for products and categories.
2. 2Admin › Stores › Configuration › Catalog › XML Sitemap: set 'Include in Sitemap' to Yes for Products and Categories. Set a reasonable changefreq (e.g., Daily for products).
3. 3Admin › System › Configuration › General › Web › Search Engines Robots: ensure the robots.txt does not disallow /catalog/ or other product URL paths.
4. 4Admin › Catalog › Products: filter by 'Visibility = Not Visible Individually' — these products will not appear in search or category pages. Change to 'Catalog, Search' for products that should be indexed.
5. 5Check for flat catalog issues: Admin › Stores › Configuration › Catalog › Catalog › Storefront — if 'Use Flat Catalog Category' or 'Use Flat Catalog Product' causes sync issues, reindex via Admin › System › Index Management.
6. 6Submit the sitemap URL to Google Search Console and monitor the Indexed vs Submitted URL counts.

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://www.yourstore.com/sitemap-1-1.xml</loc>
    <lastmod>2024-06-01T00:00:00+00:00</lastmod>
  </sitemap>
</sitemapindex>

<!-- Individual product sitemap (sitemap-1-1.xml) -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.yourstore.com/blue-running-shoes.html</loc>
    <lastmod>2024-06-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

1. 1Images: In your theme's Magento_Catalog module override (app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/), open list.phtml and view.phtml. Add width and height attributes to every <img> tag. For the product image widget, set these in the image configuration: app/etc/view.xml under <images> → set width and height for each image ID.
2. 2view.xml: Open app/design/frontend/<Vendor>/<theme>/etc/view.xml and confirm every <image id='...'> entry has both <width> and <height> child elements. These values flow into Magento's image helper and automatically add the HTML attributes.
3. 3Cookie / consent notices: Adobe Commerce ships with no built-in cookie notice. Third-party cookie extension settings should be configured to display as a fixed bottom bar — check the extension's admin configuration under Stores → Configuration → [Extension Name].
4. 4Fonts: In your theme's web/css/source/_typography.less (or .scss equivalent), add font-display: swap to all @font-face rules. Run bin/magento setup:static-content:deploy after changes.
5. 5Page Builder / banners: In Content → Pages or Blocks, edit any Page Builder row containing a banner or slider. Set a fixed minimum height on the row (Advanced → Minimum Height) so the container does not collapse before images load.
6. 6Verify: Run bin/magento cache:flush, then test with PageSpeed Insights; target CLS < 0.1.

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <!-- Product page main image -->
            <image id="product_page_image_large" type="image">
                <width>800</width>
                <height>800</height>
            </image>
            <!-- Category listing thumbnail -->
            <image id="category_page_grid" type="small_image">
                <width>300</width>
                <height>300</height>
            </image>
            <!-- Cart item thumbnail -->
            <image id="cart_page_product_thumbnail" type="thumbnail">
                <width>100</width>
                <height>100</height>
            </image>
        </images>
    </media>
</view>

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

1. 1In the Admin panel, go to Stores → Configuration → Advanced → Developer → JavaScript Settings. Set 'Merge JavaScript Files' and 'Minify JavaScript Files' to 'Yes' to reduce the number and size of JS files.
2. 2Enable 'Move JS code to the bottom of the page' in the same JavaScript Settings section so scripts don't block early rendering.
3. 3Identify heavy RequireJS modules by running a Performance trace in Chrome DevTools. For custom modules, refactor event listener callbacks in your module's JS to yield using `setTimeout` or the browser's Scheduler API.
4. 4Audit third-party extensions: go to System → Extensions and disable or uninstall any extension that injects frontend scripts and is not actively used.
5. 5Use Varnish cache and a CDN (configured in Stores → Configuration → System → Full Page Cache) to ensure HTML is served fast, reducing total blocking time.
6. 6Deploy changes to staging, run PageSpeed Insights and the Chrome DevTools Performance panel, and verify INP is below 200 ms before promoting to production.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

1. 1IDENTIFY LCP IMAGE: Run PageSpeed Insights on your homepage and category pages. LCP is typically the hero banner image in the CMS page or a slider widget.
2. 2CONVERT TO WEBP: Install the Magento 2 module 'magento/module-webp' (available in Magento 2.4.x) or a third-party module such as 'Yireo_Webp2'. Enable it: Stores › Configuration › Advanced › Developer › Image Processing Settings. Alternatively, use a CDN with on-the-fly conversion (Cloudflare, Fastly).
3. 3PRELOAD: Edit your theme's default_head_blocks.xml (located in app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/). Add: <link rel='preload' as='image' href='{{media url="path/to/hero.webp"}}' fetchpriority='high'/>. Run bin/magento cache:clean after saving.
4. 4NO LAZY-LOAD ON HERO: In your theme's hero banner template (.phtml file), ensure the hero <img> tag has loading='eager' fetchpriority='high' and does NOT have loading='lazy'.
5. 5DEFER JS: In Magento Admin › Stores › Configuration › Advanced › Developer › JavaScript Settings: set 'Move JS code to the bottom of the page' to Yes. For more granular control use RequireJS bundles or a performance extension such as 'Hyvä' theme.
6. 6FULL PAGE CACHE + CDN: Enable Magento Full Page Cache (Stores › Configuration › Advanced › System › Full Page Cache) and connect a CDN (Fastly for Magento Commerce, or Cloudflare). This dramatically reduces TTFB which directly reduces LCP.
7. 7VERIFY: Run bin/magento cache:flush, then re-run PageSpeed Insights. Monitor Core Web Vitals in Google Search Console.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Preload LCP hero image -->
        <link
            rel="preload"
            src="{{media url='wysiwyg/hero-banner.webp'}}"
            as="image"
            fetchpriority="high"
            src_type="url"
        />
    </head>
</page>