Slashing mq.se carbon footprint with two thirds

MQ Marqet and Knowit Experience have a long-lasting partnership, where we manage and develop www.mq.se in Optimizely CMS with integrated third-party systems such as Voyado and Inriver PIM. Now, they tasked us to improve the sustainable tech aspects for mq.se.

To get a quick overview of the status we used tools to analyze what to improve through development, edits in the CMS, and hosting and servers. We used tools such as www.ecograder.com, www.websitecarbon.com, and Google Light House to analyze the homepage, product page, product listing page, and checkout. Furthermore, we optimized media, implemented lazy loading on images, reduced DOM complexity, and reviewed third-party scripts.

Improved user experience and lower CO2 emissions

All of these actions resulted in notable improvements, such as increased Ecograder score, lowered carbon footprint per page load, improved page load speeds, higher SEO score, and greater adherence to best practices. Not the least, we successfully reduced the CO2 emissions per page load by 68 percent within a month.

So, this is what we did to create results within a month:

• Optimizing Media: We compressed and resized images and other media files, this reduced the amount of data transferred over the internet and thereby lowered the energy consumption associated with data transmission, benefiting the environment.
• Lazy Loading on Images: We implemented lazy loading of images, which means that images are only loaded when they become visible to the user. This reduces the initial load time and saves energy by not preloading images that may not be viewed.
• Reducing DOM on Pages: Simplifying the Document Object Model (DOM) structure of web pages will lower resource consumption and can lead to faster loading times, as well as reducing the energy required for rendering web pages.
• Managing Third-Party Scripts: Minimizing or optimizing third-party scripts, such as analytics or ad trackers, can reduce the number of HTTP requests and page load times – which can lead to decreased server load and energy consumption.

Current status after one month?

• We lowered our carbon footprint emission per page load from 2.82 to 1.09 (grams of carbon dioxide)
• We increased or Ecograder score from 57 to 73
• We increased the performance score from 34 to 78 in Lighthouse
• We increased SEO score from 59 to 83 in Lighthouse
• We increased best practices score from 67 to 95 in Lighthouse
• We lowered our carbon footprint on Website Carbon Calculator from 78% to 66%

Further on we are aiming to develop the work and continue with:

Using WebP for Images

• Smaller Image Files: WebP is a modern image format that offers high image quality at smaller file sizes. This reduces the amount of data transferred over the internet and results in less energy consumption during data transmission. It also reduces page load times, improving the user experience.

Limiting Items in Carousels

• Improved Page Performance: Reducing the number of items in carousels simplifies the DOM structure and lower the complexity of the page. This results in faster page rendering and an improved user experience.
• Lower Data Transfer: Carousels with fewer items mean less content to load, reducing data transfer and associated energy use.

Caching Content

• Faster Page Load Times: Caching frequently accessed content reduces the need to repeatedly fetch the same data from the server, resulting in faster page load times.
• Improved User Experience: Faster load times enhance user experience, potentially increasing visitor retention, engagement, and revenue.

Reducing Server Requests

• Faster Page Load: Reducing the number of requests sent to the server can speed up page loading, enhancing user experience.
• Lower Server Load: Fewer server requests reduce the load on web servers, leading to decreased energy consumption in data centers.

While these measures can contribute to a more efficient and eco-friendlier website, it is important to note that a 50% reduction in carbon footprint typically involves a combination of efforts, both online and offline. It may also include changes in data center infrastructure, server efficiency, and the use of renewable energy sources to power servers and data centers.

Web developers can reduce their websites' environmental impact by minimizing HTTP requests, optimizing images, and using compression techniques. However, these steps are not enough. A holistic approach that considers the entire life cycle of the website, from design to hosting, is needed. As such, collaboration with data center providers that use renewable energy and green practices for a more sustainable and eco-friendly web will be important going forward.

Do you want to know how we can assist you?

Give us a call or send a message, and I will get in touch with you.