Webstick.blog logo Wordpress, Design, SEO, Speed blog

Add expires headers WordPress [2021] 💥

Add expires headers WordPress


Learn how to add expires headers to WordPress. Expires headers allow web browsers to determine whether to load web pages, such as images, from the visitor's browser cache. Or from your server. These headers can improve your site's performance. We'll be showing you how to add expires headers to WordPress in this article.

How does Wordpress use Expires Headers?

Every file is loaded individually when someone visits your WordPress website for the first time. The web page loading speed is increased by all of these requests from the browser to your WordPress hosting server. Browser caching saves some or all of these files to the visitor's computer. This means that visitors can load the files from their computer, increasing WordPress performance. You might now be asking, "How do browsers decide which files to save and for how long?" Well, here the expires headers are finding their use.

You can set the rules for which files you want to save and for how long. We'll be focusing on expires headers in this article because they are easier to set up for most users. The Expires headers define an expiration date for every type of file in the browser cache. To give the most current version of the page to visitors, the files will be reloaded by your server after that date. This article will show you two ways to add expire headers. For most users, the first method is simpler and more convenient.

1. Using the cache plugin WP-Rocket

WP-Rocket is the most user-friendly WordPress caching plug on the market. It works instantly to speed up your website without the need to configure complicated settings like other caching plugins. WP Rocket is a premium plugin. However, all the features are included in the lowest plan.


Add expires headers WordPress with WP-Rocket


First, install and activate WP Rocket. You can find more information in our step-by-step guide to installing a WordPress plugin. WP Rocket automatically turns on browser caching once it is installed and activated. It will automatically add cache-control headers and expire headers to optimize your WordPress site's speed. This is all there is to it.

We recommend W3 Total Cache if you prefer to use a caching plugin to add expires headings to your website. W3 Total Cache has some of the same features that WP Rocket but is not as user-friendly. Since W3 Total Cache doesn't automatically enable expires headers you will need to enable them manually.



2. Add Expires Headers in WordPress with a Code

You can add code to your WordPress files to add expires headers. This is not recommended for beginners as a mistake in the code can cause serious errors, and even break your site. We recommend backing up your WordPress site before making any changes. Our guide on how you can backup and restore WordPress site provides more information. Let's now look at adding expires headers to WordPress.

Check if your website is running Apache or Nginx (A/B)

First, determine if your website uses Apache or Nginx servers. This is done by opening SSH or Putty on your server and then running this command. If you don't know how to do this, just ask the people that run your server what is used, Apache or Nginx. Changes are always highest that Apache is being used, unless you have an expensive managed Wordpress hosting like WP Engine.


httpd -v

Expect a result like this:


Server version: Apache/***

Also run this command:


Nginx -v

Expect a result like this:


Nginx version: nginx/1.14.0 (Ubuntu)


A. Add Expires Headers in Apache

You need to add the code to your .htaccess file to add expires headers for an Apache server. You will need an FTP client to edit this file. Your .htaccess file will be found in the root folder of your website.


Add Expires Headers in Apache


To add expire headers, you can add the following code to your .htaccess file:


## EXPIRES HEADER CACHING ##

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

## EXPIRES HEADER CACHING ##


B. Add Expires Headers in Nginx

You will need to modify the server configuration file to add expires headers if you are using Nginx to host your WordPress blog. The way you access and edit this file will depend on the host. If you have any questions, you can contact your hosting provider. To add expire headers, add the following code:


location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}
  
location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

This code will determine the expiration times of the various file types. You will notice that images are cached for longer periods than HTML, CSS and JS. This is because images tend to stay the same.



This link gives you today 20% off on the Divi Theme!

Divi



Scroll up