how to cache static resources to speed up web page

Loading static resources using browser cache will reduce HTTP requests for subsequent access and improve the performance of Web pages.

So the static resources as images, styles, scripts etc should leverage browser caching using the cache-control header.
and set caching expiration  time at the same time

# cache static resources
<FilesMatch "\.(js|css|jpg|png|gif)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "public, max-age=31536000"
  </IfModule>
</FilesMatch>

# set caching expiration time
<IfModule mod_expires.c>
# Enables generation of Expires headers
  ExpiresActive On
# Default algorithm for calculating expiration time
  ExpiresDefault "access plus 10 days"
  
# set expiration time according to file's MIME type
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/plain "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType application/x-javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType application/x-icon "access plus 1 year"
</IfModule>

# remove the ETag header
# ETag(Entity tag) is used to determine whether the resource version match on the servers and browsers. 
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None
date2019-04-15 17:35:27 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *