Case Study: How we doubled Officeworks website performance

Industry: Retail, eCommerce
Summary: In such a complex and fast-paced industry more and more consumers choose to do their shopping online. Hence, the website is the primary sales tool for companies these days due to the growing competitiveness of the eCommerce landscape. Officeworks is the largest supplier of office products in Australia; to be a leader in its segment it has to implement up-to-date solutions on a daily basis.

With Officeworks being one of the largest online retailers in Australia, traffic to our online store is constantly increasing. Overall site performance and page load times are therefore incredibly important to our success. A Google Speed Report revealed that one of the major contributors hurting end-user-experience was the size of images on our website.

The team at Pixboost did a fantastic job of implementing their image optimisation service on our site, even going as far as building a custom HTML Snippet Generator for our content editors so that they could easily add responsive images anywhere on the website, optimising them for various user’s devices and screen sizes.

By integrating Pixboost we have achieved great results, such as website time to first render improved by 34%, website page weight decreased by 68%, and image data optimised by 52%. The service continues to run smoothly, helping us to boost the performance of our site and makes the process of managing and preparing images for the web so much easier

Daniel Gladki
Head of eCommerce, Officeworks

The Customer

Officeworks is one of the largest online retailers in Australia with more than 40000 products presented on the website, and with more than 200000 images or these products and other digital media and services it provides. Their images broadband is 5Tb.
Luckily we got a chance to work on this fantastic client as a SaaS and Consulting services provider improving image management, image performance and overall performance of the website. Because the Officeworks website is acknowledged to be one of the best eCommerce sites in Australia, its improvement was quite a challenge by itself.
Let’s get into exciting details!

Challenges

Bulk optimisation of images. 40000+ products with 200000+ images that are impossible to optimise and manage manually. It would take much time and effort to optimise this amount of image data using essential tools like Photoshop, Gimp or similar. So, the first task was to automate this process.
Proper sizing and image responsiveness integration. The backend Product Information Management System has sizing limitations and were not able to produce images in the right sizes to fulfil the needs of proper image sizing across all devices and all browsers. Therefore, our second task was to implement image scaling on top of this system to solve the responsiveness problem.
Integration into various content sources. Officeworks as a large retailer has an extensive IT infrastructure. As a result, it requires more than one source of content. Some of them are an eCommerce platform, CMS, PIM, single page apps and a few more. So, they needed several custom solutions for different parts of the application. Moreover, it was hard to estimate the costs due to such diverse infrastructure; therefore we had to come up with a tool that can calculate the service costs for Officeworks.
Image performance testing and monitoring. When something is being done manually, there is always a place for a mistake as we all are only human. Especially difficult to search for errors when you have that much of image data. The processes of website performance testing and monitor needed the implementation.

Market Insights

Online Retail Industry grows at very high speed.
Consider the following numbers:
On the other hand, the competition gets stronger every day. With such prominent players as Gumtree, eBay or a new but strong player Amazon on the market it is getting harder to attract customers. So, to win the competition it is more important than ever to work on technological improvements such as website user experience, page load time, SEO, design.
Every additional second of load time for a page increase its bounce rate by 7%. Neil Patel.
The weight of image content on a web page of online store gravitates on average towards 90% to the whole page weight these days. This is happening because online stores sell through showing images to the consumers. Therefore, image data is the most important for such websites but at the same time, the most resource consuming.
Here is where Pixboost comes into play, with its ability to solve all the website image processing challenges.
  • Real-time Image processing: smart optimisation, responsive images support, lazy loading, HTTP/2 support, WebP support.
  • Fast and efficient Image CDN that delivers images globally at a high speed
  • Expert knowledge in enterprise systems development and scaling
So, to solve all image optimisation problems on a website means to resolve a significant performance challenge.

Solutions

Apart from Pixboost SaaS integration we have created a few custom-made solutions and provided training services for Officeworks employees. So, the solutions created and the services provided are:
Pixboost integration. Through the integration of Pixboost we have improved the overall performance of Officeworks website by:
  • decreasing the page load time,
  • reducing the images sizes,
  • providing responsiveness support,
  • providing CDN delivery of images,
  • providing advanced features Http/2, Lazy Loading, WebP that increased the speed of the website even more.
Developed a solution architecture to integrate Pixboost Image Processing Platform with different modules of a website (CMS, PIM, single page apps). Moreover, we automated image optimisation and scaling process without the need of manual labour or third-party graphics editors (Photoshop, Lightroom or similar).
IBM WebSphere Commerce integration. Provided a proper Pixboost integration using the URL API.
Cost Estimator.We developed and successfully implemented a custom-made solution which analyses log files to calculate the daily volume of images traffic for Officeworks. This approach let us forecast the future cost of the service for the website of that size.
Snippet Generator and Educational Sessions.Created a custom-made application for the marketing department to automate the image preparation for Officeworks website. They do not need to write HTML/CSS to insert images on the site which is very time-consuming for non-tech employees. We also provided training sessions for Marketing and eCommerce departments on how to use Snippet Generator and how fast images impact website performance. Download optimization guide.
Please note, Cost Estimator and Consulting Services are available on request.
Sign up

Results

This case study is entirely devoted to the results we were able to achieve for Officeworks online store. So, here they are:
  • More than 200000 images optimised.
  • Highly effective on 5Tb broadband.
  • Overall website images' load time improvement tripled.
  • Overall website images' weights decreased by 68%.
  • All website image data optimised by 34%.
  • Optimized landing pages by not loading offscreen images.
  • Found and fixed the broken images (500+ products)
  • Reduced labour costs by automating the image preparation for non-tech employees.
  • Reduced cost of using Photoshop or similar applications.
  • Reduced cost of running the original solution.
  • Integration into IBM WebCommerce, CMS, PIM, single page apps and a few more.
  • Provided custom-made apps Cost Estimator and Snippet Generator.
  • Improved the process of website performance monitoring and images quality testing.
More to come. Considering such a tremendous website performance improvement, we are expecting to see improvements in Google ranking and overall customer satisfaction which we add to this study when we get these stats.

Stats

Performance testing and measurements before and after integrating Pixboost on the website was an essential part of our work on this client as research and analysis are best ways to tell were we successful or not.
What can be more impressive than numbers, right?

Initial load

The number of images on the initial load before and after. By integrating lazy loading we were able to reduce the number of images that improved performance.

Image size

The overall size of the images before and after. By using the correct size of images and next-gen format, like WebP we were able to reduce the size of the images dramatically.

Page load

Load time before and load time after. Combining fewer images with smaller size and CDN, we reduced the time of images loading.
Find out how we can put solutions like these to work for you.