Add Expires headers

How do I add Expires Header to the .htaccess file?

Is the error “Add Expires headers” displayed in GTmetrix or Pingdom?

What is the Expires header?

What are the steps to add expired headers to .htaccess?

When is the right time to expire files and cache?

Understand how to add Expires headers to the .htaccess file.

One of the most common errors when testing the webpage on Pingdom or GTmetrix is: Add Expires headers.

The error message states that you want to increase the time for the files (images, HTML, CSS, and JavaScript) that remain in your website’s cache. Caching has a direct impact on the load time of your website. The website speed is a very important SEO optimization. Google rates the speed of the site as a significant ranking factor. Website owners who have not optimized their website’s loading speed will not get good results in Google’s search results in “Mobile First” times. Websites that are not optimized for mobile devices in 2019 and do not have fast loading times will hardly be ranked in the search engines by any means.

When a user visits your web site on the web, the browser automatically downloads a set of files. Each of these files has an expiration date and remains in the cache for a specified time. If the user decides to revisit other pages on your website or website, not all files need to be reloaded. If the file expiration time is too short, the “Add Expires Headers” error will be displayed.

How does Expires Header work?

Expired headers command the browser to download and save these files. The reason for this is to reduce the sending and receiving between the computer and the server (ie the website) and to use the cached data.The reason for this is to reduce the sending and receiving between the computer and the server (ie the website) and to use the cached data.

JoeWP WordPress Agentur - Add Expires headers - Pingdom
JoeWP WordPress Agentur – Add Expires headers – Pingdom

This will take a while to load a newly visited web page a little longer than the repeated call. Depending on the website, there are different files such as HTML, CSS, JavaScripts, graphics, images, PDF and other files that belong to the functionality of the website and need to be loaded.

Each time a new user calls your website, all the files are requested by the server. Each request (for each individual file) requires different loading time depending on the greetings of the file. However, storing certain files in memory reduces the number of requests. This will load the website faster.

# How long should the data remain in the cache of the browser?

To prevent users from re-downloading shared files, an expiration date should be defined for these files. The defined expiration date tells the browser which file should be requested by the server and which file should be requested by the cache.

Which files are stored in the cache?

The first step is to determine which files are updated frequently and which are rarely updated.

Files that are rarely updated:
images
videos
audio
the favicon
Web fonts, fonts

Files that are updated more frequently:
Javascript and CSS
Text

How do I add Expires headers to the .htaccess file to avoid the “add expires headers” error?

Add Expires headers to the .htaccess file:
The .htaccess file is often a hidden file in your root directory (root directory). Be sure to back up this file before changing anything. If something goes wrong, you can restore the saved file.

1. Download your .htaccess file. If the file is hidden, enable “Show hidden files” in your FTP.

2. Open your .htaccess file in an editor (Editor or Editor ++) and add your code with the expiration dates. This can be determined individually according to your requirements.

We use e.g. the following code, you can copy it and use it for your .htaccess:

# Expires headers (for better cache control)
<ifmodule mod_expires.c>
        ExpiresActive on
        # Perhaps better to whitelist expires rules? Perhaps.
        ExpiresDefault                              "access plus 1 month"
        # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
        ExpiresByType text/cache-manifest           "access plus 0 seconds"
        # Your document html
        ExpiresByType text/html                     "access plus 0 seconds"
        # Data
        ExpiresByType text/xml                      "access plus 0 seconds"
        ExpiresByType application/xml               "access plus 0 seconds"
        ExpiresByType application/json              "access plus 0 seconds"
        # Feed
        ExpiresByType application/rss+xml           "access plus 1 hour"
        ExpiresByType application/atom+xml          "access plus 1 hour"
        # Favicon (cannot be renamed)
        ExpiresByType image/x-icon                  "access plus 1 week"
        # Media: images, video, audio
        ExpiresByType image/gif                     "access plus 4 months"
        ExpiresByType image/png                     "access plus 4 months"
        ExpiresByType image/jpeg                    "access plus 4 months"
        ExpiresByType image/webp                    "access plus 4 months"
        ExpiresByType video/ogg                     "access plus 1 month"
        ExpiresByType audio/ogg                     "access plus 1 month"
        ExpiresByType video/mp4                     "access plus 1 month"
        ExpiresByType video/webm                    "access plus 1 month"
        # HTC files  (css3pie)
        ExpiresByType text/x-component              "access plus 1 month"
        # Webfonts
        ExpiresByType font/ttf                      "access plus 4 months"
        ExpiresByType font/otf                      "access plus 4 months"
        ExpiresByType font/woff                     "access plus 4 months"
        ExpiresByType font/woff2                    "access plus 4 months"
        ExpiresByType image/svg+xml                 "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
        # CSS and JavaScript
        ExpiresByType text/css                      "access plus 1 year"
        ExpiresByType application/javascript        "access plus 1 year"
</ifmodule>
## EXPIRES END

Short explanation:

The query <IfModule mod_expires.c > checks if the necessary server module is installed.

ExpiresActive On will turn on the module for your webpage, then it will tell you which types of files should be cached and for what period of time. The time is given in the form “from last access for period X”, in the example “access plus 1 weeks” thus “from access for a week”. If the set period has expired, the file in the browser cache will be replaced by the current version of your website.

Make sure that the time is always defined in the majority, so that an “s” is at the end (weeks, months, …). The timestamp values are listed in the official Apache webserver documentation: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

3. After making the changes to the .htaccess file, remember to save it and upload it back to the root of your web site, unless you have made a direct change on the server.

How long should the expiration time of files be set?

The duration of the cache can be set in years, months, weeks, days, hours and even seconds.

The expiration date of each file should be determined based on the time it is used / requested.

The expiration date of images can be set to about a year, as they usually do not change and take up the loading of images most of the time.

HTML, CSS and JavaScript are updated more frequently. The expiration date can be set to one month or less.

JoeWP WordPress Agency - Request

You want us to fix the error in Pingdom or GTmetrix: “Add Expires headers”?

Do you want to start right now? Discuss your project with us!