Increase your websites' performance on Apache with caching using htaccess

The Cache

Caching is a fundamental method for improving the performance of an application. Even if you did not yet implement it explicitly, caching is always present on lower layers of the system. For example, the page cache used by Linux to decrease access times on files and folders. Caching is always a trade-off between the currency of the cached files, the performance gain and the additional space that is required to store the cached files. For that reason we should not just cache everything for the sake of that we implemented a cache, but think about the files and assets that make sense to be cached first.

What to cache?

First of all, we analyze our website using a tool like the Chrome developer tools or the Firefox Developer Edition. We do this to get an overview of the assets that have an impact on the load time of our website. The image below shows all files that are loaded when accessing Twitter.

Twitter Files

Each line represents a seperate HTTP request that potentially increases the load time of our website. Usually, items that doesn’t change over a longer period of time on the one hand, but are accessed frequently on the other hand, are good candidates for caching. This is a rule of thumb in general, especially if the computation of the items is expensive. If we have a live production website, we won’t change the design or the front-end functionality on a daily basis. Therefore, JavaScript and CSS files should be cached to reduce the amount of data transferred to the user.

In most cases, images and other media files make the major part of the size of a website. Caching images on the client side can dramatically boost the loading time of a website. Specially, users who access our website with a mobile device while they are connected with a cellular network profit from reduced data transfer and faster loading.

Fonts are the last elements that we want to consider here. Nowadays, custom fonts are used in almost every modern website. However, many tutorials that I’ve read about website performance don’t take fonts into account. In fact, fonts can definitely impact the loading time of a website, or even block the whole site from rendering. By default, a browser sees a stylesheet as a render blocking ressource. If the stylesheet contains a font that can not be loaded, the browser will continue to render your page. Therefore, you should make sure to load fonts only from reliable sources. But since we don’t change the font of our website frequently, we should cache them anyhow.

How to cache?

We will use the Apache module mod_expires to enable the caching of our elements. The module needs to be loaded via the server configuration file. Unfortunately (or fortunately), most web hosters will not allow you to directly manipulate the server config file. However, the expire module is usually enabled by most hosters. In this case, we can easily enable caching via .htaccess as shown below:

 1 <IfModule mod_deflate.c>
 3     # Force compression for mangled headers.
 4     #
 5     <IfModule mod_setenvif.c>
 6         <IfModule mod_headers.c>
 7             SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
 8             RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
 9         </IfModule>
10     </IfModule>
12     # Compress all output labeled with one of the following MIME-types
13     # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
14     #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
15     #  as `AddOutputFilterByType` is still in the core directives).
16     <IfModule mod_filter.c>
17         AddOutputFilterByType DEFLATE application/atom+xml \
18                                       application/javascript \
19                                       application/json \
20                                       application/rss+xml \
21                                       application/ \
22                                       application/x-font-ttf \
23                                       application/x-web-app-manifest+json \
24                                       application/xhtml+xml \
25                                       application/xml \
26                                       font/opentype \
27                                       image/svg+xml \
28                                       image/x-icon \
29                                       text/css \
30                                       text/html \
31                                       text/plain \
32                                       text/x-component \
33                                       text/xml
34     </IfModule>
36 </IfModule>