No Comments
This quick reference guide aims to bridge the gap between Jedi coders and aspiring ones. This article will require you to get knee deep (not waist!) into some code, so beware! We’ll be playing around with how to go about doing this elusive Gzipping thing that Interweb grandpa’s keep hammering on about as well as learn how to set future expire tags on our images.
In order for you to understand what’s going on in this article, make sure you’ve got a firm understanding of the basics (Check out our basic web ninja guide to optimizing Wordpress blogs for a refresher).
I’ve intentionally left this section out of the basics guide as it can REALLY mess up your website if you’re even slightly squeamish about changing code (WYSIWYG ninjas beware…). We’ll be playing around in our .htaccess file and also write some PHP code for our CSS / JavaScript files.
Gzip is a feature that’s been around since the cavemen first commercialized fire production. It’s built into the modern browsers by default, so you don’t need to buy / download / crack some software and zip your whole website; that would be… a waste of time.
For a brief explanation on how it works, check out BetterExplained’s website article. Suffice to say, the way it works is that you tell you server that whenever someone is loading my website, zip all my file automatically using the Gzip compression (just a fancy title) and while you’re at it, tell the users browser to automatically unzip on his side. The beauty of this is that now you’re sending smaller files across the interweb, which means it gets delivered A LOT faster. And don’t worry about complicated settings or anything on the users side – everything’s automatic.
First off, locate your .htaccess file. This is usually based in your website root directory. In windows you can open it notepad or word (in Mac… erm… pick something). Once opened, you should see some commands in there already (don’t worry if there’s nothing – it happens). At the bottom of the .htaccess file, starting on a new line (you could leave a line open if you get the urge to), type the following:
# compress all text & html: AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
# Or, compress certain file types by extension:
<files *.php>
SetOutputFilter DEFLATE
</files>
Obviously save your file (in the same place you found it) and voila – you’ve just zipped your website. To verify that you’ve actually done it (thereby allowing you to flex your Jedi coding muscles), try one of the following:
The idea behind Futures Headers is that it puts a date stamp on images in your website. It won’t make much of difference for first time visitors to your site, but subsequent visits (perhaps even followers, members, or stalkers) will see a marked difference. You see once they visit your website, and download all those pretty pictures, it comes with a date when it needs to be refreshed; that way, if they return again and the “expires” date is still the same (and that date obviously hasn’t been reached yet), they don’t need to download those image again (it just gets loaded from your computers brain – smart, eh?)… making your blog a lot faster.
Eager to get your grubby Jedi paws on the code? Well, once again, open your .htaccess file as shown above and on a new line type in the following:
# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
# BEGIN ETag
FileETag None
# END ETag
Rest assured that A2592000 is not a secret number that displays your credit card number, it’s simply the date at which it should expire. Still not making any sense? A2592000 is the amount of time IN SECONDS that should expire before the user needs to check for a newer version of the image. It’s worked out as
Time = 60 (seconds per minute) * 60 (minutes per hour) * 24 (hours per day) * 30 (days)
= 2592000 Seconds.
Remember you can set the expiry date to anything you want, as long as you work it out in seconds (as shown above) first. I know it’s tedious, but it separates the ninja’s from the jedi’s.
I trust that after following the advice on this blog, and that of the basic ninja guide, you’ll have a zipping website (pun intended). If you’ve got any questions, post ‘em below and “the force” will answer them asap.
For Further reading check out these websites:
Tips and Tricks HQs’ guide on Wordpress Optimisation
Using Gzip Compression at Better Explained”
Paul Stamatiou on Gzipping CSS and Javascript files
Your Comment Comes Here.