10 Principles of Sustainable Virtual Design VII – Fix the Back-End

Principle #9 Fix the back-end

Many websites with a optimized code still get failing grades due to lousy server configuration. While you may not be the one who edits this, designers need to understand how much servers affect overall sustainability. The back end needs to be part of the design process, and there are ways to make it more efficient without hiring a full-time site engineer.

As an example, install and open up YSlow, and run a test on one of your site’s pages. Server-side problems include “Add Expires Headers” and “Compress components with gzip” as shown below:


This site isn’t compressing its downloads, which indicates a basic problem with its .htaccess file. The .htaccess file is in the default directory, and can be edited by any HTML or text editor. To fix it, study the Ask Apache .htaccess file tutorial. While learning how these files work is not trivial, it is not any harder than learning the basics of CSS. Apply the 80/20 rule – some understanding of .htaccess will get you a long way, even if you’re building standalone freelance sites for small clients.

Another area where the server collides with the front end is file and folder structure. Designers and front-end Ui developers often chop CSS files into logical chunks based on the project. But too many files increases the number of separate HTTP requests your server makes, making the page slower to load and reducing page efficiency. If you have access to the server software on your host, it is possible to add modules to the server that automatically combine your JavaScript and CSS into a smaller number of files, reducing your HTTP requests.

Other techniques, which use a dozen lines or so of PHP to do output buffering to dynamically grab and merge your files have existed for several years. There are also lots of systems that fit into existing server-side frameworks. Most developers could probably roll their own – you don’t need a WPO specialist to get the 80% of the 80/20 rule.

The key to sustainable development is that these aren’t super-difficult techniques, and can be implemented by a relatively small design and development team. However, everyone needs to know about it. The back-end coders need to know that sustainability, rather than simple efficiency or page speed is a part of the overall project goals. They also need to share what they’re doing with the design and front-end development team. For example, many server-side frameworks cache files in a way that will drive front-end developers wild, if they don’t know they’ve been implemented (file edits won’t automatically show on upload). For example, ultra-green webhost Asio.net recently implemented sophisticated server-side caching and optimization. However, I learned of it when my CSS updates didn’t immediately show on my site. It took a support ticket to get the problem fixed – an ironic example of “green” front-end and back end developers working at cross-purpose.

Asio is one of the few web hosting companies that makes sustainability a core part of their businesses, and directly uses solar power instead of trading in energy credits. If you’re trying to be green, they are where its at. But my story shows that the problem is not technology, but communication between design and development. One could argue that developers would check this out anyway, but this is only true for larger teams. If we want the “long tail” of smaller design and dev groups to increase sustainability, we have to push back-end efficiency understanding into the design layer.

More on back-end optimization

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.