Quick Page Speed Boost: Enable Cache and gZip/deflate

Proper cache and gZip/deflate compression are the 2 musts if you’re aiming at good page loading times and better site performance. This becomes quickly evident to you, no matter which performance check service you use: Google’s PageSpeed Insights, GTMetrix, Pingdom, etc. Then you start looking after a plugin that can do the job. Stop right there. There’s an easy, better, and more SEO-friendly way to do it. Just keep reading.

What is Cache?

Cache is a way to speed up website loading times by storing files directly in users’ browsers to allow for instant access when they return to your pages. This way users returning to your website don’t need to download all your resources again, resulting in faster page load times and better user experience. Cache sets the rules for what and how long is stored as well as for when browsers should check for updated content.

While using cache plugins is quite popular among WordPress users, it’s rarely a good solution to a WordPress problem to add yet another plugin. Plugins can cause incompatibility due to code errors or interference with another plugin/theme.

Furthermore, some of the most popular cache plugins, such as W3 Total Cache, provide you with a bunch of smart options that most normal WordPress bloggers won’t ever truly understand. This often results in misconfiguration messing up with your site’s performance and SEO.

You’ll ask: is there another way to enable cache if I can’t code? The answer is yes. Keep reading.

What is gZip/deflate?

gZip/deflate is a type of file compression that allows you to reduce file size with around 70-80 %. This makes your pages much smaller and, thus, much faster to load. This type of compression is possible for almost everything but your images.

By using gZip/deflate you save also resources, such as bandwidth, which might be very important if you use web hosting with limited resources.

There’re plugins for WordPress that can do the job for you, such as GZip Ninja Speed Compression for example. While it starts working almost instantly and you only need to activate the plugin, be careful – the ninja team seems quite pushy, installs a bunch of .htaccess files in your WordPress core, and contacts you via automated mails at every step you take.

Even if that doesn’t bother you, why use a plugin when you can avoid it?

Why Enable Cache and gZip/deflate in the Same Time?

Usually it’s recommended that you tweak one thing at a time so that you’re able to track down the cause if a problem occurs. This is also why the fix here will be shown in several steps instead of as a one big chunk of code in order to make it possible for you to monitor for errors (don’t be afraid of the mention of code).

It does, however, only make sense to optimize all you can while you’re at it – as it all happens in the same file, .htaccess.

Enable Cache and gZip/deflate Without Plugins

Who can do this?

1. You are on an Apache server or, if not, you have .htaccess file anyways.
2. You must have access to your site’s root directory on the server.
3. You must be able to download/upload single files from/to the server (via File Manager or FTP).
4. You must be brave enough to copy-paste into your .htaccess file.
5. You don’t need to understand coding, you should simply follow the instructions below.

Step-by-Step Guide

1. Access the root directory on the server
2. Locate .htaccess. If you can’t see it, it might be hidden. Enable Show hidden files. If you’re sure that you don’t have it, you can create it in a plain text editor and name it .htaccess (with the dot in the beginning!) Only create the file if you’re 100 % sure that you don’t already have it! Otherwise you risk to overwrite an existing .htaccess file and make your site inaccessible! If you’re not certain about whether you should proceed, please stop here and use a plugin instead!
   

   Access to .htaccess via FTP. The file tree is the same via File Manager on the server.

    

3. Download the file. Save a copy of the original which is not to be changed (as a backup).
4. Open the copy of the file that will be edited in a plain text editor, such as Notebook in Windows or Text for Mac (Not Word or a similar text editing program!).
5. Copy the following piece of code (to enable gZip/deflate compression):

   # BEGIN Compress text files
   <ifModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
   AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
   AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
   AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
   AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
   AddOutputFilterByType DEFLATE font/truetype font/opentype
   </ifModule>
   # END Compress text files

6. Paste it after the last line in .htaccess. If you’ve just created the file, simply paste the code in it.
7. Save the file (don’t change the name and don’t overwrite the backup copy!)
8. Upload the file to the same location on the server where you downloaded it from.
9. Overwrite the .htaccess file on the server.
10. Check the result: check whether your pages are functioning as they should and test compression with a tool as this one. You should see something like that on picture below as a result of the test if compression works.
    

    You can save over 80 % of file size by implementing this script.

11. If you noticed problems, upload your backed up .htaccess file to fix errors and then try to identify the problem (maybe you delete some symbols in the original file or pasted just a piece of the code above?).
12. If everything worked as intended, download the file again – or simply continue editing the same file you worked on before (the one you edited and uploaded to the server, not the original one).
13. Copy this piece of code enabling and setting up cache:

    # BEGIN Expire headers
    <ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 604800 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    ExpiresByType text/html "access plus 604800 seconds"
    ExpiresByType application/xhtml+xml "access plus 604800 seconds"
    </ifModule>
    # END Expire headers

    # BEGIN Cache-Control Headers
    <ifModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(css)$">
    Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
    Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "no-cache"
    </filesMatch>
    </ifModule>
    # END Cache-Control Headers

14. Save the file without changing the name.
15. Upload the file to the same location you downloaded it from.
16. Replace the existing .htaccess file on the server.
17. Check whether your pages are functioning properly.
18. Re-check gZip compression as advised in step 10.
19. Check cache by using GTMetrix, Google PageSpeed Insights or a similar service. In the analysis these pages provide you should look for a comment as “Cache is enabled” or as shown in the picture, “Leverage browser caching A(94)”.
    

    GTMetrix confirms it: the page is using both gZip and cache as good as possible.

     

20. Enjoy the benefits of proper cache and gZip!

Note: These cache settings will instruct browsers to cache images and media for a month; CSS, JavaScript, and HTML for a week but text/HTML will have to be revalidated every time. While this isn’t the ideal setting for static sites where resources rarely change, it’s a must for a dynamic blog where new posts have to be accessible from the moment they are posted.

If you run a rather static site, exchange “no-cache” in the last set in Cache-control with “public”. If not sure what is best for your site, experiment with the different options while keeping an eye on site performance and functionality.

Tip: If you are comfortable with code, check out this guide by AskApace for almost unlimited cache options.