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: 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. 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. 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 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 PREV NEXT Privacy Policy | Terms & Conditions | Glossary This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply. © 2021 Eclipse. All rights reserved We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Cookie Settings Accept All