Case Study: How we doubled Officeworks website performance

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!

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.

Online Retail Industry grows at very high speed.

Consider the following numbers:

• 85% of all population has internet access. Webalive
• $37.8b online shopping landscape. Roy Morgan Research
• 18,7% growth in online sales in 2017. Australian Post

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.

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.

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.

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?

Pages we have measured:

• Officeworks homepage
• Search “iPad”
• PDP
• Category
• Sub Category

Initial load

Find out how we can put solutions like these to work for you.