This article covers topics on improving webpage speeds, more specifically technical SEO of your website after extensive trial and error and how to really get results in your page ranks by improving page loading speed of your website.
If you are fairly technical, you can adapt these to any linux based hosting such as Godaddy or other hosting provider who give you shell access. However, I prefer AWS as it has a region available for hosting directly in Sydney where we operate from. Having hosting closer to the customers is a huge impact on website load speeds and how it impacts your SEO. This article is based mostly on AWS lightsail hosting which is a Bitnami configuration of Apache and WordPress on Ubuntu.
There are several steps and to keep the article current and avoid repetition, I will link sub-sections via Bitnami knowledge base and AWS documentation for brevity’s sake.
Pre-requisite: A functioning wordpress instance
If you haven’t yet setup a secure wordpress AWS instance, have a look at the article on securing and setting up wordpress on AWS Lightsail . While this article can apply to most Ubuntu based WordPress running Apache, it will be easier and relevant if it’s an AWS EC2 or Lightsail instance running WordPress using Bitnami. Also this is for a single site WordPress, I haven’t experimented with multi-site WordPress yet, but most of it should work theoretically.
Measure your current speed
While there are number of tools available to measure website performance, such as Google Pagespeed Insights , GTMetrics and Experte to name a few. My personal preference has been GTMetrics. Once you setup a free account, you can choose location you want to test from. GTMetrics gives you multiple results including google page speed in one report. If you run your website through it and see something like this, it’s quite normal with a fully loaded out of the box WordPress site with plugins and themes enabled.
After careful upgrades and despite having a heavy theme and the infamously slow slider revolution, you can still get decent results such as ours:
UPDATE [31-Aug-2020] - These measurements were taken earlier in the year when we were still on wordpress. Our website is now a static website generated by HUGO and hosted on AWS S3 and Cloudfront and performance impovements are now and even better than above. The is a bit of a learning curve, but the results are well worth it! Check out the guide to build static website using Hugo
Now keep a habit of measuring after each step to see how big of an impact each step provides.
Install Let’s Encrypt SSL for Free
This one is not particularly a speed boost, but almost a requirement for good SEO. Google has almost made it mandatory for websites to rank better by forcing the use of SSL. For the longest time, SSL was paid service (still is mostly) and you spend yearly to renew certificates. In the past it was considered useful for sites transacting data such as credit cards of personal information. Today, it’s required almost for all sites and makes Google really happy; it also does make that green padlock appear on the browser giving extra confidence to your users that you are legit. These days you can get SSL for free, the most popular and automated one on AWS & Bitnami is Let’s Encrypt. It does require you to renew every 3 months, but thankfully Bitnami folks have automated it to auto-renew using a cronjob, all done with a simple command line.
No point reinventing the wheel. Go to the official bitnami link (opens in new tab) for instructions and then come back here for next steps.
Apache Tweaks
Apache out of the box on our AWS Bitnami and most other hosting sites doesn’t come with a few optimisations enabled, albeit, to keep compatibility with really old browsers. There are a few modules that can help you:
mod_expire
Google’s Pagespeed and other speed metrics will penalise your website for not having client side caching of assets (images, scripts). Mod Expire sets HTTP headers for content to expire after a month or a year on client side so revisits by the same browser caches the request on client side and does not make a server side request for that particular asset. This greatly improves performance, bandwidth and data allownance, especially on mobile devices.
mod_deflate
This one compresses pages over http and gets your further good scores on GTmetric. It’s a good thing to have as it uses less bandwidth on your server and makes it faster to load pages on low bandwidth and mobile browsers.
mod_http2
HTTP/2 is successor to HTTP 1.1 and all modern browsers support it. In short it’s faster and better for mobile devices. Even if it doesn’t directly impact your website, it does get a better score and Google really appreciates your website delivering HTTP2 and gives you a better speed rank. To get this on Apache, you need to enable mod_http2
Let’s configure all of these.
Bitnami comes with mod_http2 installed, but not enabled. To enable, follow these steps:
Edit the main config file:
sudo nano /opt/bitnami/apache2/conf/httpd.conf
Uncomment the lines below
LoadModule http2_module modules/mod_http2.so
LoadModule expires_module modules/mod_expires.so
LoadModule deflate_module modules/mod_deflate.so
Add the following at the end of your httpd.conf file and save the file
SetOutputFilter DEFLATE
Now enable it for your specific virtual host
sudo nano /opt/bitnami/apache2/conf/bitnami/bitnami.conf
Your VirtualHost configurations need to have these Protocols line added:
<VirtualHost _default_:80>
…
Protocols h2 h2c http/1.1
</VirtualHost>
…
<VirtualHost _default_:443>
…
Protocols h2 h2c http/1.1
</VirtualHost>
After saving the files, restart Apache to apply the changes.
sudo /opt/bitnami/ctlscript.sh restart apache
Now edit your application specific httpd conf file. In most linux setups, this would simply be .htaccess file, but it’s kind of deprecated in Bitnami.
sudo nano /opt/bitnami/apps/wordpress/conf/htaccess.conf
Add the following in the end of the file (and check if your wordpress folder is same as below):
<Directory "/opt/bitnami/apps/wordpress/htdocs/">
# Enable expiry of assets on client side
<IfModule mod_expires.c>
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 text/html "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 1 month"
</IfModule>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</Directory>
Save the file and exit. Restart Apache and see if mod_http2 is enabled
sudo /opt/bitnami/ctlscript.sh restart apache
sudo apachectl -M | grep http2
If all was well and you made no accidental errors, apache should restart fine, else try and find out the errors and fix them.
At this point, you will want to run another one of the GTMetric test and see if you made a few incremental score improvements.
mod_pagespeed
This is a caching plugin, extremely powerful and enabled by default on AWS Lightsail, EC2 Bitnami. So not much do there. Just so you know it does lazy image loading and optimises images in WebP format on the fly by resizing and compressing. It also has a few other tricks and you can read about it on Apache website. You don’t need to download a lot of wordpress plugins to do this as all they do is enable this in Apache config, which is not required at least on AWS Bitnami instance.
Optimise WordPress with Plugins
Now comes the most powerful of the tweaks. You can seriously improve speeds by just 2 plugins that I use heavily. I have tried a few and after a few hit and miss, I found these two that work the best in giving the highest speed boosts.
Autoptimize and Async Javascript . These plugins will minify (compress) your JavaScript and CSS, combine them where possible to reduce multiple requests and where possible even inline images in CSS to avoid image call requests. The Aysnc javascript lets your experiment with defer or load javascript asynchronously to speed up page load. Both these will have a dramatic impact on your page load scores.
Both are free and have enough juice in free versions to not worry about buying premium features.
Next thing you can do is enable optimise image on the fly using ShortPixel CDN within Autoptimize. It does around 100 images for free and then I think you need to buy a subscription. If you are hosting for just one country or city, then don’t bother as your customers, but if the website is global, this is almost mandatory to improve website performance.
I am not including step by step guide on these as these are fairly simple to use and you need to experiment on your own to find the right balance.
DNS Optimisation
Last one, it had for sure a ~10% impact on my website scores and I was pleasantly surprised at the impact which I assumed would be negligible. This may not be the case depending on geographic areas where you reside and your registrar’s location from your customers. Your website on average sends 50+ requests (albeit some of it cached on client side) in the background and each of them gets a DNS lookup delay if hosted on a cheap and possibly default domain provider. We started our domain hosting with Godaddy and their DNS service was deplorable. After some reading we moved our DNS to AWS Route53 (since we are hosting with them). This made a world of a difference in speed.
The DNS costs on AWS are usually less than a dollar a month for low traffic sites and it’s negligible compared to the benefits.
I haven’t personally tried, but you could try Google DNS or other premium providers prevalent in your region and check out the DNS performance online .
Read more about migrating your DNS to Route53
Summary
If you followed all the tweaks above you would have easily moved your website from D or E to at least B or A in speed metrics. There are recommendations you can individually follow from there but these optimisations would give you a solid foundation on your hosting account. Feel free to contact us for consultancy or if you need to hire us to do this on your behalf for your current website. Please share this article and if possible backlink to this article or to our website as it really helps us grow online.
