16 Tips to Make B2B Websites More Energy Efficient in 2023

Note: This article was originally published on npws.net

The Internet currently produces approximately 3.8% of global carbon emissions . That’s equivalent to the carbon emissions put off by the worldwide aviation industry and as the whole United Kingdom. The supercomputers that we all rely on to collect, process, and exchange data consume an increasing amount of energy — and carbon emissions.

If your company is like many others, actively considering actionable ways it can curb CO emissions, here’s a question you need to ask: Can we help make our B2B websites and the internet at large more energy efficient?

The answer is yes: you can. In fact we came up with 16 strategies to do just that. Read on for our list of actionable tips to make your B2B websites more sustainable and energy-efficient.

How To Calculate Carbon Footprint for Your Business Website

Calculating the carbon emissions of a website is somewhat of a challenge, but using five key pieces of data, the Website Carbon Calculator can make a pretty good estimate:

  1. Data transfer over the wire
  2. Energy intensity of web data
  3. Energy source used by the data center
  4. Carbon intensity of electricity
  5. Website traffic

Start With Energy Efficient Web Hosting

The website itself and the data that travels over the Internet eats up a lot of power. There are a number of ways to reduce the energy consumption — just in how you set up the web hosting.

1. Enable Server Caching

For websites that use a CMS like WordPress or Joomla, pages are generated dynamically every time someone visits a web page. This is energy inefficient: it requires server processing for every page view, and this increases the energy consumption of the web server. HubSpot CMS is one example of a CMS that has web caching built into the solution by default. The faster the website load time – the less energy is consumed.

Caching technologies like Varnish , pre-generate static versions of each website page. That way, the server overhead is reduced for most visitors. This reduces server energy consumption and makes a big difference in page loading times. Many hosting providers now offer Varnish as an off-the-shelf feature — meaning that your website’s energy efficiency and web performance can be improved with little manual effort required on your side.

2. Switch to a Web Hosting Provider With a High PUE Rating

Power Usage Effectiveness (PUE) and its reciprocal Data Center infrastructure Efficiency (DCiE) are widely accepted benchmarking standards for measuring the energy efficiency of data centers. The DCiE metric was proposed by the Green Grid to help IT Professionals determine how energy-efficient data centers are, and monitor the impact of their efficiency efforts.

The DCiE — expressed as a percentage — is calculated by dividing IT equipment power by total facility power. The PUE is calculated by dividing the amount of energy entering the data center by the energy used to run the computers inside it.

The lower the PUE number, the higher the efficiency rating. Energy-efficient data centers like those run by Google — no surprise there — can have a PUE as high as 1.11. This means that for every watt coming in, only 0.11 watts are used to power computing activities. If a data center’s PUE is 3.0, that means it’s very inefficient.

If you are looking for a new hosting provider, then the best place to look is The Green Web Foundation’s directory , listing over 500 hosting providers around the world that have a true commitment to using green energy in their data centers.

3. Use the Latest PHP Version

Newer PHP versions are faster and use fewer server resources and less energy. You can find more information on this topic in this article , which focuses on the benefits of newer PHP versions and their performance impacts.

4. Choose a Data Center That’s Closest to Your Users

A lot of the energy used by the Internet is used to transmit data through the telecom networks. So the further the information has to travel, the more power it uses on its journey. Selecting a data center closest to your target audience’s region or country will help reduce total energy consumption.

5. Opt for a CDN to Handle Static Website Assets

If you have a global audience, lean on content delivery networks (CDN’s) — groups of high-bandwidth servers distributed across the globe that can serve static assets (files on your website that aren’t changing over time, like images, graphics, fonts) from a location nearest to the user. That reduces data traffic between regions. When the data has to travel less distance for large files each time a page loads, it reduces energy expenditure and improves page load times.

Sustainable Design and Content

The very way a website is designed — not just its architecture, but it’s graphic elements — can have an impact on its energy consumption, as can the content on the site. One useful rule of thumb for a B2B website: if something causes friction for the user, requiring a number of steps, that’s an energy drain.

When building or revamping a website, there are several choices to make that will increase its energy efficiency, and some are surprisingly simple.

6. Conduct Search Engine Optimization (SEO)

Search engine optimization and energy efficiency are naturally aligned: a B2B website optimized for SEO not only attracts more potential buyers, it makes it easier for them to find the products, services and information they’re looking for.

The faster a user can find what they need, the less energy consumed in the search — there’s less time and therefore less power consumed visiting websites that don’t meet the user’s criteria.

7. Upgrade Your Copywriting

Clear, friendly, focused copywriting can help reduce wasted energy on B2B websites . While we want users to spend as much time as possible on our website, that time needs to be well spent. We don’t want to create content that doesn’t promote our brand or generate leads.

We don’t want to waste users time with tangents or unrelated information. And above all, we don’t want to have copywriting that bounces off frustrated readers — who go in search of better answers and options somewhere else, increasing the amount of time spent browsing) and thus increasing the energy used. As with SEO, good copywriting reduces friction, which decreases energy consumption.

The more efficient the visit, the less power used.

8. Craft a Stellar User Experience (UX)

