Have you turned on the green light on your Drupal site? Have you moved to a sustainable web development workflow? A “movement” (rather than just a trend) that will benefit both:
 

  • You, the website owner: since optimized page load times and “find-able”, easy to “digest” content translate into happy visitors coming back to your site
     
  • The planet: since a lighter load of content, along with users that can access it much quicker, translate into “no need” for an additional infrastructure and into fewer carbon emissions (users consume less energy searching for their target content, while your data's “journey” from your server to their devices gets shortened).
     

See? Everybody wins: you, your visitors... the planet itself.

And where do you add that these sustainable web development best practices range from common sense, easy to implement measures (for the non-tech-savvy ones), to more in-depth practices if you want to go further with your “greening” initiative.

In this respect, Drupal (and especially Drupal 8) is ideally equipped for helping you achieve high performance on your website. You just need to press the right “buttons” for harnessing all that locked-in power!

Here is the list of best practices for a greener, responsible Drupal site, sorted into 3 main categories:
 

  1. Drupal specific, ready to use tools for optimizing your website with
  2. Tips and tricks for fine tuning your server for high speed
  3. Best practices to keep your content light (images), to make it conveniently snappy (written content) and easy to find
     

Drupal Specific Tools and Techniques For a Sustainable Web Development Process

With a whole plethora of tools that Drupal “shovels” into your toolbox, tools aimed at reducing on-page overload and boosting your site's performance, all you need to do is: use them!

Now allow us to list just a few of the handiest ones with a high impact on your site's carbon output:
 

1. Disable and Remove Unused/Outdated Modules

Confess it: do you have the Devel module still lingering on your production site? How about the Views UI module which you only use now and then for editing one of your Views?

And how about all those modules that you just took for a spin, “seduced” by their much-appraised functionality and cool features, and that you've never actually used (or stopped using shortly after you've enabled them)? Modules which are now claiming their own share of resources on your website since with every page view some of their code, too, gets loaded.

Time to declutter your “modules closet"! Wiping the dust off this load will actually speed up your site and... contribute to a healthier planet. A win-win!
 

2. Leverage the Lazy Loader Module's Power

Another sustainable web development technique specific to Drupal, "too" handy not to make use of, is enabling the Image Lazyloader module. 

It will load the images on your website only when/if the user scrolls down to them. A resources “saver” and page load speed booster valuable especially if it's an image-packed Drupal site that you own.
 

3. Jump on The “Design First” Trend

Mobile first” is so much more than just a fancy expression associated with Drupal 8 or a passing trend.

It's an entire philosophy shaping the sustainable web: use your own site's resources responsibly!

Since you're constrained to design for mobile devices first, you're constrained to achieve more with less. You just can't afford “stuffing” your site with heavy, optimized images or with bulky JavaScript libraries. Your web pages would then take ages to load on smartphones or tablets.

This way, you're “forced” to start small and keep it simple, efficiently simple! And you'll end up restraining yourself from getting “greedy on energy” later on, in the context of adapting your site for larger screens and when you're “spoiled” with higher bandwidth.
 

4. Aggregate Your JSS and CSS Files

You can lay back and get “responsibly lazy” letting the Advanced CSS/JS Aggregation Module do the assets aggregation job for you!

A much more convenient, sustainable web development solution for compressing your JavaScript load than the standard one where you would enable the aggregation code in Drupal Core (Administer > Configuration > Performance).

And where do you add that this life and energy-saving module use Google's CDN to load jQuery! Has one of the requested JavaScript or CSS files on your site been loaded already by a browser? Then just a cached version of that file will get loaded instead of downloading it fresh. 

Also, consider moving your JavaScript and CSS in the footer (a performance enhancement that happens by default in Drupal 8) for gaining a boost in page load speed!
 

5. Keep Your Images Small

Stuffing your site with large and larger images, with heavy visual content aimed to wow your visitors is nothing but sabotaging your site and disregard the planet.

And you should at least strive not to “steal” your site's chances to win over more users!

Keeping your images irresponsibly oversized will only prolong your users' waiting for them to load and, implicitly, increase their CO2 emissions.

Drupal comes to your “rescue” once again providing you with the ImageCache module. Use it to minimize overall page weight.

Then, go even further by teaming it up with handy tools such as TinyPNG, which will help you reduce your images' sizes even before you get them uploaded on your site.
 

6. Switch from PNGs and GIFs to SVG

Wherever possible, of course.

SVG (Scalar Vector Graphics) files come with the convenience of being:

  • much smaller
  • easy to scale, without having to trade clarity for that
  • enabling inline writing for CSS & HMTL 5 files

3 strong reasons which turn the use of SVG files into a sustainable web development method.
 

7. Take Your Visitors Straight-Up to The Content They're Looking For

The longer you leave your site visitors disoriented, scanning through in search of the information they're truly interested in, the more energy they'll consume.

And the more frustrated and unlikely to come back they'll grow, obviously!

This is why a Drupal module like SEO Checklist comes in handy!

It provides you with a highly intuitive UI where you can simply “check” all those SEO steps to take for optimizing your content. This way you'll be enabling search engines to direct users precisely to those pages on your website that they're interested in.
 

And we shall stop here with our tips and tricks on how you can embrace sustainable web development practices and turn the green light on your Drupal site, too. More website “greening” advice (at a server-level & content-level this time) in “Part 2” of our post. Stay tuned!

Recommended Stories

How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make
What can you do to speed up your Magento 2 store on mobile devices? For let's face it: Magento 2's “ecosystem” of… (Read more)
Silviu Serdaru / May 23 '2018
How to Integrate Alexa with Your Drupal 8 Website: A Step-by-Step Guide
Just imagine: a user asks Amazon Alexa to read out loud to him/her the headline of your latest blog post! Or maybe… (Read more)
RADU SIMILEANU / May 18 '2018
When Should You Not Consider Using Node.js? 3 Unsuitable Use Cases
It's undebatable: Node.js has practically laid the foundation of the real-time web! The real-time, two-way… (Read more)
RADU SIMILEANU / May 17 '2018