When you visit a website your web browser will download the files (css, js and images) needed to render (display) the page properly. These files are then placed into storage (browser cache) in case they are needed again. The stored files will be used if you visited another page from the website, which means it can be rendered faster i.e. you don’t need to download the files again as your web browser already has a locally stored copy.

If the same person visits your website later, their web browser will use the cached files to render the web page, resulting in a faster user experience. If you use LiteSpeed’s WordPress Cache (LSCWP) plugin with OpenLitespeed it offers a fantastic solution to take dynamically-generated content (PHP) and convert it into static content (HTML) known as page cache. However, it only handles dynamically-generated content and not static content such as images, video, or fonts which are not included in the page cache. Therefore, when a website visitor moves between web pages, their web browser will request your websites logo each time, slowing the user experience.

When you have browser cache enabled, your website logo and any other static resources will be stored locally by the visitors web browser on the first visit. Now, as they move between different pages on your website the static resources such as your website logo, will be loaded from their web browser cache resulting in a faster user experience. This will continue to be served locally until the browser cache expires.

However, one of the risks associated with browser cache is with updating website content. If you have updated your website since the last time the browser cached the files, the website visitor will still see your old page as their browser is using the cached files and not downloading the newer versions. This problem is easily solved by simply clearing the web browsers stored cache.

In this guide, we will show you how to enable or disable Browser Cache settings for the server or individual virtual host with OpenLitespeed and DirectAdmin. We will also show you how you can set the expiration time for the Browser Cache by static content type or setting custom expire times for each individual static content type for the whole server or individually by virtual host.

Prerequisites

As we have discussed previously in our guides, when using OpenLiteSpeed with DirectAdmin the OpenLiteSpeed admin panel is set to read only and you cannot change or edit any settings using the GUI. The reason for this is due to the way the DirectAdmin development team integrate OpenLiteSpeed. Usually the OpenLiteSpeed configuration file is one file but DirectAdmin splits this configuration file into multiple include files stored in the /usr/local/lsws/conf directory. These all come together when using the ./build rewrite_confs command to create one configuration file.

Server (Global) Level

The browser cache options are located under the Expires Settings section in the General section of the OpenLitespeed admin panel. In order to change these options will need to edit the httpd-expires.conf file located in the /usr/local/lsws/conf/ directory. However, if we edited this file directly it would be overwritten by custombuild when either the ./build openlitespeed or ./build rewrite_confs commands are issued.

We can utilise the facility built into custombuild that enables a custom configuration file to be used by creating a custom OpenLitespeed configuration folder and adding the httpd-expires.conf template file. Firstly, we will need to create the custom OpenLitespeed configuration folder using the following commands.

cd /usr/local/directadmin/custombuild/
mkdir -p custom/openlitespeed/conf

Now we will need to create the custom httpd-expires.conf file. We will copy the existing httpd-expires.conf template to the /custom/openlitespeed/conf/ directory using the following command.

cp -p configure/openlitespeed/conf/httpd-expires.conf custom/openlitespeed/conf/

The default browser cache settings used in OpenLitespeed with DirectAdmin are image/*=A604800,text/css=A604800,application/x-javascript=A604800,application/javascript=A604800,font/*=A604800,application/x-font-ttf=A604800. The browser cache setting image/* means that all compression types (MIME) that start with image, for example image/webp, will be cached by the users web browser irrespective of the type after the / for 604800 seconds or 7 days.

You can check the default browser cache expiration time using the GiftofSpeed Caching Checker.

As we have already copied the httpd-expires.conf template to the /custom/openlitespeed/conf/ directory, we can add our own custom browser cache settings to the httpd-expires.conf file. You can access the custom httpd-expires.conf file using the following command.

nano /usr/local/directadmin/custombuild/custom/openlitespeed/conf/httpd-expires.conf

After loading the httpd-expires.conf file, you will see there are currently two configurable options for enableExpires and expiresByType. Now we will explain what each option means and show you how to edit the option to add your own custom browser cache settings.

Enable/Disable Browser Cache

The first setting in the httpd-expires.conf file is for enableExpires, which is the Enable Expires option in the OpenLitespeed admin panel. The enableExpires setting enables the Expires header for static files in OpenLitespeed, i.e. enables browser caching for the whole server – every domain that is currently hosted on your DirectAdmin server.

The default setting in OpenLitespeed is Yes which equates to 1 in the configuration file.

enableExpires           1

If you wanted to turn off browser caching globally (all hosted domains) you will need to change the setting to No by changing 1 to 0.

enableExpires           0

Browser Cache (Expires Default)

The second option shown in the OpenLitespeed admin panel is Expires Default. The Expires Default setting sets the amount of time that a web browser will cache a static file for. This setting does not exist in the httpd-expires.conf file and shows as Not Set in the OpenLitespeed admin panel.

You can manually add this option into the httpd-expires.conf file using the expiresDefault setting. If you wanted to set all static resources to be cached by a web browser for 1 year you will use the following setting in the httpd-expires.conf file. This setting must be specified in seconds.

# Set for 1 Year/365 Days (31557600 seconds)
expiresDefault          A31557600

Browser Cache (Expires by Type)

The second setting in the httpd-expires.conf file is for expiresByType, which is the Expires By Type option in the OpenLitespeed admin panel. The expiresByType setting allows you to customise which static files are cached and for how long they will remain cached by a users web browser.

As an example we will use the default browser cache settings from the LiteSpeed WordPress Cache (LSCWP) plugin. The format used to set the browser cache is MIME-type=A|Mseconds which means the compression type MIME-type you want to cache, then when you want to cache the file from, =A from the client’s access time and =M from the files last modified time and how long you want it cached for seconds. You can list the compression types (MIME) either individually such as image/webp or using a wildcard such as image/*.

To change the default browser cache expiration time and the compression types used change the expiresByType.

# Set for 1 Year/365 Days (31557600 seconds)
expiresByType           text/css=A31557600,text/javascript=A31557600,application/javascript=A31557600,application/x-javascript=A31557600,application/pdf=A31557600,image/*=A31557600,image/x-icon=A31557600,image/vnd.microsoft.icon=A31557600,image/svg+xml=A31557600,image/jpeg=A31557600,image/gif=A31557600,image/png=A31557600,image/webp=A31557600,audio/ogg=A31557600,video/ogg=A31557600,video/mpeg=A31557600,video/mp4=A31557600,video/webm=A31557600,font/*=A604800,application/x-font-ttf=A31557600,application/x-font-woff=A31557600,application/font-woff=A31557600,application/font-woff2=A31557600,application/vnd.ms-fontobject=A31557600,font/ttf=A31557600,font/otf=A31557600,font/woff=A31557600,font/woff2=A31557600

After saving the custom httpd-expires.conf file we will need to tell DirectAdmin to rebuild the OpenLitespeed configuration files and apply the custom browser cache settings using the following commands.

cd /usr/local/directadmin/custombuild/
./build rewrite_confs

Now when you check the GiftofSpeed Caching Checker, you can see that the default browser cache expiration time has now changed to 1 Year (31557600 seconds) from the default 7 Days (604800 seconds) for both the .css and .js.

That’s it. You have now successfully enabled or disabled the Browser Cache settings for the server with OpenLitespeed and DirectAdmin. You have also customised the expiration time for the Browser Cache by static content type or setting custom expire times for each individual static content type for the whole server. Now we will show you how you can change these settings for an individual by virtual host.

Virtual Host (Domain) Level

When using Apache as your web server you can add the Cache-Control Headers and Cache Expires settings directly into the .htaccess file. Although, OpenLiteSpeed uses similar syntax as Apache, meaning both web servers can follow the same mod_rewrite rules in the .htaccess file, there are many that it won’t. With Apache you can set Cache-Control Headers and add Cache Expires settings based on file extensions using the FilesMatch directive, set all static resources to use the same Cache-Control header with the mod_headers module or control each individual option using the mod_expires module.

Using FilesMatch Directive (Example)

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
        Header set Cache-Control "max-age=84600, public"
</filesMatch>

Using mod_headers Module (Example)

<IfModule mod_headers.c>
        Header set Cache-Control "max-age=84600, public"
</IfModule>

Using mod_expires Module (Example)

<IfModule mod_expires.c>
        ExpiresActive On
        ExpiresByType image/jpg "access 1 year"
        ExpiresByType image/jpeg "access 1 year"
        ExpiresByType image/gif "access 1 year"
        ExpiresByType image/png "access 1 year"
        ExpiresByType image/svg "access 1 year"
        ExpiresByType text/css "access 1 month"
        ExpiresByType application/pdf "access 1 month"
        ExpiresByType application/javascript "access 1 month"
        ExpiresByType application/x-javascript "access 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
        ExpiresByType image/x-icon "access 1 year"
        ExpiresDefault "access 2 days"
</IfModule>

With OpenLitespeed we can set the Cache-Control Headers and add Cache Expires settings for a domain but they need to be added into the Virtual Host file and not the .htaccess file. This is because OpenLitespeed with only read mod_rewrite rules from the .htaccess file and not FilesMatch directives, mod_headers or mod_expires rules.

In this section we will use the examples above and show you how you can add the Cache-Control Headers and Cache Expires settings to an individual domain using the Virtual Host file instead of using the FilesMatch directive, mod_headers and mod_expires modules.

Domain Virtual Host File

Log into your DirectAdmin dashboard and select the Custom HTTPD Configuration icon under the Account Manager section.

In the Custom HTTPD Configurations dashboard, find the domain you want to set the Cache-Control Headers and Cache Expires settings and then click openlitespeed.conf under the Conf. Files heading.

This will take you to the View Domain Configuration dashboard where you will see the contents of the openlitespeed.conf file for domain you want to edit. Now to customise the openlitespeed.conf file, you will need to select the blue Customize button.

In the Customize configuration dashboard, you will see a tabbed menu under the Additional CUSTOM tokens section. Here you will need to select CUSTOM7 – Appears at the end of the virtualHost. This means that any customisation that we make will be added to the end of the domains openlitespeed.conf file.

Browser Cache by File (FilesMatch)

One of the more common directives used in an .htaccess file is FilesMatch. This is an Apache Regular Expression (Regex) directive that targets all files of those types only by specifying a search pattern i.e. the file requested has to match the name, file extension, etc. In order to apply the same directive to a website hosted with OpenLitespeed and DirectAdmin you will need to add the following code to the CUSTOM7 – Appears at the end of the virtualHost section so it can be added to the domains openlitespeed.conf file when the file is rebuilt.

context exp:^.*(woff|woff2|jpg|jpeg|png|css|js)$ {
  location                $DOC_ROOT/$0
    extraHeaders            <<<END_extraHeaders
    # Remove any cache control header
    unset Cache-control
    # Set new cache control header to 365 Days
    set Cache-control public, max-age=31536000
  END_extraHeaders
}

You will notice that at the start of the code block we are using context exp. This tells OpenLitespeed we need to set this context (content) to the following URI (Uniform Resource Identifier) of any static resource ending in .woff, .woff2, .jpg, .jpeg, .png, .css or .js. The Location is set as $DOC_ROOT which will mean it should be applied to the contents of domains public_html folder and is instead of using the full folder location i.e. /home/user/domains/domain.com/public_html. After $DOC_ROOT we have added $0 because the URI is using a regex.

In the extraHeaders section, you will see that we have cleared (unset) any existing Cache-control header and then set the Cache-Control Cache-ability by adding the public directive, which means that the response may be stored by any cache, even if the response is normally non-cacheable.

We have then set the max-age to 365 days, which equates to 31536000 seconds. Anytime you set the max-age it must be in seconds and represents the maximum amount of time a static resource is considered fresh.

The max-age setting in a openlitespeed.conf file will take precedence over the server level setting. By implementing this directly into the domains openlitespeed.conf file, it has the same effect as using the FilesMatch directive used by Apache. Unlike setting the Cache Control Header below, these settings will only generate Expires headers static resource extensions listed.

Browser Cache-Control Header (mod_headers)

When using Apache you can set a Cache-Control Header directly into the .htaccess file using the mod_headers Apache module. In order to apply the same header to a website hosted with OpenLitespeed and DirectAdmin you will need to add the following code to the CUSTOM7 – Appears at the end of the virtualHost section so it can be added to the domains openlitespeed.conf file when the file is rebuilt.

context / {
  location                $DOC_ROOT/
    extraHeaders            <<<END_extraHeaders
    # Remove any cache control header
    unset Cache-control
    # Set new cache control header to 180 Days
    set Cache-control public, max-age=15552000
  END_extraHeaders
}

You will notice that at the start of the code block we are using context /. The context block is used in OpenLitespeed for various reasons such as making a file system outside of the document root accessible, to block access to certain resources, to setup user-level authentication for certain resources, create mount points for external applications or to redirect requests to another location. In this example, we have started with context /. This tells OpenLitespeed we need to apply this context (content) to the root context which is mapped to the document root of a domain.

In the extraHeaders section, you will see that we have cleared (unset) any existing Cache-control header that has been set. We have then set the Cache-Control Cache-ability by adding the public directive, which means that the response may be stored by any cache, even if the response is normally non-cacheable.

We have then set the max-age to 180 days, which equates to 15552000 seconds. Anytime you set the max-age it must be in seconds and represents the maximum amount of time a static resource is considered fresh.

The max-age setting in a openlitespeed.conf file will take precedence over the server level setting. By implementing this directly into the domains openlitespeed.conf file, it has the same effect as using the mod_headers.c with Apache. You will need to be mindful using the cache-control header it will generate Expires headers for all the domains webpages.

Enable Browser Cache (mod_expires)

The most common way to add the Expires header and the max-age directive of the Cache-Control header for static resources in Apache is using the mod_expires.c module in the .htaccess file.

With the Apache mod_expires.c module you would enable or disable Expires and Cache-Control headers using the ExpiresActive directive in the .htaccess file. If you wanted to turn on (enable) the Expires and Cache-Control headers you would use ExpiresActive On and to turn them off (disable) you would use ExpiresActive Off.

However, with OpenLitespeed this is not possible to use Expires directive in the .htaccess file with a domain hosted with OpenLitespeed and DirectAdmin. Instead we will need to use the enableExpires directive. You will need to add the directive to the CUSTOM7 – Appears at the end of the virtualHost section so it can be added to the domain openlitespeed.conf configuration file when it is rebuilt.

Generally, turning on the Expires and Cache-Control headers is not required with OpenLitespeed as they are enabled by default at the server level. However, for completeness in the guide we have added both command. The enableExpires command in OpenLitespeed has the same effect as using ExpiresActive with Apache and will generate Expires headers for static files. If the enableExpires header is enabled, it will generate the headers based on the Expires Default and Expires By Type settings below.

If you want to enable the Expires headers you would use the following command.

context / {
  location                $DOC_ROOT/
    enableExpires           1
  }

If you want to disable the Expires headers you would use the following command.

context / {
  location                $DOC_ROOT/
    enableExpires           0
  }

Browser Cache Default Expiry (mod_expires)

With the Apache mod_expires.c module you would enable a default cache expiry time using the ExpiresDefault directive in the .htaccess file. After the ExpiresDefault directive you would specify the time until the cache expired and would need to be rebuilt. For example, if you wanted to set the expire time to 2 days you would use ExpiresDefault "access 2 days". This would mean that the default time for all static resources would be 2 days after the user visited your website.

However, with OpenLitespeed this is not possible to use ExpiresDefault directive in the .htaccess file with a domain hosted with OpenLitespeed and DirectAdmin. Instead we will need to use the expiresDefault directive. You will need to add the directive to the CUSTOM7 – Appears at the end of the virtualHost section so it can be added to the domain openlitespeed.conf configuration file when it is rebuilt.

The format used by OpenLitespeed to specify the timeframe is slightly different than the example used for Apache. In Apache you would use access 2 days but in OpenLitespeed you would use A172800 to achieve the same result. The first part A specifies that the time should be taken from when the visitor accessed the resource. If you wanted the time to be from the files last modified date you would use M instead. The second part 172800, indicates the time in seconds before the static resource cache expires.

The expiresDefault command in OpenLitespeed has the same effect as using ExpiresDefault with Apache and will set the default time to the Expires headers for all static files. If expiresDefault is not set, then OpenLitespeed will not generate any Expires headers for MIME-types not specified in the expiresByType directive below.

context / {
  location                $DOC_ROOT/
    # Set for 2 Days (172800 seconds)
    expiresDefault          A172800
}

The expiresDefault setting in a openlitespeed.conf file will take precedence over the server level setting if it set lower. For example, the default server setting is 604800 seconds or 7 days and when using the example above it is set at 172800 seconds or 2 Days. Therefore, OpenLitespeed will use the domain setting rather than the server setting.

Browser Cache Expiry Type (mod_expires)

With the Apache mod_expires.c module you would specify the default cache expiry time for a specific file type using the ExpiresByType in the .htaccess file. The ExpiresByType will generate the Expires header and the max-age directive of the Cache-Control header for static resources such as text/css.

After the ExpiresByType MIME-type directive you would specify the time until the cache expired. For example, if you wanted to set the expire time on a jpg image file to one year you would use the MIME-type image/jpg followed by the time required “access 1 year”, which would look like ExpiresByType image/jpg "access 1 year". This would mean that the jpg image file will be cached by the visitors browser for one year from the time the user visited your website.

However, with OpenLitespeed this is not possible to use ExpiresByType directive in the .htaccess file with a domain hosted with OpenLitespeed and DirectAdmin. Instead we will need to use the expiresByType directive. You will need to add the directive to the CUSTOM7 – Appears at the end of the virtualHost section so it can be added to the domain openlitespeed.conf configuration file when it is rebuilt.

The format used by OpenLitespeed to specify the timeframe is slightly different than the example used for Apache. In Apache you would use access 1 year but in OpenLitespeed you would use A31557600 to achieve the same result. The first part A specifies that the time should be taken from when the visitor accessed the resource. If you wanted the time to be from the files last modified date you would use M instead. The second part 31557600, indicates the time in seconds before the static resource cache expires.

The expiresByType directive in OpenLitespeed has the same effect as using ExpiresByType directive with Apache and will set the Expires headers for individual MIME types. If the MIME-type is not set in the expiresByType directive, then OpenLitespeed will generate the Expires headers for the missing MIME-types using the expiresDefault directive above.

context / {
    location                $DOC_ROOT/ 
    expiresByType           image/jpg=A31536000,image/jpeg=A31536000,image/gif=A31536000,image/png=A31536000,image/svg=A31536000,text/css=A31536000,application/pdf=A31536000,application/javascript=A31536000,application/x-javascript=A31536000,application/x-shockwave-flash=A31536000,image/x-icon=A31536000
}

In the example above we have we have included the MIME-types from the Apache example we documented earlier. You can customise your own MIME-types by adding the relevant Media Types (MIME) to the expiresByType directive.

The expiresByType directive in the openlitespeed.conf configuration file file will take precedence over the server level setting. For example, if the server has the expiresByType directive set for the MIME-type text/css at A172800 seconds or 2 days but is set at A31536000 seconds or 365 days in the domain openlitespeed.conf configuration file, OpenLitespeed will use the domain expiresByType setting rather than the server setting.

Summary

In the sections above we have gone through and explained how you would enable Expires and Cache-Control headers using OpenLitespeed. We have shown examples of replacing the common rules used in the .htaccess file with Apache such as FilesMatch, mod_headers and mod_expires.

Now we will pull together the rules we have used to convert the existing mod_expires browser cache directives in Apache and explain how these work together with OpenLitespeed using the example below.

Using mod_expires Module (Apache)

<IfModule mod_expires.c>
        ExpiresActive On
        ExpiresByType image/jpg "access 1 year"
        ExpiresByType image/jpeg "access 1 year"
        ExpiresByType image/gif "access 1 year"
        ExpiresByType image/png "access 1 year"
        ExpiresByType image/svg "access 1 year"
        ExpiresByType text/css "access 1 month"
        ExpiresByType application/pdf "access 1 month"
        ExpiresByType application/javascript "access 1 month"
        ExpiresByType application/x-javascript "access 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
        ExpiresByType image/x-icon "access 1 year"
        ExpiresDefault "access 2 days"
</IfModule>

The ExpiresActive directive in Apache is replaced by the enableExpires directive in OpenLitespeed. This tells OpenLitespeed to generate Expires and Cache-Control HTTP response headers for the specified MIME-types. The web browser parses the HTTP response headers to determine how long to cache the MIME-types (content) for in the visitors web browser cache.

<IfModule mod_expires.c>
        ExpiresActive On

context / {
  location                $DOC_ROOT/
    enableExpires           1

The ExpiresByType directive in Apache is replaced by the expiresByType directive in OpenLitespeed. This tells OpenLitespeed to set the browser cache expiry time for specific MIME-types. The cache expiry time is converted from "access 1 year" to A31536000. The expiry time is set in seconds.

        ExpiresByType image/jpg "access 1 year"
        ExpiresByType image/jpeg "access 1 year"
        ExpiresByType image/gif "access 1 year"
        ExpiresByType image/png "access 1 year"
        ExpiresByType image/svg "access 1 year"
        ExpiresByType text/css "access 1 month"
        ExpiresByType application/pdf "access 1 month"
        ExpiresByType application/javascript "access 1 month"
        ExpiresByType application/x-javascript "access 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
        ExpiresByType image/x-icon "access 1 year"

    expiresByType image/jpg=A31536000,
    expiresByType image/jpeg=A31536000,
    expiresByType image/gif=A31536000,
    expiresByType image/png=A31536000,
    expiresByType image/svg=A31536000,
    expiresByType text/css=A31536000,
    expiresByType application/pdf=A31536000,
    expiresByType application/javascript=A31536000,
    expiresByType application/x-javascript=A31536000,
    expiresByType application/x-shockwave-flash=A31536000,
    expiresByType image/x-icon=A31536000

The ExpiresDefault directive in Apache is replaced by the expiresDefault directive in OpenLitespeed. This tells OpenLitespeed to set the browser cache expiry time for all MIME-types, not explicit set in the expiresByType directive above.

        ExpiresDefault "access 2 days"
<If/IfModule>

    expiresDefault          A172800
}

The completed conversion from using the Apache directives in the .htaccess file will look like the example below. The OpenLitespeed directives are added directly to the domains openlitespeed.conf file in the DirectAdmin using the CUSTOM7 section in the Customize Configuration dashboard.

Using Context Block (OpenLitespeed)

context / {
  location                $DOC_ROOT/
    enableExpires           1
# Set for 1 Year/365 Days (31557600 seconds)
    expiresByType            image/jpg=A31536000,image/jpeg=A31536000,image/gif=A31536000,image/png=A31536000,image/svg=A31536000,application/pdf=A31536000,application/javascript=A31536000,application/x-javascript=A31536000,application/x-shockwave-flash=A31536000,image/x-icon=A31536000
# Set for 2 Days (172800 seconds)
    expiresDefault          A172800
}

Now you will need to rebuild the OpenLitespeed configuration (openlitespeed.conf) file using the ./build rewrite_confs command. After adding the custom browser cache settings to the CUSTOM7 section in the domains Customize Configuration dashboard, click the green SAVE button in the bottom right corner.

After adding the custom browser cache settings you will need to rebuild the openlitespeed.conf configuration file using the ./build rewrite_confs command. Although you can enter this from terminal, there is also a button in the Custom HTTPD Configurations dashboard that does the same function. Press the BACK button in the top right of the screen twice to go back to the Custom HTTPD Configurations dashboard and then click the green ./BUILD REWRITE_CONFS button to rebuild the openlitespeed.conf configuration file.

Now using the GiftofSpeed Caching Checker, you can see that the browser cache expiration time has now changed to 1 Year (31557600 seconds) for the .js files which is set in the expiresByType setting and the browser cache expiration time for .css files has changed to 2 Days (172800 seconds) which is set in the expiresDefault setting.

That’s it. You have now successfully enabled or disabled the Browser Cache settings for an individual domain with OpenLitespeed and DirectAdmin. You have also customised the expiration time for the Browser Cache by setting a global static content expiration time or setting custom expiration time for each individual static content MIME-type.