Reducing friction in the user journey is one of the critical elements of a good user experience. What does that mean? Every web page and content type should have a clear and specific purpose. The copy and content (such as graphics and design elements) should be easy to understand.

The page should invite people to take action (with a call to action, or CTA). Make sure your content is focused and actionable: it helps users better understand their options, reducing the amount of time it takes for a user to decide what path to take.

But UX isn’t just about writing, and reducing energy consumed by a user isn’t just about what they’re searching for or reading. Use an accessible color scheme. Leveraging the dark mode use — an instant energy saver that’s more possible than ever given that most newer screens are OLED instead of LCD.

Helpful resources/tools:

9. Optimize and Compress Images & Graphics, Use Next-Gen Image Formats

High-resolution images can make a website look great, but they’re also a significant burden on the load time and energy consumption. Reducing your images is one of the easiest and most effective ways to lighten the load.

Get selective about the images you include: do they have a clear purpose on your website or are they just window dressing? Use the images you actually need and reduce their size and quality as much as possible before uploading them to the site.

Use next-gen image formats (AVIF, WEBP, WEBP2) whenever possible to save energy further. Load images at the correct size to avoid loading images larger than needed. That way, you avoid wasting bandwidth and don’t have to depend on CSS to scale the images.

In the example below, you can see the same image in PNG and WEBP formats, with WEBP format providing decrease of -93% in the file size, while keeping the image quality almost the same. By optimizing your images, you are actively reducing carbon emissions, while making an environmental impact.

Image optimization tools/plugins I use and recommend:

10. Reduce Video Size and Usage

Although images can slow down a website’s performance and efficiency, videos are the worst culprits given their larger file size.

Many B2B websites use videos to engage website visitors and capture users’ interest — “put some videos on your site” has been a common strategy for B2B website improvements .

But limit the video content on your site to what is essential, and use low-resolution videos whenever possible. Embed them directly into your site instead of linking to an external video provider.

Also, avoid allowing videos to autoplay while a visitor is viewing your site. And consider removing the background sound or music from any video on your site unless it’s absolutely essential. (We’ve found that background music has its own issues, too. Not everyone loves it.)

11. Optimize the Website’s Fonts

Fonts are way more than just letters: they can eat up data and energy. Consider that a single font file’s size can quickly exceed 400kb — in bold it could be twice that. Seasoned web designers are adept at font optimization — so type has a big impact without being a big drain.

Some of the best ways to optimize website fonts include:

  1. Using system fonts when possible — while not as decorative or varied, since they are already preinstalled on most devices, they don’t require extra loading.
  2. Limiting the number of different typefaces used to just two, and the number of different weights you use to three (and truthfully, it’s not how many different fonts you use, it’s how they look together).
  3. Using web fonts in the WOFF and WOFF2 file formats, which offer better compression than older, legacy font types like TTF, OFT, and SVG.
  4. Using subsets of web fonts — smaller portions of a large font file — that only display the characters needed in the website’s content.

Website Development

While designers and content creators can make some key choices when it comes to reducing the energy consumption of a website, developers also play a key role, and often have a say in design and content creation. Decisions made as a site is built (and then maintained) can make a sizable difference in energy efficiency, and in the end produce more sustainable website.

12. Build Static Web Sites / Try Using JAMSTACK Architecture

Write the web pages as static files in HTML, CSS, and JavaScript, or use a static site generator with JAMSTACK architecture to convert your CMS-powered website into static web pages. Some notable examples include GatsbyJs , NextJs , and Nuxt .

Utilizing a static website generator can decrease the page load time by over 60% , and speed up content creation by over 100%. These static website generators can also connect to a headless version of WordPress, Drupal, HubSpot, and many other popular CMS platforms. That way, you get a blazing fast website with a familiar backend editing experience for your blog posts.

13. Use Progressive Web App (PWA) Technology

Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application. Progressive Web App technology can improve user experience and save data by caching essential information and assets on the user’s device.

Even more significant efficiencies may be gained by using Progressive Web Apps instead of native mobile apps, which are often far more bloated.

Resources on how to start with PWA:

14. Write Clean and Reusable Code for Less Energy Consumption

When developers write code that can only be used once but serves everyday purposes, that’s a waste of time and energy. And while it may not be possible to write reusable code for every project, delivering results with lower carbon emissions is certainly a bar to aim for.

15. Compress, Minify or Combine CSS and JavaScript Files

Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.

JavaScript impacts website efficiency by adding file weight to the web page, and increasing how much processing the user’s device has to do. This applies to JavaScript more than other types of files.

The most reliable and fastest code is the code you never need to write! The smaller your stylesheet, the quicker it will download and parse. All developers start with good intentions, but CSS can bloat over time as the feature count increases. It’s easier to retain old, unnecessary code rather than remove it and risk breaking something.

Tools to test your website speed and performance:

16. Block Bots and Limit Crawlers

Bots and crawlers can sometimes use over 40% of the server’s available resources. So do what you can to limit them and optimize your website’s crawl budget. By doing so, fewer requests are sent to the server, which reduces power consumption.

Mastodon