Set the caching policy of your site

022/12/2020

Configure HTTP “Expires” and “Cache-Control” headers in Nginx or Apache to control which resources are cached, where, and for how long

NOTE: If you want to set up the browser’s cache of a WordPress site, check our blog post on W3 Total Cache instead. In addition to the browser cache, it also covers the page cache and more.

NOTE: We’re working on a configuration panel so that you can edit your configs right from Moss. In the meantime, you must follow the guidelines in this article.

Moss doesn’t make any assumption regarding the caching policy for the resources of your site, since that’s completely dependent on the type of application you’re building. Luckily, thanks to Nginx extra config and Apache’s .htaccess, Moss provides you with a mechanism to establish what resources will be cached, where they can be cached, and for how long.

To show you how to do this, we’ll apply the config of an example taken from Servers for Hackers to a site called site run by the server user user. The following policy will be set up:

Don’t cache HTML nor other data of your website
Cache feed (RSS/ATOM) for an hour (both in browsers and proxies)
Cache images for a month (both in browsers and proxies)
Cache Javascript and CSS for a year (both in browsers and proxies)

Nginx configuration

Do this if your website uses Nginx as a standalone web server. If you’re using Nginx as a reverse proxy in front of Apache, then please jump to the section below.

Edit your config

Log into your server as user moss: ssh moss@<server-ip>
Using sudo and your favorite text editor, add the following lines to file /etc/openresty/server_params.site:

# Don't cache app html/data
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
    expires -1;
}

# Cache feed
location ~* \.(?:rss|atom)$ {
    expires 1h;
    add_header Cache-Control "public";
}

# Cache images, audio, video
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

# Cache css/javascript
location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
}

You may find some information about these directives in the Nginx documentation.

3. Restart Nginx from the Software tab

Apache configuration

Do this if your website uses Nginx as a reverse proxy in front of Apache. Otherwise – Nginx is the only web server for this site – take a look to the section above.

Edit your config

We’re going to create/update a .htaccess file at the root dir of your site. Most likely you’re using git and you only need to add or edit such file in your repo. If you’re uploading your site onto your server by any other means (e.g. via SCP or SFTP), then use the same method to upload this .htaccess fragment.

# Add mime-types for icons
<IfModule mod_mime.c>
    AddType image/x-icon .ico
    AddType image/x-icon .cur
</IfModule>

# Set "Expires" header
<IfModule mod_expires.c>
    ExpiresActive On

    ExpiresByType audio/ogg        "access plus 1 months"
    ExpiresByType audio/webm       "access plus 1 months"
    ExpiresByType image/jpg        "access plus 1 months"
    ExpiresByType image/jpeg       "access plus 1 months"
    ExpiresByType image/gif        "access plus 1 months"
    ExpiresByType image/png        "access plus 1 months"
    ExpiresByType image/x-icon     "access plus 1 months"
    ExpiresByType image/svg+xml    "access plus 1 months"
    ExpiresByType text/xml         "access plus 1 hours"
    ExpiresByType text/x-component "access plus 1 months"
    ExpiresByType video/mp4        "access plus 1 months"
    ExpiresByType video/ogv        "access plus 1 months"
    ExpiresByType video/webm       "access plus 1 months"

    ExpiresByType application/javascript  "access plus 1 years"
    ExpiresByType text/css                "access plus 1 years"
</IfModule>

# Set "Cache-Control" header to prevent caching
<FilesMatch "\.(manifest|appcache|html?|xml|json)$">
    <IfModule mod_headers.c>
        Header set Cache-Control "no-cache"
    </IfModule>
</FilesMatch>

# Set "Cache-Control" header to allow public caching
<FilesMatch "\.(rss|atom|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|css|js)$">
    <IfModule mod_headers.c>
        Header set Cache-Control "public"
    </IfModule>
</FilesMatch>

You may find more information about these directives in the Apache documentation:

Set up or deploy your site

If you’re using git and Push to deploy is enabled for this website:

Commit your changes to the .htaccess at the root dir of your site
Run git push

If you’re using git but Push to deploy is disabled for this website:

Commit your changes to the .htaccess at the root dir of your site
Run git push
Log into Moss
Head to your site
Click Deploy

If you’re not using git at all:

Upload the .htaccess file to the root dir of your site by any means (SFTP, SCP, etc). Remember to do this as user user, otherwise you’ll have permission issues.
Log into Moss
Head to your site
Click Set up