——— Page Speed Optimisation
Buy Brand Tools
Buy Brand Tools supply quality brand tools to professional users at low prices. The company has had a strong position in the tool market since 2002, supplying tools for a range of sectors including tiling, scaffolding and surveying. They offer speedy delivery, and hassle-free returns and have a dedicated support team to ensure that their customers are satisfied.
Background & Brief
Buy Brand Tools has been a client of ours for many years on our Sellerdeck Desktop platform. After noticing issues in their page speed load time, they approached us for support.
Slow load times can significantly impact user experience SEO, Google rankings, safe browsing and much more. Learn more about the importance of Core Web Vitals and why page speed optimisation is key in this article.
Results and Achievements
We increased the desktop page speed score by around 15% on average and mobile by around 20-25%.
We also considerably reduced page weight, reducing page load times by up to 50%. This significantly benefits mobile users and those operating on lower bandwidths.
“Our business has grown massively over the years, and Sellerdeck has been a big part of supporting that growth. I feel that Sellerdeck are a small-medium size company like ourselves and understands the importance of good customer service, which we wouldn’t get with a big corporation.”
The Finer Details – How did we achieve significant page speed improvements?
‘Library’ .min.js and .min.css files were created to bundle most JavaScript and CSS files into single minified files.
Minification reduces the overall amount of data that needs to be transferred and bundling the files means fewer requests need to be made in order to retrieve the data. This results in a reduction of Total Blocking Time (TBT) when rendering the page. Certain third party software cannot be bundled and must be included as a separate file.
Cumulative Layout Shift is caused by resources being loaded after initial page load and causes content to move around on the page to accommodate the new content being loaded in. This results in a very poor and frustrating user experience.
Vital components for initial page load were preloaded and space was reserved in the DOM for content that is loaded in later so that it doesn’t cause other content to move in order to make space on the page.
The serving of WebP images can greatly reduce the weight of a webpage especially when combined with the Sellerdeck Image Compression tool, which provides a high level of compression for images while maintaining image quality. Using compressed WebP’s and serving these images at the correct size means that end users won’t need to download unnecessarily large images. This is of particular benefit to mobile users who have limited bandwidth / data.
Due to the large amount of images on the Buy Brand Tools website this was an area of great benefit. The was the inclusion of fallback images for older browsers so as not to alienate or discourage customers using older technology.
For pages with embedded video, instead of using the default YouTube embed, which adds a large amount of resources to a page irrespective of whether a user plays the video or not, static placeholders were used showing just the video still image, meaning only a small data request is made in order to display the placeholder image. The addition of lazy load to this means that no requests will be made at all if it is rendered outside of the viewport. The embedded video loads only if requested by the user.
This will save around 2.5MB per embedded video.
Lazy loading any ‘below the fold’ (i.e. not visible in the viewport on initial page load) assets / scripts was implemented to reduce initial page load time.
The Buy Brand Tools site was previously using the ‘Add This’ script to provide social media links which adds to the Total Blocking Time of the site and was also injecting an additional unused scripts ‘moatframes.js’ into the site.
We removed ‘Add This’ in favour of direct social media links which require no additional scripts.