Website Optimization GZIP Compression

Speed is Everything — Second Step to a Faster WordPress Site

Last week I wrote about the very first thing you should do to speed up your WordPress site: install a caching plugin.

Now that you’ve done the most critical thing that will help to improve your website performance, you should now move on to optimizing your WordPress site for Google PageSpeed.

Optimizing for Google PageSpeed, when you have a WordPress powered site, follows the same PageSpeed optimization steps, as if you had a traditional website.  The only difference, for the most part, is how they’re implemented.

The very first item on the list of optimization tasks is to enable GZIP compression.  The difference between enabling GZIP for a traditional website compared to enabling GZIP for a WordPress site is all about modifying the existing .htaccess file properly.

With WordPress, they will be an existing .htaccess file (assuming you are running on a Linux/Unix system with an Apache web server).  To make what are called “pretty urls” or “permalinks”, the WordPress system uses the .htaccess file to add some instructions to handle “permalinks”.

If you do not have an FTP client, we recommend you go get FileZilla.  You’ll need an FTP client to log in to your web server, download the existing .htaccess file, then re-upload the modified .htaccess file to your web space.

What We’re Going To Do

  1. Test for Compression
  2. Connect to your website with your FTP client
  3. Find your website root folder
  4. Copy down your .htaccess file
  5. Make a backup of your .htaccess file (in case what we do to the control file is not compatible with your web server)
  6. Make changes to the .htaccess file
  7. Upload the .htaccess File to your web server
  8. Test for Errors
  9. Test for Compression

Test for Compression

As I mentioned in my previous article on enabling GZIP for a traditional website, it’s a good idea to see the potential for your web page before you begin.  One of the tools I use to test for GZIP compression is checkgzipcompression.com.    Test your home page to see how big it is and how much it can be compressed.  You may end up saving up to 50% or more.

Connect To Your Website

Open up your FTP client, and connect to your website.  While the purpose of this tutorial is not to teach you how to use an FTP client, the basics are that you would need to provide your “FTP Host”, “FTP Username” and “FTP Password”.  Those three bits of information should connect you to your web server.

Find Your Website Root Folder

Once you’ve connected, find the location of your “index.php” and “wp-content/” folder.  It traditionally will either be in the folder that you are automatically logged in to, or a sub-folder called “www”, “htdocs”, or “httpdocs”.  Open up that folder.  You should find a file called “.htaccess” within it.

Copy Down Your .htaccess File

You should copy back that .htaccess file to your local PC.  Maybe make a folder in your local PC specifically for these changes so that you can come back to them at a later date.

Make a Backup

Once the file has been  copied down from your web server, copy it and name the copy something such as “.htaccess-backup”.  That way, if we make changes that the server doesn’t like (yes, this happens), you can always revert back to your original contents of the file.

Make Changes to the .htaccess File

Open up the .htaccess file in a raw text editor, such as NotePad++, or TextPad. At the very beginning of the file, you should add the following code.

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

It should come before the code that is typically in the .htacess file, that looks like:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Save your file.

Upload the .htaccess File to your Web Server

Now, we’re just doing in reverse what we did when we copied down the file from your web server.  Re-upload the .htaccess file to your root folder of your website.  If it asks you if you wish to overwrite the existing file, select “Yes” or “Overwrite”.

Test for Errors

Open up a web browser and visit your web site.  If it gives you an error page (or you get a blank page), go back to your text editor with the .htaccess file and revert back to what you had when you opened it (CTRL-Z is your friend), save, and re-upload the original.

Otherwise, if everything displays well, click on one of your links on your home page to make sure your permalink structure still works.  If it does then you should be good to move on to the last step.

If you did have troubles, try to identify whether or not you overwrote any of the original code that was in the file.  It may also be that your web server is not compatible with the GZIP or Deflate.

Test for Compression

Head back over to checkgzipcompression.com.  Test your home page one more time to see how much has been compressed.  Chances are you, you’ve now set up compression which will crunch down the size of your web pages by over 50%, saving your visitors a bunch of time when loading your pages.  This can immediately impact how fast your web pages load, and can result in a boost to your Google PageSpeed score by as much as 15 points.

In Summary

So there you go.  This probably took you 5 minutes, and now you’ve enabled GZIP compression for your WordPress site, and in the process saved your visitors a bunch of time.