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:
- Drupal specific, ready to use tools for optimizing your website with
- Tips and tricks for fine tuning your server for high speed
- 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 or Compress PNG/JPG 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!
