Sustainable Drupal: 10 ways to save energy by speeding up your CMS

Web performance is important for sustainability. The less we have to transfer, the better. We can also do a lot to optimize how the content works with the browser so that the end user gets information as quickly as possible. 

As discussed in earlier articles, Green LAMP and Lean Wordpress, there is a lot that can be done on the server level to speed up your site. However, the content management system (CMS) has a great deal of control over what and when code is presented to the screen. Ultimately, you want to present your main content as quickly as possible so that the browser can present it as quickly as possible.

In this article, I will focus on the open source CMS Drupal, which drives about 12% of the CMS market.

(Note: Wordpress has plugins, and Drupal has modules.)

1. Remove unnecessary HTML to help the page load faster using the module Fences. To change the to the lighter markup, make a copy of any template (*.tpl.php) file that ships with Fences and add it to your custom theme. You can also make your own Fences-styled *.tpl.php 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.
2. Aggregate and compress your CSS and Javascript further by enabling the Advanced CSS/JS Aggregation (AddAgg) module. The default compression/aggregation code that comes with Drupal Core is OK but there many advances in this module which will further improve page loads. This StackExchange answer includes a good explanation about how to move JavaScript and CSS to the page footer with AddAgg. 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 its cached file rather than downloading it again. There are lots of algorithms for compressing code Google's Closure Compiler can be used by either the minify or Speedy module to reduce the size of your JavaScript.
3. Deliver smaller images to your visitors using the Drupal Core's ImageCache module. This is especially important for mobile devices where the browser is rendering much smaller images. The Picture module is a backport of Drupal 8’s responsive image display formatter which allows administrators to optimize images for different devices and resolutions by pairing image styles with CSS media queries. Page will load slower if big images aren't optimized. Tools like TinyPNG can be useful to reduce image size before uploading them to your site. The Lazy Loader module can give you a boost, by deferring loading images that are outside of the. Images are not loaded until 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. Use Scalar Vector Graphics (SVG) rather than PNGs or GIFs where it reduces file size. SVG files are usually very small, they can be written inline in HTML5 & CSS files, and they they scale without losing clarity. This allows you to use the same image on your phone as you do on your desktop. Drupal 8 is replacing many of it's PNG files with SVG files for this purpose.
4. Disable unnecessary and unused modules. There are modules like Devel that shouldn't be enabled on production site anyways 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.
5. Enable the SEO Checklist module and follow its advice to ensure that search engines send visitors directly to the information they want. Many people visiting your site are probably skipping the home page and going directly to the content that a search engine sends them to. This is great for the user and also great for the environment.
6. Design with mobile in mind first, and using semantic HTML5 and modern CSS3. With Drupal we've been suggesting starting with a good base theme like Zen or Adaptive Theme for accessibility for years, partly because they 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.
7. Caching, Caching, Caching. In Drupal 7 it is not uncommon for a developer or administrator to forget to simply enable the page and block cache (Administer > Configuration > Performance) in Drupal 7. With Drupal 8 page caching and CSS/JS aggregation are enabled by default, so it will be employed by more sites by default. Make sure to increase the cache lifetime in Drupal so that you are not regenerating a page unless it is needed. In Green LAMP: Save energy and the environment by optimizing your website, there are examples on how to extend this further.
8. Don't use Flash. Aside from not working on many 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.
9. Think about your content. Could meaning be clearly conveyed with fewer images? 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." Andrew 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 them. Content should be findable. 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 Drupal’s Apache Solr module to provide an amazing faceted search experience. In Drupal there is a lot that can be done on the frontend, the backend, 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 its total carbon emissions.
10. Find ways to contribute back to the community. There are over 1 million sites running Drupal right now, representing about 3% of the Internet. If you can optimize a module or theme so that your site runs faster, consider giving that back to the community so that others can benefit. 

Finally, the first-ever Sustainable UX virtual conference is coming up on February 9. It’s free and it’s online. Get tickets here.