Leverage browser caching and gzip compression of WordPress website hosted on AWS Bitnami

How to implement browser caching and gzip compression in WP website hosted on AWS cloud in Bitnami Marketplace Application tool?

Caching and gzip compression plays a big role in improving page speed ranking/grade.

Caching website content, such as images, JS scripts, CSS and HTML plays a big role especially now because google has made mobile page speed as a ranking factor.

Page speed is the first step towards Search Engine Optimization (SEO) and to drastically improve website page speed, Leverage browser caching and gzip compression is highly recommended.

Also make sure, you start work on page speed only after site development work is completed. Because once you start caching your site, any future edits may take some time to reflect. You may have to constantly purge cache and at times you may have to clear cache more than once to test your edits. This would lead to slowing work, breaking development flow and end of the day we may feel quite drained and the feeling of nothing constructive happed through the day.

How to implement browser caching and gzip compression in Bitnami WordPress website hosted on AWS cloud?

AWS Bitnami WordPress set up is slightly different from the basic Linux hosting setup. Unlike in shared host, where we edit .htaccess to enable caching, instead here, we edit httpd-app.conf to do the same.

In Bitnami WP, we edit httpd-app.conf and enable expires to implement browser caching. And for gzip compression, we enable deflate module in the same.

Steps to implement leverage browser caching in Bitnami WP website

Step 1: Enable expires module

  1. Connect to your server using FileZilla or any other FTP client
  2. Go to /opt/bitnami/apache2/conf
  3. Download httpd.conf and open it
  4. Search for LoadModule expires_module modules/mod_expires.so
  5. Replace #LoadModule expires_module modules/mod_expires.so with LoadModule expires_module modules/mod_expires.so ( Remove #)
  6. Save and upload the file

Step 2: Add the Expires Headers

  1. Download httpd-app.conf and open it
  2. Copy and paste the code below just above
    <filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
    Header set Cache-Control “max-age=2592000, public”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 text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType text/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 2 days”
  3. Save and upload the file

Step 3: Restart the Apache server

  1. Connect to your ec2 instance using SSH Client, am using PuTTy
  2. Restart Apache using the command sudo /opt/bitnami/ctlscript.sh restart
  3. That’s all! Test the performance see the changes.

Steps to implement GZIP Compression

  1. Open the downloaded httpd.conf
  2. Search for LoadModule deflate_module modules/mod_deflate.so
    Replace # LoadModule deflate_module modules/mod_deflate.so with LoadModule deflate_module modules/mod_deflate.so
  3. Go to the end of the file and add the code given below
    SetOutputFilter DEFLATE
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml# Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
  4. Save and upload the file

That’s it! You have enabled gzip compression module and added the optimization code as well. Test the performance again, you will see that page speed has improved.

Thank you so much for taking time and going through this tutorial, Hope it has been helpful to you.

As you have reached us for this tutorial, you may also be interested to read the below article –
How to easily migrate WordPress website to different domain or host in 3 steps?

Migrating WordPress website can get cumbersome and time consuming depending on the size and intricacies of the site content, such as plugins, images, DB tables and definitely internet speed too.

Read More

You may also like to check our informative blog articles on – WordPress, Branding, Design, Marketing, Online Web Presence and User Experience
Categorized as AWS