Improving Web UI Responsiveness Using Apache Headers

ZoneMinder uses a fair amount of javascript and CSS files and a lot of these get loaded on every page hit.  In a default install you will likely find that many of them are not being cached, and thus are being loaded fresh each and every time. This adds a lot of time for each page load, making the UI feel slow and clunky.

The answer to this for us Apache users, is to enable mod_headers.  If you are using the packages from our Ubuntu PPA or from https://zmrepo.zoneminder.com mod_headers will have already been enabled.  To do so yourself manually, run 

sudo a2enmod headers

Now, you might think that would be enough, and you would be wrong.  Sadly mod_headers does not auto-configure itself, needing to be either configured in each virtualhost, or globally but the point is, it likely has not been done and hence you are not getting any benefit YET.

What I do, is enable it globally by editing a file in /etc/apache2/mods-enabled/headers.conf with the following content:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|ttf|gz)$">
Header set Cache-Control "max-age=604800,must-revalidate"
</FilesMatch>

This turns on caching headers for any files ending in any of those extensions.  So for us, and .css, or .js files are the relevant bits.

After a sudo systemctl reload apache2 you should find that all of those .css and .js files are now in your browsers memory cache and page loads are now instant.

On one of my systems which has very poor internet, the initial page load is over 16s.  With this caching turned on subsequent loads are less than 1s.  So it makes a big difference!