LiteSpeed & Performance

Setting Browser Caching for Images, CSS and JavaScript

Setting Browser Caching for Images, CSS and JavaScript

Learn how to set browser caching for your website. Browser caching tells a visitor's browser to keep a copy of your images, styles and scripts, so the next page they open loads without downloading those files again.

Steps

  1. Log in to Plesk via your Zeniar Portal
  2. Select Files from the left-hand menu and open the folder your domain loads, usually httpdocs
  3. Click the .htaccess file to open it in the code editor. If there is no such file, click Add New, select Create File and name it .htaccess
  4. Add the following lines at the top of the file
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/webp "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType font/woff2 "access plus 1 year"
    </IfModule>
  5. Click Save
  6. Open your website, then check one of its images or style files in your browser's developer tools. The response headers should now include cache-control with a max-age value

Important: Once a browser has saved a file, it will not ask for it again until the period ends. When you change a style or script file, give it a new name or add a version to its address, such as style.css?v=2, so visitors receive the new one.

Please note: WordPress users do not need to edit this file. In the LiteSpeed Cache plugin, open Cache, click the Browser tab and switch Browser Cache on. The Essentials preset does this for you. See Choosing LiteSpeed Cache Settings for WordPress

Browsers now keep your images, styles and scripts between visits.

Seeing Your Own Changes

Back to LiteSpeed & Performance