Web eco-design: 5 best practices for creating an eco-responsible website
As we now know, digital technology has a major impact on our environment, not least because of the incredible energy used to store and circulate all our data. In the face of climate change, the digital sector must also be transformed by becoming more sober. A website obviously represents a significant share of this resource consumption (datacenter energy, server requests, data storage, etc.), which is why it is essential today to apply certain best practices to limit the ecological impact of your website.
Here are our 5 tips for an eco-designed site!
Bonus: All these practices will help you limit the ecological impact of your site... and optimize your natural referencing!
1 - Compress and limit photos and videos
It can be tempting to illustrate your site with lots of photos and videos, either for design reasons or in direct relation to your business. However, in addition to the impact in terms of loading speed, using heavy media on your site also means using more storage and therefore making your site more energy-intensive.
Despite all this, it's important to be aware that certain activities (e-commerce sites, for example) have a real need to use visuals to maximize the user experience and, in this case, convert visitors into customers.
It is in these situations that it is important to proceed with media compression:
For images
- Reduce resolution: You'll never need to display a 4000x3000px image on your site. It's therefore advisable to resize this image to 1600x1200px (for a section background image, for example) and 800x600px for a simple illustration image.
- Weight compression: It can be difficult to find the best compromise between weight reduction and limited loss of quality. However, it is strongly recommended to stay below 100kb per image.
Good to know #1: Sample tools for compressing and resizing your images online
Good to know #2: SVG, the alternative for illustrations and logos
If your graphic charter requires you to use mainly vector illustrations, it may be a good idea to opt for illustrations in SVG format rather than JPG or PNG. SVG has the enormous advantage of being generally lighter and, being a vector format, does not pixelate, whatever the display resolution.
For videos
- External hosting: A platform like YouTube, specialized in video hosting, will enable you to easily integrate your video without overloading your server. What's more, YouTube systematically applies lossless compression to every video uploaded, to make files lighter.
- Resolution and bitrate: If you are the creator of the video you wish to upload to your site (and not to a platform), we suggest you lower the video compression bitrate on export. A value corresponding to web standards is around 10 to 12 mb/s. However, depending on the type of video (filmed images or MotionDesign), its original resolution and its integration, you can go well below these values.
2 - Optimize loading speed and reduce the number of requests
Second essential point: relieve your server! A slow site sending a lot of requests will tend to consume more energy (and penalize your SEO).
To remedy a slow website, you first need to identify the reasons for its slowness. As a general rule, media is the first factor in slowness (see previous point), but assuming you've followed our advice on media optimization, the problem must lie elsewhere! Here are the two essential steps in the overall optimization of your site to reduce its consumption of server resources:
Reduce the number of requests
First, reduce the number of requests sent to your server by disabling certain functions.
A visit to your site automatically triggers a request called an HTTP request. The server sends all the files that make up your website to the visitor's web browser (Chrome, Firefox, Safari...) so that it can be displayed.
These exchanges with the server will have an impact on loading times and server power requirements.
The first thing to do is to identify the elements, extensions (plugins) and functionalities that are not essential to the operation of your site, and simply deactivate them from the site as a whole. If some of these features are only useful on a few pages, it's a good idea to disable them on the pages where they're not used, thus reducing the number of unnecessary requests.
Example: Your contact form is located on your contact page, so you can deactivate the module and its scripts on your home page.
Secondly, code minification. This step will enable you to condense your code and reduce it to the essentials, again limiting the volume of requests to the server.
Optimize the speed of my website
If you've followed the points above, you've already optimized your site's loading speed - congratulations! Last but not least, it's essential to install a caching system on your website. What does it involve? The cache, as its name suggests, will enable users to cache your website on their first visit (save the pages visited in their browser) and then display your site's pages almost instantaneously on their next visit.
Good to know #3: Cache extensions for a WordPress site
3 - Optimize your tree structure and limit unnecessary pages
As you can see, the aim here is to avoid unnecessary loading. So it's only logical that we now turn to the tree structure of your website. It's often the case that you want to segment the information on your site, and therefore create a large number of pages. While this is beneficial from an SEO point of view (when the pages are of high quality, of course), it is far less so from a web design point of view.
It's worth taking stock of your site's structure and tree structure: are all my pages essential? Do they provide quality information or content for the surfer? Wouldn't it be better to consolidate the content of 2 or 3 pages onto a single page?
Be careful, however, if you decide to group certain pages together! Remember to redirect the URLs of the deleted pages to the new one - Google will thank you 😉
4 - Ban automatic video playback
A formidable communication tool, video video is more than ever a cornerstone of corporate communication.We're not here to tell you otherwise!
However, in addition to applying weight reduction or external hosting, as explained above, web video comes with another best practice: disabling auto-play.
Auto-reading imposes a greater or lesser data consumption on the user, which runs counter to the principle of an eco-friendly website. This automatic reading is all the more penalizing for visitors visiting your site from a smartphone with a 4G/5G connection.
If you absolutely must have an auto-playing video on your site (for example, in the background of a section), consider activating the "play only in field of view" option. This very useful feature will launch automatic video playback only when the video arrives in the visitor's field of vision, and will stop it as soon as the video leaves the field of vision.
5 - Choose an eco-responsible web host
We've already written an article on the benefits of choosing an eco-responsible web host, available here.
To sum up, a green host is one that is committed to using green energy (from renewable sources) to power its structures and servers, and to adopting a strong CSR approach.
This could be the first step towards making your site eco-responsible! To help you in your search, here are two green web hosts we use and recommend:
Infomaniak, the green web host made in Switzerland!
Infomaniak is a Swiss-based hosting company that has been committed to a profoundly ecological approach for many years. In fact, our sites are hosted by Infomaniak. In addition to their CSR approach, Infomaniak offers a high-quality, high-performance service at reasonable prices.
Discover our resources about Infomaniak :
O2Switch, the eco-responsible French hosting provider
O2switch is a French hosting company based in Clermont Ferrand. The company stores all its data in 100% French datacenters, and implements a whole series of measures to constantly improve its CSR approach: optimized server cooling, use of "low voltage" servers, sourcing of equipment from short circuits...
Discover the unique O2Switch offer by clicking on the banner below:
Conclusion
As you can see, most of these practices are actually common sense. In fact, the requirements for taking the first step towards web eco-design aren't all that complex and far-fetched! What's more, as mentioned at the start of this article, these best practices will also enable you to optimize your site's Search Engine Optimization (SEO).
If you have a website, don't hesitate to test its carbon footprint on WebsiteCarbon ! To see our site's test, click here.
If you'd like us to help you optimize your showcase site or e-commerce site don't hesitate to contact us!
Epifyt becomes a partner of Provence Rugby
We are very proud to announce our partnership with Provence Rugby! Since the beginning of 2024,...
Read Post
WordPress translation plugin: your multilingual website with Weglot!
With the expansion of online commerce and global communications, it's becoming more and more...
Read Post
WooCommerce payment by instalments: discover Alma!
Do you own an ecommerce site? Or about to create an e-commerce site with WordPress/WooCommerce...
Read Post
The importance of specifications when creating or redesigning a website
When it comes to creating or redesigning a website, an essential but often overlooked element...
Read Post
A videographer by training, I've been diversifying into the web and visual communications in general for several years now. I joined Thibault at Epifyt at the beginning of 2022 to enrich our range of offerings and provide you with even better support in realizing your projects!