Add Expires Headers for Bitnami WordPress on Google Cloud

by Fred Osei
241 views

In this quick tutorial, I will be showing you how to add Expires Headers / Leverage Browser Cache for the Bitnami Version of WordPress on Google Cloud.

What are Expires Headers?

  • Expires headers tell an internet browser how a particular resource should be requested, either from the actual source or from the browser’s cache. When expires headers are set for a resource, the browser stores those resources in its cache for a specified period of time and when a visitor comes back to it before the set expiry time, it loads from the browser or the cache server, therefore rendering a faster load time.
  • Expires Headers not only reduces a load of downloads from the server but also decrease the number of HTTP requests for the server.

How does it work?

  • When your website is visited for the first time, it loads files like CSS, Javascript, and images from the server, these files are then stored in your browser for the timeframe specified by these headers, the next time the user visit your website these files are loaded locally from the user’s browser cache instead of loading it directly from the website as it does fr the first time. This reduces the number of HTTPS requests and saves the server from stress, also serving your website faster than usual.

Adding Expires Headers for Your Website

  • Expires Headers can be set on an individual file or file types. For files that rarely change on your sites, such as your logo or favicon you can set the images to expire at a very later date, for instance, 1 year. For files that change regularly, you can set shorter expire times.

Let’s Get Started

PLEASE NOTE THAT  THIS TUTORIAL IS NOT FOR ADDING EXPIRES HEADERS FOR THIRD PARTY URL’S AND WON’T WORK FOR THEM

Before we start with this tutorial you may want to check with GTMetrix for Expires Headers for your domain name as in the screenshot below by navigating www.gtmetrix.com

As you can see from the Yslow tab in the image below, there’s a recommendation we add expire headers to our website, this tells us Expires Headers are either absent or they are not properly set as required by the Bitnami version of WordPress on Good Cloud.

Let’s get on with it…

ENABLING EXPIRES MODULE

1. Click on the Navigation Menu icon from your Google Cloud Dashboard as shown below.

2. Scroll down a little, point to the Compute Engine link and then click on the VM instances link from the popped menu as shown in the screenshot below.

3. Click on the SSH link next to the instance you want to work with as shown in the screenshot below.

4. Copy & Paste the command line below into your SSH terminal to open the Apache configuration file as in the screenshot below.

sudo nano /opt/bitnami/apache2/conf/httpd.conf

5. Click on the keypad icon right next to the settings icon in the upper right corner of the SSH screen and then click on [Ctrl + W] to open the terminal search tool as in the screenshot below.

6. Type “Expires” in the search field and then hit [Enter] to find the Expires Module as in the screenshot below.

7. In order to enable the Expires Module, uncomment/delete the # situated before the LoadModule as in the screenshot below. Should look like this after you uncomment/delete #

LoadModule expires_module modules/mod_expires.so

Save your changes using [Ctrl + X], respond with [Y] for yes and then hit [Enter] to confirm.

ADDING EXPIRES HEADERS

8. Copy & Paste the command line below into your SSH terminal to open the Apache Application config file as in the screenshot below.

sudo nano /opt/bitnami/apps/wordpress/conf/httpd-app.conf

9. Copy & Paste the code below into your SSH terminal, in-between the lines </IfModule> and <IfDefine USE_PHP_FPM> as in the screenshot below

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

After pasting the above code into the said lines, Save your changes using [Ctrl + X], respond with [Y] for yes and then hit [Enter] to confirm.

10. Copy & Paste the command line below into your SSH terminal to restart the Apache Server for the updated changes to take effect.

sudo /opt/bitnami/ctlscript.sh restart

11. Congratulations on your success adding Expires Headers, go ahead and test your website by navigating to GTMetrix.com, the returned results in the Yslow tab after your test should be as in the screenshot below.

That’s it.

I hope you found this post useful and that you have been able to Enable Expires Module and Add Expires Headers for the Bitnami Version of WordPress.

Drop any questions you may have in the comments section below and I will respond as soon as I can. Remember to like share and subscribe to our Social Media channels (links sidebar and footer). @KwikHacks