If you’re anything like me, you like snappy (you like to find what you’re looking for and find it quickly), and slow load times can greatly impact your workflow. Turns out we’re no different than most web users. In this article, I’ll give you a few reasons why you should worry about web site optimization and show you some simple technical things you can do to speed up your site’s load time and responsiveness.
Why worry about optimization?
1. Your users expect it.
According to a study by Jakob Nielsen, a wait time 10 seconds or greater will cause a user to leave your site (more recent studies say 7 seconds). Nielsen’s research pointed out that users like to feel like they’re in control when visiting a website. High responsiveness is crucial to support the feeling of direct manipulation, a key usability technique often used to increase user engagement and control. Responsiveness and direct manipulation are directly correlated to the load time of your web pages and is preferred to be a second or less.
Keeping in mind that you have about 7 seconds of selling time, look at it like this. If your initial page takes 6 seconds to load, you have 1 second of selling time. If your initial page takes 1 second or less to load you have 6-7 seconds of selling time.
2. Google expects it.
Google is all about providing relevant content to it’s users in the fastest way possible. With that said, it’s no surprise that they have begun taking page load times into account when figuring your site’s page rank. Simply put, a slow web site can hurt your search engine rankings.
3. Your budget expects it.
Optimizing your web site’s files decreases the amount of bandwidth used to transfer them to your users’ browser. In a site that gets a lot of traffic, the savings can become significant. Not to mention the decreased load on your server! It takes less time to serve up smaller files. The savings in this area may not be extravagant, but a deal is a deal, right?
Some notes about optimization
When talking about web site optimization, I’m talking about the technical things you can do to decrease the size of your site’s files, decrease page load time, and increase user’s satisfaction while visiting your site. While there are many other optimization techniques available, I am only going to be talking about a few today. And, because I’m such a fan of automation, the optimization techniques detailed here were designed to add no extra steps to your workflow.
Prerequisites
Before we get started, you’ll need root access to your site’s server and a basic understanding of PHP as well as experience configuring the Apache web server. If you’re unsure about anything described here, perhaps it would be best to hire someone to help you. The commands and methods I show you below relate to a CentOS 5.5 installation running PHP 5.2. You may need to tweak these directions a bit to behave with your particular setup.
1. Utilize Browser Caching Effectively
Once your site goes into production, you’ll want to make sure that your user’s browser caches things that do not change often. The idea here is that you’re reducing the number of times your user’s web browser has to poll your server for static or semi-static files. This increases responsiveness and decreases server load. To configure proper browser caching, you need to add the following code to your site’s .htaccess file:
# Far-Future Expires Headers
# Taken from the HTML5 Boilerplate: http://html5boilerplate.com/
# You may need to tweak the “access plus 1 month” part to fit your content
<IfModule mod_expires.c>
Header set cache-control: public
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”
# cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”
# your document html
ExpiresByType text/html “access”
# rss feed
ExpiresByType application/rss+xml “access plus 1 hour”
# favicon (cannot be renamed)
ExpiresByType image/vnd.microsoft.icon “access plus 1 week”
# media: images, video, audio
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/ico “access plus 1 year”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
# webfonts
ExpiresByType font/ttf “access plus 1 month”
ExpiresByType font/woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
# css and javascript
ExpiresByType text/css “access plus 1 week”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType text/javascript “access plus 1 week”
</IfModule>
2. Enable GZip Compression
This is a crucial step in decreasing the size of your web page’s files. Enabling GZip compression tells the server to compress files before sending them to the browser. In turn, the browser decompresses the files and renders the site. All of this happens in an instant and greatly decreases the size of your files and, thus, your load time.
To enable GZip compression, add the following code to your .htaccess file:
# Enable GZip Compression
<IfModule mod_deflate.c>
# html, xml, css, and js:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
# webfonts and svg:
<FilesMatch “\.(ttf|otf|eot|svg)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
3. Minify your CSS and JavaScript
Comments, spaces, and tabs balloon the size of your code and markup. Minifying your code will not only remove unnecessary whitespace from your files, but also remove any comments you’ve inserted. This can greatly reduce the size of your site’s files. At Paramore|Redd, we have a server-side process in place, called AutoMin, that automatically does this for us when a new version of our files are pushed to production. As a part of our P|R Labs project, we are providing you with this software free of charge for use in your projects. Many thanks to the minify project for their minification classes.
UPDATE: A new version of AutoMin is available and this section of the article is out of date. Please check the latest README for more information.
To automatically minify your CSS and JavaScript files, upload the “automin” directory to your web root and make sure the directory is writeable by PHP. You can do so via a simple SSH command:
# chmod 777 -R /path/to/web/root/automin/
Next, add the following to your .htaccess file:
# Pass the complete path to any css file to the php minifier
# CSS/JS Auto Minification by Jesse Bunch (getbunch.com)
# Paramore|Redd Online Marketing (paramoreredd.com)
RewriteRule ^(.*\.css)$ /automin/minifier.php?path=$0
RewriteRule ^(.*\.js)$ /automin/minifier.php?path=$0
Basically, this tells Apache to automatically send any CSS or JavaScript requests to the minification script. This script automatically minifies and caches those files. The next time that file is requested, it checks to see if it has been modified since it was minified. If it hasn’t been modified, it serves up the cached copy. If it has been modified, the cache is regenerated and served up. This is truly a quick-and-easy way to accomplish the task of minification without dealing with separate files and is unobtrusive to your team’s workflow.
4. Compress your HTML Markup
Yet another savings comes from automatically compressing the HTML output of your CMS. At Paramore|Redd, we use the ExpressionEngine CMS.
Provided you followed the instructions for installing AutoMin above, here’s how to automatically compress the HTML output of ExpressionEngine:
Open up your site’s index.php file and add the following to the top of the file:
// AutoMin Compression for EE
// Step 1 of 2
ob_start();
Then, in the same index.php file, add the following to the end of the file:
// AutoMin Compression for EE
// Step 2 of 2 : Compress HTML output
require($_SERVER[‘DOCUMENT_ROOT’] . ‘/automin/lib/class.html.min.php’);
$strCompressed = Minify_HTML::minify(ob_get_clean());
echo $strCompressed;
For those techies out there, here is what’s happening: We first create an output buffer using ob_start() that catches EE’s output. Then, at the end of the file, we grab the output using ob_get_clean(), run it through the HTML compressor, and serve it up with the echo() function. This method works well in ExpressionEngine, but is not guaranteed to work without modification on other CMS platforms.
That’s it! If you view the source of your site now, you’ll find that your markup has been significantly reduced in size. Note: Inline JavaScript is skipped over by the HTML compressor. But, since we’re good little developers, we don’t have to worry about that do we?
5. Enable Alternative PHP Cache (APC)
While there are many respectable PHP caching systems out there, this is the one we’ve chose. We use Alternative PHP Cache because it is open source and set to be bundled in PHP 6. APC is designed to cache the compiled PHP source code, called intermediate code, thus decreasing page load time. Here’s how to install APC:
You’ll need to SSH into your server and obtain root permissions:
# ssh myuser@myserver.com
# su -
Next, make sure you have all the prerequisites installed:
# yum install -y php-devel php-pear httpd-devel gcc make
Install APC as a PECL extension:
# pecl install apc
Next, we need to tell PHP to load APC. We do this by creating an include that PHP will load when the Apache service is started:
# vi /etc/php.d/apc.ini
In this file, we insert the following line:
extension=apc.so
Save this file and restart Apache:
# service httpd restart
You can verify that APC is loaded by running the following command:
# php -i | grep apc
You should see a bunch of APC configuration options. Congratulations! APC is now installed and running. Per the PHP man page for APC, the default settings should work fine for most users.
One more thing, APC comes with a really nice PHP script that gives you information on how it’s behaving, you can see this script by copying the bundled file into your web root and viewing it with your browser:
# cp /usr/share/pear/apc.php /var/www
Conclusion
At the end of this (somewhat lengthy) article, you might be saying, “Jesse, that’s great, but just how much of a difference does all of this really make?” A question like that would best be answered with some facts. Lemme’ throw some numbers your way:
- Paramore|Redd achieved a nearly 80% decrease in the size of our site’s assets after implementing all of the items listed in this article. Our home page now loads in 0.171 seconds, according to WooRank.com. Now, tell me the methods I explained here didn’t make a difference!
- Increased page responsiveness leads to happier and more-frequent visitors, happier visitors lead to greater conversion, and greater conversion leads to greater revenue for your business. Would you trade an hour’s work for happier visitors, more conversions, and greater revenue?
Hopefully, this how-to has enabled you to make the web a better place for your visitors. Feel free to post your comments and questions below. Don’t forget to follow me on Twitter!
Downloads
- AutoMin Source at BitBucket: PHP Script that provides automatic CSS and Javascript minification and caching. See the included README file for more information.
3 comments