For a faster website, "expires headers" may be the answer Most visitors won't wait indefinitely for a given page to load According to a study conducted by Forrester, nearly half of all visitors will abandon pages if they take three seconds to finish …
For a faster website, “expires headers” may be the answer. Most visitors won’t wait indefinitely for a given page to load. According to a study conducted by Forrester, nearly half of all visitors will abandon pages if they take three seconds to finish loading. While you can always upgrade your hosting plan, another way to speed up your website is to use expires headers.
What Are Expires Headers?
Expires headers are Hypertext Transfer Protocol (HTTP) page headers that tell web browsers whether they should download a resource remotely – from your website’s server – or load the resource from a local cache. They are known as “expires headers” because they include an expiration time for resources. After a listed resource has expired, web browsers will have to download it again.
How Expires Headers Work
When you create an expires header for a resource, you’ll essentially enable browser caching for that type of resource. Browser caching eliminates redundant downloads for returning visitors. When visitors land on a page for the first time, their web browsers will download all of the page’s resources.
Browser caching, however, means that web browsers will save cached versions of the listed resource type. When visitors return, the expires header will instruct them to load those resources from a local cache.
All expires headers feature at least one type of resource. You can use them for Cascading Style Sheets (CSS), JavaScript, Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG), Extensible Markup Language (XML) and other types of resources. Expires headers contain one or more types of resources and an expiration date for each type.
The expiration time for a resource type represents how long web browsers will continue to load cached versions of that type before downloading them again. If you create an expires header for JPEG resources with an expiration time of one year, for example, you’ll force web browsers to create cached versions of all JPEG images during their original visit. Web browsers will load these cached versions during all returning visits for the next year, after which they’ll have to redownload them.
Benefits of Using Expires Headers
With expires headers, your website will load faster for returning visitors. Cached versions of resources are exact copies of the resources hosted on your website’s server; they are simply saved locally in web browsers. Expires headers will instruct web browsers to load cached versions of resources rather than downloading them each time visitors access your website.
Returning visitors will experience a significant improvement in load times with expires headers. It takes less time for web browsers to load resources from a local cache than to download them remotely. Locally cached resources, in fact, load almost instantly. Returning visitors will be able to load pages on your website more quickly because their web browsers will already have some of the necessary resources.
Expires headers will lighten the load on your website’s server. Transferring resources is a two-way street. Visitors must download resources, whereas your site’s server must upload those resources. Using expires headers will reduce the number of resources requested by web browsers. Web browsers will already have some resources in a local cache, so they won’t need to download them again, nor will your site’s server have to upload them again.
Because of its positive effects on load times, using expires headers will help your website rank with search engines. Search engines view load times as a factor for organic rankings. They prioritize fast websites by giving them higher organic rankings than slow websites. Using expires headers will significantly boost your website’s speed for returning visitors.
How to Use Expires Headers
To use expires headers, you’ll need to add the appropriate code to the .htaccess file. As long as your website is hosted on an Apache server, it should have this file. The .htaccess file is a plain-text file that supports server configuration commands, including expires headers.
You can typically find the .htaccess file in the root folder. Just connect to your server and open the folder in which your website is stored. You should see a plain text file named .htaccess, which you can edit to use expires headers. If the .htaccess file isn’t present, you can create one with Notepad or any text editor.
The code for expires headers consists of lines for resources and expiration times. You can add it anywhere in the .htaccess file. The code should begin with “ExpiresActiveOn,” followed by a separate line for each resource type and their expiration times. You can see an example at developers.google.com/web/fundamentals/performance/get-started/httpcaching. Under the “Expires Caching” section is an example of the expires headers code that you’ll need to add to the .htaccess file. Use this same format while adjusting the resource times and expiration times.
You can specify expiration times in years, months, or days. One year is typically a good expiration time for most resource types. If you regularly modify a particular resource type, though, you may want to specify a shorter expiration time for it. CSS resources, for instance, are modified more frequently than image and video resources. While a one-year expiration time works well for most other resource types, you should consider using a two-month or shorter expiration time for CSS resources.
Using expires headers won’t change any of your website’s content. It will simply enable browser caching by telling web browsers to create cached versions of resources. Returning visitors will continue to load these locally cached resources until they expire. Web browsers will only download the resources again after they’ve expired.
How to Add Expires Headers to .htaccess on Apache or LiteSpeed Webserver
To add Expires Headers to your site, you need to edit the .htaccess file and add the following code:
## EXPIRES CACHING ##
ExpiresActive On
# Images
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/webp “access plus 1 year”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType image/x-icon “access plus 1 year”
# Video
ExpiresByType video/mp4 “access plus 1 year”
ExpiresByType video/mpeg “access plus 1 year”
# CSS, JavaScript
ExpiresByType text/css “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
# Others
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
## EXPIRES CACHING ##
How to Add Expires Headers in WordPress
There are plugins for expires headers as well. If you have WordPress installed on your website, you can use an expires headers plugin rather than editing the .htaccess file.
You can enable expires headers for different resource types and set expiration times using one of these plugins:
