All Case Studies
McCormick Sitecore JSS engagement at a glance
The main facts about this engagement as recorded by Dcrayon.
| Item | Detail |
|---|---|
| Client | McCormick & Company, spices and flavourings |
| Our scope | Front-end management and page speed work on a Sitecore JSS site |
| Platform | Sitecore JSS front end, Shopify checkout, tag manager |
Challenge
McCormick & Company is a global spice and flavour business. Dcrayon managed the front end of a Sitecore JSS website for McCormick and worked on how quickly its pages loaded.
A headless Sitecore site with a Shopify checkout
Sitecore JSS (JavaScript Services) is Sitecore's framework for building a website's front end in a JavaScript framework while editors keep working in the Sitecore content management system. It suits component-based, headless sites, where the content system and the pages that display it are separate, but it moves more of the page-loading work into the visitor's browser, so the order in which scripts and files load matters a great deal. The site we worked on carried recipe and product pages, and its checkout ran on Shopify. Our scope was ongoing front-end management of the JSS application and a focused piece of performance work.
Pages loaded slowly, particularly on mobile
Dcrayon's audit found the site scoring poorly in Google PageSpeed Insights on both desktop and mobile. On recipe and product pages, slow loading delays the content a visitor came for and weighs on how search engines assess the page.
Third-party scripts competed with the site's own code
Analytics, marketing pixels and product recommendation widgets loaded early and held up the browser's main thread while the JSS components were starting, and many files loaded one after another rather than in parallel.
Two sets of assets had to share one experience
The Shopify checkout brought its own scripts and files into the Sitecore experience, and there was no performance governance in place to stop each release adding weight.
Solution
Script order across the JSS component library
We audited the page templates to find render-blocking JavaScript, then changed the JSS component library so that scripts a page does not need for its first view load asynchronously or after the main content.
Governing third-party tags through a prioritised queue
Third-party scripts for analytics, pixels and recommendations were moved into a tag manager queue with loading priorities, so the scripts a page needs first are not held up by the ones that can wait. Putting every third-party script behind one queue also gives the site a single place to decide what loads and when.
Lighter images, first-screen CSS and checkout files
Images moved to WebP, a smaller modern format, with lazy loading for anything below the first screen, and the CSS needed to draw the first screen was inlined so the page could render without waiting for full stylesheets. On the Shopify side we combined redundant asset requests, reduced bundle sizes and turned on edge caching for static files, which serves them from a location close to the visitor. This is the kind of work our technical SEO team carries out alongside development.
Who loads what on McCormick's Sitecore JSS pages
The parts of the site involved in loading a page, and the role each plays after the work.
| Application part | What it does in this project |
|---|---|
| Sitecore content management | Holds the recipe and product content editors maintain |
| JSS component library | Renders pages; non-essential scripts now load after the main content |
| Tag manager queue | Loads analytics, pixels and widgets in priority order |
| Shopify checkout | Handles the cart, with combined requests and smaller bundles |
| Edge cache | Serves the checkout's static files from close to the visitor |
Results
What changed on McCormick's front end
The front end now loads non-essential scripts after the main content, runs third-party tags through a prioritised queue, serves WebP images with lazy loading, and inlines the CSS for the first screen. The checkout's static files are cached at the edge and its bundles are smaller. This page describes Dcrayon's own work and is not an endorsement by McCormick & Company.
McCormick front-end changes delivered
The changes made to the site front end and checkout.
| Outcome | What changed | Status |
|---|---|---|
| Script loading | Non-essential JSS scripts loaded asynchronously or deferred | Delivered |
| Third-party tags | Moved to a prioritised tag manager queue | Delivered |
| Images | WebP format with lazy loading below the first screen | Delivered |
| CSS | First-screen CSS inlined | Delivered |
| Checkout assets | Requests combined, bundles reduced, edge caching for static files | Delivered |
Key takeaways
Speed on headless platforms comes down to loading order
Headless platforms give editors and developers flexibility, but they move work into the visitor's browser, so speed depends on the order in which scripts and assets load. On a large brand site, governing third-party tags often matters as much as the site's own code. Our guide to Sitecore CMS features explains the platform, and our article on improving website loading speed covers the techniques used here.
If your Sitecore or headless site has slowed down over time, ask us to review it.
CategoryWeb Development
More work
