Insights

    Are You Making These Common Mistakes That Increase Your Website Carbon Emissions?

    12 September 2024

    Are You Making These Common Mistakes That Increase Your Website Carbon Emissions?'s Image

    When it comes to minimising our carbon footprint, most of us will think about such things as using the car less or using the recycling bin more frequently. However, you may not be aware that your website also plays a part in your carbon footprint. Surprisingly, websites can consume a significant amount of energy and therefore have a large carbon footprint if not well designed and managed. The good news is that by avoiding common mistakes and making small adjustments, you can decrease your website’s carbon footprint and help make the internet greener. Now, let’s look at the most frequent mistakes that contribute to high website carbon emissions and how to avoid them.

    Using Unoptimised Images and Videos

    Mistake: Full size images and videos are usually not optimised for web display and thus take longer to load and consume more data which leads to more carbon emissions.

    🔍 Example: For instance, a webpage with several large, high-resolution images such as those that are 5MB in size each will take a long time to load and will use more energy as data is transferred from the server to the user’s browser.

    💡 How to Solve It:

    • Compress Images: Use tools like TinyPNG or ImageOptim to compress images without sacrificing quality. Aim for image sizes under 500KB when possible.
    • Choose the Right Format: Use modern formats like WebP or AVIF, which provide better compression and quality compared to older formats like JPEG and PNG.
    • Implement Lazy Loading: Lazy loading defers the loading of images and videos until they are needed (i.e., when they come into the user’s view). This reduces initial page load time and data usage.

    By optimising images and videos, you can reduce your website’s carbon footprint while also enhancing user experience with faster load times.

    Neglecting Website Caching

    Mistake: Failing to implement proper caching strategies can cause your website to use more server resources and energy every time a user accesses your site.

    🔍 Example: A website that doesn't use browser caching will force users to download all site resources (images, CSS files, JavaScript, etc.) every time they visit, even if those resources haven't changed since their last visit. This increases data transfer and server load unnecessarily.


    💡 How to Solve It

    • Enable Browser Caching: Configure your server to allow browsers to store static resources locally, so they don’t have to be re-downloaded on every visit. This can be set through HTTP headers like Cache-Control and Expires.
    • Use a Content Delivery Network (CDN): A CDN caches your content on multiple servers around the world, reducing the distance data must travel and improving load times, which reduces energy consumption. Popular CDNs include Cloudflare, Akamai, and AWS CloudFront.

    By implementing caching strategies, you can reduce the number of server requests and the energy needed to deliver your website to users.

    Overusing JavaScript and Heavy Plugins

    Mistake: Excessive use of JavaScript libraries and heavy plugins can make your website slower and more resource-intensive, leading to higher carbon emissions.

    🔍 Example: Using multiple JavaScript frameworks (like jQuery, React, and Angular) or heavy plugins for functionalities that could be achieved with simpler solutions. This not only increases the file size of your pages but also requires more processing power on the client side.

    💡 How to Solve It:

    • Audit Your JavaScript: Regularly review your JavaScript to remove unnecessary libraries and plugins. Use lighter, more efficient code when possible. You can use platforms like Biosites to monitor your website's file sizes and carbon emissions.
    • Minimise Plugin Usage: Limit the number of plugins you use and disable or remove any that are not essential. Look for lightweight alternatives that perform the same function.
    • Defer Non-Essential Scripts: Use the defer or async attribute to load non-essential JavaScript after the main content has loaded, reducing initial load time and improving performance.

    Optimising JavaScript and minimising plugin usage can significantly reduce your website’s carbon emissions while enhancing overall performance.

    Failing to Optimise for Mobile Devices

    Mistake: Not optimising your website for mobile devices can lead to longer load times and increased data usage, especially since mobile connections often have higher latency and lower speeds compared to desktop connections.

    🔍 Example: A desktop-only website that serves the same large images and resources to mobile users will consume more data and energy, especially if the images are not scaled down appropriately for smaller screens.

    💡 How to Solve It:

    • Use Responsive Design: Ensure your website uses responsive design techniques to adapt the layout and content to different screen sizes, which helps reduce data usage on mobile devices.
    • Serve Optimised Resources for Mobile: Use CSS media queries or JavaScript to detect the device type and serve appropriately sized images and resources.
    • Implement Mobile-First Practices: Design your website with mobile users in mind first, ensuring it is lightweight and efficient on smaller, less powerful devices.

    By optimising for mobile, you can ensure a faster, more efficient experience for mobile users while reducing your website’s carbon footprint.

    Choosing Inefficient Hosting Providers

    Mistake: Hosting your website with providers that rely heavily on non-renewable energy sources contributes significantly to carbon emissions.

    🔍 Example: Many traditional hosting providers use data centres powered by coal or natural gas, leading to higher carbon emissions for every server request.

    💡 How to Solve It:

    • Switch to Green Web Hosting: Choose hosting providers that use renewable energy to power their data centres. Providers like GreenGeeks, SiteGround, and A2 Hosting offer green hosting options.
    • Optimise Server Resources: Choose a hosting plan that suits your website’s needs without over-provisioning. Reducing the number of unnecessary server resources reduces energy consumption.
    • Use Efficient Server Technologies: Implement technologies like HTTP/2 or HTTP/3, which offer more efficient data transfer, reducing energy consumption and improving user experience.

    By selecting a green hosting provider and optimising server resources, you can significantly cut down on your website’s carbon emissions.

    Conclusion

    It is not only beneficial for the environment to minimise your website’s carbon footprint but also beneficial for the users and can even help to optimise your site for search engines. If you do not want your online presence to be a part of these mistakes, then you should follow the solutions given above. As you can see, even the slightest changes make a big difference in the end!

    More from Biosites

    Are You Making These Common Mistakes That Increase Your Website Carbon Emissions?'s Image

    Insights

    Are You Making These Common Mistakes That Increase Your Website Carbon Emissions?

    READ MORE

    Why Do Website Carbon Emissions Matter? 5 Facts You Should Know's Image

    Insights

    Why Do Website Carbon Emissions Matter? 5 Facts You Should Know

    READ MORE

    What Are the Best Practices for Lowering Website Carbon Emissions?'s Image

    Insights

    What Are the Best Practices for Lowering Website Carbon Emissions?

    READ MORE

    Is Your E-commerce Site Eco Friendly? Follow Our 6 Steps's Image

    Insights

    Is Your E-commerce Site Eco Friendly? Follow Our 6 Steps

    READ MORE