When visiting a website, the website will cache in your browser. This cache can be controlled by configuring your Cache-Control HTTP headers for your website This is done by adding mod_expires in the .htaccess file of your server.

If you don't set your Cache-Control for the HTTP headers, then, you will have a longer wait times when visiting your website. Each time your website is accessed without Cache-Control, your website has to make a request to the server for each image, javascript file, CSS file, and so forth to load.

Browser caching is good because it allows your web resources to be stored in the browser for faster page load time. This makes your site faster to surf on the web. To remove the cache from your browser, your browser cache needs to be cleared. For information on clearing your browser cache, please see our article on How to clear your browser's cache. The following sections will explain the basics of setting up the Apache Module mod_expires in your .htaccess.

Basic code for setting expire dates for cache

In order to add browser caching to your website, you will need to set the date for when the cache expires. This cache code is placed in the .htaccess found in your public_html folder. You will need to edit your .htaccess file. Add the following code to the file and save it.

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

Now your site will set the time each for each resource that was added to the .htaccess to expire. In the previous code example, the jpg, jpeg, gif, png will expire in a year and pdf, javascript and flash files will expire in a month. More explanation o these settings will come later in this article. Next we will look at using the <ifmodule> for adding Cache-Control with mod_expires.

Code for mod_expires in an <ifmodule>

Using mod_expires in an <ifmodule> allows image types and other file types to be set in an array. This matches the file types to the specific expire time. This streamlines the htaccess code. In the code below, the file types are listed in a row like jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3. Below is an example of the code to use.

<ifmodule mod_expires.c>
<Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
    ExpiresActive on
    ExpiresDefault "access plus 2 days"
</Filesmatch>
</ifmodule>

This sets the cache to expire to the same duration for each of the file types. To specify the specific times for each individual file type, you will want to use the previous code example. The following will explain the Directive types that are used for Cache-Control.

Directive types

There are three directive types; ExpiresActive, ExpiresByType, and ExpiresDefault. The following table explains the difference between them.

Caching directives
ExpiresActive Directive Enables the Expires headers for the website.
ExpiresByType Directive This defines the age of the cache header and the type of file to cache.
ExpiresDefault Directive This sets the age of the cache for all documents other than those specified in the ExpiresByType for the site.

Caching Directive bases

There are 3 base types the access, now, and modification type.

  • access
  • now (same as "access")
  • modification

Duration of cache time

The duration of cache time can be set to one of the following units of time.

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

Basic syntax for ExpiresByType intervals

The following shows the basic syntax for the ExpiresByType. Each file type can be set to specific times to expire the cache.

ExpiresByType text/html "access plus 2 days 12 hours"
ExpiresByType image/png "access plus 6 months 3 days"

Recommended Expire date ranges

You do not want to set your expire times for your cache to unrealistic settings. If you keep the cache to a maximum of a year and a minimum of a month, you should have your browser caching working optimized for your site.

  • Set your images to a long expire time like "access plus 1 year". Images take more time to load and are updated less frequently than other files.
  • Make your CSS, HTML, and Javascript expire at a minimum of a month like "access plus 1 month". CSS, HTML and JavaScript's typically are updated more when developing a site than the sites images.
  • Keep your cache expire date at most a year.
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Comments

Post a comment
2014-07-23 9:59 pm
I added the Basic expire code from this tutorial to my htaccess file and the GTMetrix Report is still saying "F" fail on that issue...so it must not be seeing it. Is the code changed to adding expire dates to the headers ? I do add this code to the htaccess file and that the only thing to do ? or is there another step ?
Staff
7,266 Points
2014-07-24 10:35 am
Hello PaulAlford,

Thank you for your question. We are happy to help, but will need some additional information. What is the exact issue and suggestion GTMetrix is giving you an "F" for?

It should begin as soon as you add the .htaccess rule. If you are using a CMS, such as Wordpress, Joomla, or Drupal, it's possible an existing rule in the .htaccess file is interfering with the rule you are adding.

If this is the case, you would instead go to the specific setting/plugin in the CMS, and set it there.

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201635

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!