Add Expires Headers to Improve WordPress Website performance

Sooner or later, you will deal with page speed, loading time, and other performance related subjects. Running developer tools, such as Yahoo YSlow, or Google Page Speed, “Add Expires Headers” can be one advice you won’t miss if you are running website by the default WordPress installation. In Google Page Speed, the term is “Leverage Browser Caching”.

add-expires-headers

A typical WordPress web page contains multiple scripts, stylesheets and images in the page. A first-time visitor to your site may have to make many HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views, thus maks web pages load faster.

Expires headers are most often used with images, but should be used on all components including scripts, stylesheets, and other rich-media components like Flash.

Mod_expires is an Apache Web server module installed on Linux hosting server. The use of Expires header in the HTTP response to tell the client how long a component can be cached. The following example of the ExpiresDefault directive sets an expiration date 1 month out from the time of request.

# Add default Expires Header
<IfModule mod_expires.c>
	# Activate Mod_expires for this directory
	ExpiresActive On
	# Define file extensions
	<FilesMatch "\.(jpg|jpeg|png|gif|js|css|flv|swf)$">
		# Set expiration date
 		ExpiresDefault "access plus 1 month"
	</FilesMatch>
</IfModule>

You can also use ExpiresByType directive to set expiration date based on file type.

<IfModule mod_expires.c>
	# Activate Mod_expires for this directory
	ExpiresActive on

	# Cache common image types for 7 days
	ExpiresByType image/jpg "access plus 7 days"
	ExpiresByType image/jpeg "access plus 7 days"
	ExpiresByType image/gif "access plus 7 days"
	ExpiresByType image/png "access plus 7 days"

	# Cache CSS files for 48 hours
	ExpiresByType text/css "access plus 48 hours"
</IfModule>