Performance

Caching

Making sure unnecessary or recurring request to servers, databases or external APIs are cached can speed up your site a lot.

Added complexity

Even if most web sites probably would benefit from some kind of caching - adding cache adds complexity to the web site. When the cache should invalidate and making sure developers and content editors understand how the cache works should be documented and understood by all.

Browser cache

When a users first visit a web page all files needs to be downloaded from the server. Depending on how often these files on the server are being updated, these files can be cached in the browser on the users computer for an amount of time. If the files are cached for a long time, future visits to the web site will load faster - and the server will need to deliver fewer files and need less resources.

Use unique file names

You don't want to ask your user to clear their browser cache to receive updates on the web site. Make sure files that are being updated often (but you don't want to use a short cache timeout) gets a unique filename. Example use hashes (like scripts.xc345f.js and styles.xc345f.css) in JavaScript and CSS files and make sure that HTML files that are being updated does not use a long caching time - if any.

Specify cache timeout per file type

From the web server, each file type cache expiration can be set. Make sure to set long expiration for files that does not change and shorter for files that might get updated.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
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 application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
</IfModule>

Cache page response

A common bottleneck for web sites is database requests. There might be lots of different data that need to be loaded or lots of concurrent users fetching the same data. In this case, caching the result will probably make the web site load faster and be able to deliver content to more concurrent users.

The most efficient way is to cache to full page response, preferably using a cache server like Redis or memcached. Or using a CDN like Cloudflare or a caching HTTP reverse proxy like Varnish.

The solution used may differ depending on where the bottleneck lays, how many concurrent users, where in the world the users are and budget.

User specific content

If there is a need to display user specific content - like logged in user information or a shopping cart. Then a full page response cache cannot be used - unless you make sure that any user specific content is being fetched client-side.

Statamic cache

Statamic CMS has built in support for caching on different levels. The solution used is specific for each site but should be configured for best end user result. Read more at https://statamic.dev/caching.

WordPress cache plugins

WordPress does not have built in cache but most WordPress sites benefits greatly by using a cache plugin. We recommend using Cache Enabler but there might be other plugins that works better in specific situations.

composer require wpackagist-plugin/cache-enabler

To do

  • Browser cache for different file types has been set up with long TTL where possible.

  • Unique file names are used for files that are updated often.

  • Pages are using cache where applicable.

  • User specific content are not being cached.