Website Performance: Caching and Expires Header for Images, CSS and JavaScript
Tutorial by Stefan Trost | Last update on 2024-01-15 | Created on 2012-04-18
Images, CSS and JavaScript files have two things in common: they are in comparison to a pure HTML page often quite large and changes infrequently or not at all.
From performance view, therefore, it would be a disaster if you would load all images and script files from scratch every time a new page of the website is loaded, even though there were the same scripts and the same images (such as the background image or the header) loaded before for the previous page.
So, it would be nice to tell the browser something like this: please download these files only once and not again, remember them and show them every time they are needed again. How you can achieve this, I will show you in this tutorial.
Example .htaccess file
First of all, we have look at the following lines from a .htaccess file:
<FilesMatch "\.(ico|jpg|png|js|gif|css|gz)$"> Header set Cache-Control "max-age=29030400, public" ExpiresActive On ExpiresDefault "access plus 29030400 seconds" </FilesMatch>
With these lines, we are adding to all files with the extensions .ico, .jpg, .png, .js, .gif, .css and .gz a Cache-Control-Header as well as an Expires-Header. With these headers, we are achieving exactly what we want.
If the browser now requests one of these file types, he gets along with the actual file from the server through our htaccess file also the following information along the way:
Cache-Control: max-age=29030400, public Expires: Wed, 01 April 2013 22:17:51 GMT
This means nothing else than that we give the browser the information that the appropriate files are not changing until the indicated date or the specified number of seconds. Thereby, the browser knows that he can load the files from his cachse until the end of this period and does not have to download them again.
Customize
If you want to customize the example above, you can proceed as follows:
First, you have to look, which file extensions should be provided with the appropriate headers exactly on your homepage. These extensions can be included or excluded from the first line of the example above, by adding on removing the file extensions from the list.
After that, you have to decide how long you want the files to be cached. The values behind "max-age" and "access plus" specify how long (in seconds) the files can be cached. Here, you can insert, for example, 3600 for an hour, for a day 86400, 2592000 for a month and so on. However, the cache time should not be longer than a year.
If you would like to set different cache times for several file extensions, you can simply just at multiple blocks for different extensions, such as:
<FilesMatch "\.(ico|jpg|png|js|gif|gz)$"> Header set Cache-Control "max-age=2592000, public" ExpiresActive On ExpiresDefault "access plus 2592000 seconds" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=86400, public" ExpiresActive On ExpiresDefault "access plus 86400 seconds" </FilesMatch> <Files page.html> Header set Cache-Control "max-age=3600, public" ExpiresActive On ExpiresDefault "access plus 3600 seconds" </Files>
In this example, for the file page.html a time of 1 hour (3600 seconds) is set, for all CSS files, a time of 1 day (86400 seconds) is set, and the other files get a time of 1 month (2592000 seconds).
Alternative way of writing
In addition to the just introduced notation, you can specify the Expires-Header with ExpiresByType. Here's an example:
ExpiresActive On ExpiresDefault "access plus 1 year" ExpiresByType text/html "access plus 10 seconds" ExpiresByType text/css "access plus 6 months" ExpiresByType application/x-javascript "access plus 6 days" ExpiresByType image/png "access plus 3 months" ExpiresByType image/jpeg "access plus 3 months" ExpiresByType image/gif "access plus 86400 seconds" ExpiresByType image/x-icon A86400
In this example, you can see how you can set individually an Expires Header for each file type. If a type is not specified in concrete terms, the header set under "ExpiresDefault" is used. From this example, you can see that in addition to "seconds", other time specifications such as "days", "month" or "year" are possible. Also, instead of "access plus 86400 seconds" the string "A86400" can be written, as is demonstrated in the last line.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
PHP: Sending an E-Mail
Tutorial | 0 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
PHP: File Download Script
Tutorial | 0 Comments
HTML Form: Redirection depending on Radiobutton or Checkbox State
Tutorial | 0 Comments
PHP Mail Function: UTF-8 E-Mail Headers
Info | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.