Tips for a Sustainable Drupal 7 & 8 Website

By:

on

October 23, 2015

Wind and solar farm in California.

Stephanie Daniels sums it up well, "Optimized sites are better for the environment. That’s because they’re significantly faster, more usable, with content that’s optimized for SEO and user experience. It’s my belief that Drupal has all of the tools in place to create sustainable websites…if you just know where to look.".

If only I had Drupal back in 1995. That was the year I built my first website for a Fair Trade Retailer called Bridgehead. Back at this time, the Internet was a very different place. People were using the web at that point, but it wasn't embedded in our lives like it is now.

Even the ecological footprint of the Internet 20 years ago was pretty small. Sure, there was already a network of computers that spanned the globe, but there weren't the giant data centres that there are now.

There are over 1 million sites running Drupal right now, representing about 3% of the Internet. The Information and Communication Technology (ICT) sector is estimated to contributed around 2 to 2.5 per cent of global greenhouse gas (GHG) emissions according to the International Telecommunication Union. This is only growing as we find more ways to use the Internet to make our lives more convenient.

There are a few people in the web industry who are aware of this and are working to raise awareness of others. I've been inspired by both Mightybytes and Manoverboard who have been leading this discussion within the BCorporation community. This article is going to extend the work of Mightybytes in their 15 Ways to Optimize Drupal for Sustainable Web Design article as well as the post by Manoverboard in Creating a Responsible, Earth-Friendly Website. I don't want to repeat their work, but saw an opportunity to update a few things, particularly in line with Drupal 7 & 8.

Certainly with Google prioritizing speedy pages in their search rank many sites have started making performance a higher priority. The rise in mobile usage also is driving performance, as usually mobile devices have lower bandwidth than desktop devices.

In Drupal there is a lot that can be done on the front-end, the back-end, and on the server. With a good content strategy we can ensure that the content is easy to find, and simple to use. All of this will help reduce the time that a user needs to spend using your site, which will reduce it's total carbon emissions.

Drupal Optimization

Here are some helpful tips to optimize your overall Drupal experience:

Remove unnecessary HTML to help the page load faster using the Fences module (7/8-dev). To change the Drupal defaults to produce a lighter markup, you can make a copy of any template (.tpl) file that ships with the Fences module and add it to your custom theme. You can also make your own Fences-styled .tpl files and place them in your theme by using the Fences naming convention. Fences will automatically find them, and add them to the list available in the dropdown for field configuration.

Aggregate and compress your CSS and Javascript by enabling the Advanced CSS/JS Aggregation module (7/8-sandbox). You could just enable the default compression/aggregation code that comes with Core (Administer > Configuration > Performance), but there many advances in the Advanced CSS/JS Aggregation module which we feel will make your page load faster. There is a good explanation of how to move the JavaScript & CSS to the page footer in Drupal 7 to speed up the page load. In Drupal 8, JavaScript by default runs in the footer. This module also allows sites to use Google's Content Delivery Network (CDN) to load jQuery. If a browser has already loaded a JavaScript file from a CDN, it will just use it's cached file rather than downloading it again.

An alternative module that uses Google's Closure Compiler webserver is minify which has fewer options and should be easier to set up. The Speedy module is another option.

Make sure you are delivering smaller images to your visitors using the Drupal Core's ImageCache module (7/8). This is especially important for mobile devices where the browser is rendering much smaller images. Page speed can be dramatically reduced by using big images that aren't optimized. Tools like TinyPNG can be useful to reduce image size before uploading them to your site.

Use Scalar Vector Graphics (SVG) rather than PNGs or GIFs where possible. SVG files are usually very small, they can be written inline in HTML5 & CSS files, and they scale without loosing clarity. This allows you to use the same image on your phone as you do on your desktop. Drupal 8 is replacing many of its PNG files with SVG files for this purpose.

The Lazy Loader module can give you a boost, by deferring loading images that are outside of the browser's viewport. Images are not loaded until a user scrolls to them. This both increases the page speed and reduces the total bytes transferred, as most people don’t scroll to the bottom of every page. This is most useful for image heavy sites.

There are so many reasons to design Mobile First, and using semantic HTML5 and modern CSS3. With Drupal we've been suggesting starting with a good base theme like Zen (7/8-patch) or Adaptive Theme (7/8-dev) for accessibility for years, but they also are great responsive platforms. Designing for a mobile device first forces organizations to prioritize what is most important to them and simplify their site. This can then be added to when a user is browsing your site with a big monitor and high bandwidth.

Today, LCD screens use the least energy using a lighter colour palette. Of note, an old Cathode Ray Tube (CRT) monitor will use about 200% more energy than a comparable LCD screen. So when designing your site, more than ever think about how users obtain the content they need, and the advantages of a bit more white space.

Disable unnecessary and unused modules. There are modules like Devel (7/8-dev) that shouldn't be enabled on production site anyway for performance reasons. Drupal's statistics module can also slow down a page since it needs to write to the database for every page load. There are also modules like Views UI that are only needed when you are editing a View, so why not disable it by default. Some code from the enabled modules will be loaded with every page view, thus slowing down your site.

Many people visiting your site are probably skipping the home page and going directly to the content that the search engine sends them to. This is great for the user and also great for the environment. Make sure you've enabled the SEO Checklist module and follow the advice within it to ensure that search engines send visitors directly to the information they want.

Server-Level Optimization

For those more savvy with server maintenance:

Enable page and block cache (Administer > Configuration > Performance) in Drupal 7. For an explanation of caching, the Mightybyte folks have a great blog on why this is important.  There are a great many improvements in caching in Drupal 8 and sites with changing content will perform much better. Page caching and CSS/JS aggregation is enabled by default, so hopefully it will be employed by default by more sites in the future. There have also been huge page improvements in the dynamic page cache for all users which should help interactive sites and sites making heavy use of dynamically generated content.

You may also choose to compress the cached pages using Drupal. This can also be done in Apache, so it really depends on how you configure your server; No point to compress them twice. Make sure to increase the cache lifetime in Drupal so that you are not having to regenerate the pages unless needed. If you want to go even further, install Varnish and set up the Varnish module (7/8-dev). Varnish is a very powerful page caching tool that is very configurable. For some sites we recommend setting up a separate Varnish server devoted to serving cached pages.

Memcached is a high-performance, distributed memory object caching system that can be used to speed up your Drupal site by alleviating database load. The Memcache module (7/8-dev) or Memcache Storage module is required to take full advantage of this, and Memcached can be run alongside Apache or on it's own server, depending on expected demands.

You should also look at optimizing your database on a regular basis. The DB Maintenance module (7/8-dev) uses cron to run MySQL's OPTIMIZE TABLE on a regular basis. Ideally you could do this with a cron script using MySQL commands in off-peak hours too.

echo "OPTIMIZE TABLE accesslog,cache,comments,node,users,watchdog;FLUSH TABLES;" |mysql -u user -ppasswd

There are a great many other suggestions from the community on how you can tune your server. There is an active community of Drupal developers interested in high performance configurations, it is worth checking out their ideas. There are also videos on MySQL performance improvements for Drupal.

In Drupal 7, install Alternative PHP Cache (APC) and the APC module (7) to cache PHP code. For Drupal 8, look forward to using PHP7, which runs way faster, than earlier versions of PHP. Drupal 8 runs much faster in PHP7. Until PHP 7 is out, PHP-FPM (FastCGI Process Manager) and especially HHVM (Hip Hop Virtual Machine) seem to offer great performance enhancements over PHP 5.x. Drupal 7 & 8 should both run fine now with HHVM although it is not identical to PHP, so there may be problems with some contributed modules.

