Enabling Caching and Gzip Compression with .htaccess

Posted on
by Philip Gwynne | Code , Web

Your website’s speed and performance is paramount to keeping your visitors engaged. Slow loading web pages are devastating for businesses, resulting in the loss of a huge amount of potential sales and conversions.

The negative impact of a slow loading website is greatly magnified when browsing on a mobile device with a poor internet connection, so it’s essential that you reduce your web page load times. Luckily, there are many ways to improve your website’s speed, but I’m going to go over one of the simplest and easiest methods that will have a notable and positive impact on your site’s page speed – a .htaccess file.

Using a .htaccess file, we can enable the following performance features on an Apache web server:

  • Compression – Compresses the files on your server, so the browser downloads smaller files.
  • Caching – Caches files that are downloaded by the browser for a certain length of time, so the same files aren’t downloaded again unnecessarily when browsing a web page which uses those same files.

Creating a .htaccess file

The first step is to create a .htaccess file. To do this, start a new file in a text or code editor and save it in your website’s root directory (where your index file is) as ‘.htaccess’ – don’t use any other names or file extension formats, as it won’t work otherwise.

Enabling compression

With your .htaccess file open in your text editor, copy and paste the code below into it:

<IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/vnd.geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "image/x-icon" \
                                  "text/cache-manifest" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
</IfModule>

This enables Gzip compression of all the MIME types defined after the DEFLATE attribute. Above is the most common file formats for the web.

Enabling caching

Copy and paste the code below into your .htaccess file:

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS

    ExpiresByType text/css                              "access plus 1 month"

  # Data interchange

    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images

    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML

    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript

    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"

  # Manifest files

    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media files

    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web fonts

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"

  # Other

    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
</IfModule>

This is enables browser caching for all MIME types defined after the ExpiresByType attribute.

Using the mod_expires module, we can define how long each file type gets cached for after we’ve defined it’s MIME type. In the example above, you’ll see that some of the file types have “0 seconds” cache time, this is because some of the files shouldn’t be cached such as HTML and text – any changes made to the copy on a website should be immediate, so we don’t cache them. Others like CSS and images will change less frequently, so we can cache them for longer periods of time.

What next?

Once you’ve saved your .htaccess file, the server will now be serving compressed files and browsers will caching certain files too, giving your website a much needed speed boost! But using a .htaccess to compress and cache your files is just the tip of the iceberg for web performance improvements.

Additional performance gains can be found by serving images that are appropriately sized for a device’s viewport and optimising all of your images using ImageOptim or similar. You should also look at minifying your Javascript and HTML files, and combining multiple Javascript and CSS files into one to reduce the amount of HTTP/S requests.

Add a comment.