JOULES CASE STUDY

Joules is a business that operates both through physical store locations and with an online shop. They specialise in clothing, footwear and accessories as well as homewares. The company strives to deliver the best experience for their customers, but to be able to do this their website’s performance needs to be kept at its peak. (according to a study conducted by Google, the time it takes to load a page is the most important factor in UX hierarchy).

THE CHALLENGE


Our team was brought in to identify and address weak spots in the web site’s codebase that made page load time greater than preferred. Metrics used to monitor initial and improving performance were provided by Lighthouse – a performance audit tool from Google. 

The team decided to focus on improving 5 metrics that according to Google have or will have a significant impact on Algorithm rankings in 2021:

Joules desktop 2

First Contentful Paint


The amount of time that has passed before the first text or image becomes visible to the user.

Time to Interactive (TTI)


The amount of time it takes for the page to become fully interactive.

Largest Contentful Paint


The amount of time that has passed before the largest text or image becomes visible to the user.

Cumulative Layout Shift (CLS)


How much a user is impacted by the website visually changing when loading.

First Input Delay


The amount of time it takes for the website to respond to the users first click.

Joules mobile screenshot

IMPROVEMENT STRATEGY


Page areas with the potential for improvement, with the highest impact (on aforementioned metrics) to effort ratio, were:

  • Weight of the stylesheets (CSS) and script (JS) files,
  • Image-heavy pages,
  • Interface elements shifting as the site loads
  • Size of the document itself.

THE SOLUTION


The optimisation of delivering styles and scripts to the clients was twofold. Firstly, it consisted of removing unused rules (CSS) and code (JS) that remained as a result of continuous development and from changes made within the storefront. The tool chosen for this purpose was the CSS file processor – PurgeCSS, whose task it is to remove styling rules no longer used on the page while compiling the source files. This tool, as a point of reference, took page structure files and scripts inside which classes could be used.

Despite the rather non-standard structure of the project, this tool had no problems with interpreting any type of file used. To further reduce the number of styles sent to the customer the second step in the optimisation process was put in place – the division of one big stylesheet for all the pages that were developed so far into several smaller ones, loaded depending on the customer’s location in the store.

Joules mobile shot
Joules desktop

UX ISSUES


Another place with substantial UX problems was the product listing page. The majority of it was rendered using React which means that until all the data is in place and all scripts are executed, it’s a blank page with nothing besides main navigation and footer right below it.

Once the product list is rendered it shifts the rest of the page’s content which results not only in the client’s confusion but also drastically lowers the CLS score. To reduce the movement of interface elements, the team decided to use a popular Single Page Applications technique called skeleton elements.

IMAGE OVERLOAD


The product listing page faced another problem. It was rich in images, most of which weren’t visible on the user’s device (both desktop and mobile) on initial page load – they were outside the viewport. Unfortunately, that didn’t stop the browser from downloading them. This resulted in unnecessary traffic and lowered TTI score. To mitigate this problem lazy loading of images was introduced. Only images that are in the viewport at that exact moment are downloaded. Apart from that, images that were displayed to the user only on the desktop were no longer downloaded to mobile devices.

DOM DOM DOOOMM


Last but not least, the final improvement involved reducing the size of the DOM (the basis of a web page), which would, apart from the increasing the rendering speed of elements on the page, decrease the amount of data downloaded by the user’s device. In this case, the culprit turned out to be the menu, which was quite a large part of the entire DOM. Changes in its structure made it possible to reduce the number of its nodes (DOM elements) by 50%.

RESULTS


29%

Faster page load time on average.

80%

Reduction in CLS.

50%

Reduction on mobile download size.

25%

Reduction in size of downloaded JS.

26%

Faster for users to interact with.

TELL US ABOUT YOUR NEXT PROJECT

LET'S CHAT

MAGENTO

Our expert team will help you with everything Magento.

More on Magento

CX

Speak to our Experience team on maximising your ROI.

More on Experience

AR

See how AR can enhance your customer experience and conversions.

More on AR