Look into adopting HTTP/2 on your server because it offers performance improvements and may negate the advantages of aggregating CSS/JS files. At the moment there is great browser support for HTTP/2, but less than 2% of sites support this new protocol. Regardless, it is usually best to assume that less HTTP requests = faster page loading.

Another interesting innovation which is just now available within Drupal 8 is Facebook's BigPipe which breaks up a page into small chunks called pagelets which can be transferred to the client on request. BigPipe is in many ways a fundamental redesign of the existing web serving process, which offers significant performance enhancements. Dries outlines in his blog that this technology was previously available to only a few sites, but now can be configured for Drupal 8 sites as well. Check out the Big Pipe module for Drupal 8 and start experimenting with your performance.

Think of using a Content Delivery Network (CDN) to deliver some of your content. A CDN serves content from a location that will be optimized for the visitor's location. If content can be served from a host located geographically close to a visitor's PC, fewer network hops are required to pass the data across the Internet. Wim Leers has written a series of great posts on setting up the CDN module (7) to optimize your site. Again, there's a great post by Mightybytes on why sharing code like this is good for sustainability.

Sometimes though you just need to spend a bit more on faster hardware, more RAM and solid state drives. Often times older hardware is less efficient, so upgrading server hardware may have a positive impact; Two new servers may provide better performance at a lower energy cost than one server from 10 years ago. Also, as you increase the performance and decrease the response times of your web site, visitors may obtain their data faster, enabling them to power down sooner.

Think about switching to a green hosting company. Look for a host that is using green energy and has a strong environmental policy. Your servers are running 24/7, so having a green host can have a significant impact on your CO2 output. Mightybytes has a blog and Manoverboard a White Paper about green hosting that are worth checking out.

Content Optimization

If your job is more catered towards the material shown on the site:

Think about your content. Could meaning be clearly conveyed with fewer images? Are the images optimized? Is content created using proper semantic markup that is styled using centralized (and cached) CSS files?

Andrew Boardman's blog on Manoverboard is great in encouraging us to keep it simple. Steve Krug's book Don’t Make Me Think contains principles that are "highly relevant to all digital interfaces not only for ease of use and human engagement but also in determining energy consumption that powers our online behaviours."

He also argues for archiving unused content. Users expect websites to contain fresh content and not to contain an active history of all pages that have ever been published. Fewer pages mean that there are more quality pages for search engines to index and that it takes less energy to maintain.

Content should be find-able. Users will benefit from sites that have a well considered navigational structure. Using structured taxonomies can also allow visitors to find related content. Enable Drupal's core search, or better yet set up Apache Solr and use the Apache Solr module to provide an amazing faceted search experience.

Don't use Flash. Aside from not working on many mobile devices, Flash is known to consume a lot of energy, which was one of the reasons that Apple used to not support Flash on iPhones. Use HTML5's <video> format which has huge accessibility advantages as well as its environmental impact. There are of course other reasons not to rely on flash because of security or accessibility problems.

Evaluate Performance

Finally, when you've done all of your changes:

Don't trust that enabling these tools will work. Page optimization needs to be evaluated to determine that you are actually delivering faster pages. Yahoo's YSlow, Google's Insights & WebPageTest all offer means to evaluate web pages. Note that your performance on various pages may vary. Yahoo! also has a list of best practices that are worth considering.

Page speed will always vary based on load. Consider using the Apache HTTP server benchmarking tool to simulate how your website performs with a heavy page load. The Performance Logging and Monitoring module can help you track your performance over time as well.

It's also really worth taking a look at Mightybyte's EcoGrader tool to get a quick evaluation of some of these improvements on your site.

In the end, it isn't difficult to take the time to look over the suggestions in this post and make a difference for the sustainability of your website(s) and the environment. Regardless of your technical expertise, there are improvements to be made at any level of website development. All you need to do is use the tools at your disposal.

About The Author

Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.

Comments

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.