We've been hearing for a while that SEO and Joomla SEO may be affected by the time your page takes to load - so recently we've started an intensive exercise of getting our website to load in the absolute minimum time possible. Our belief is that the current load speed and rating in GTMetrix is relatively good 85% for PageSpeed, and 95% for YSlow Grade and a load time of 1.29seconds, so we thought we'd share how we did this. Some of these are Joomla specific, whilst others are generic but the general concepts apply to ANY content management system and any website.
Before you begin: Run your website through GTMetrix. Take note of your current grade and then watch it improve. The good thing is that GTMetrix tracks your history too so you can see a graph with your improvements.
STEP 0: TAKE FULL BACKUPS - Some of the following recommendations may break your site. Take frequent full backups before making any changes.
Reduce Server Response Time
If after running your website through GTMetrix or PageInsights you find a long delay in the initial response - your shared hosting server is suffering. The biggest difference you can make to your website loading fast is to use a recommended Joomla host and improve the server response time. Our recommend hosting service is InMotion, is what we use on this website.
Step 1: Set yourself an ambitious target and fixate on it until you get it
This is an absolute must. If you don't have a target, then you're unlikley to keep pushing. You must your set yourself an ambitious target and strive to achieve it BEFORE you start optimizing. For us, our target was to reduce the load time of the frontpage to less than 1.5seconds AND get at least 85% on both Pagespeed and YSlow.
Our end result. Not too shabby :)
Step 2: Enable the default Joomla Cache
This is pretty simple however it is VERY effective. Mostly this is because rather than running the same queries over and over again against your database, the cache stores a copy of your page and serves it from a temporary file. This eases the load on your server and improves the general load time of your server. To enable your cache do the following:
System > Global Configuration > System
Switch Progressive Caching On, and set the cache expiry to 60 minutes especially if your content doesn't change too often.
Step 3: Enable GZIP Compression
This step ensures that the content you generate is compressed before it is sent. The logic is very simple, it takes much less time to compress and decompress content rather than transferring large pieces of content. This is something which can also be done easily in Joomla 3 with the following:
System > Global Configuration > Server
Switch GZIP compression to YES.
Step 4: Enable the System - Cache plugin
This plugin caches each whole page on your site and optionally recommends to your browser and this page should be cached for some time. Browser side cache makes a lot of sense especially because you won't need to redownload certain images and files over and over again. The browser will use the local copy and thus less data transfer is required and hence your pages load faster. This is especially effective for stuff such as the CSS and images of your stylesheet. This is also standard Joomla functionality enabled via the following:
Extensions > Plugin Manager, search for Cache and enable the System - Cache plugin. You should also go to the Basic Options of the plugin and set it to YES.
Step 5: Leverage Browser Caching at the server level
This is very similar to Step 3, and is strictly related to Browser caching. However this is done at the server level. Basically, you'll need to recommend to the Browser to cache certain files types for a specific amount of time. Google PageSpeed suggests at least ONE MONTH. To do this, you will need to edit the .htaccess file to the following. The max age value is 1 month in seconds.
Header set Cache-Control "max-age=2592000, public"
Other values you might want to consider:
Header set Cache-Control "max-age=29030400, public"
Header set Cache-Control "max-age=604800, public"
You might also choose to cache less or more file types, but the above are the most common static files which can and should be cached.
Step 6: Install JCH_Optimizer
JCH Optimizer contains a HUGE number of recommended stuff by PageSpeed and results in a huge boost in your PageSpeed grade. The problem you might encounter is that this may break some of the functionality on your website. Tread carefully with the options you enable. For our site we managed to enable nearly all optimizations with very few exclusions - but for your site, you might have to play around for a while to find the optimal settings. Describing JCH Optimizer is a bit beyond the scope of this article, but take our word for it, install and enable the plugin. You won't regret it.
The following is part of the official description:
Step 7: MINIFY the content of your site
This is VERY important. Make and keep your site absolutely lean. This is the one which you should spend most time on. We spent weeks on this step alone.
NB: Tread carefully here. Take full backups before deleting core Joomla! components, modules and plugins
Do this with until you exhaust yourself. Really, do this. Remove ALL stuff which you are not using. Even stuff which comes as default but which you won't be needing, such as the default template which you won't use ever again, the web links components which you are probably not using, the newsfeeds components if you are not using them, and ALL the plugins which you will never use. Uninstall them, not just disable them. Obsessively focus on stuff which you don't need, remove all the extra components, and combine modules and plugins if possible. E.g. for social buttons use 1 plugin for everything. If you have custom html, put as much of it into a single module as possible. Delete extra forum categories, and minify the number of items in your menus to the utmost necessary. Delete old users and old contents. Merge and combine sections, categories, menus and anything else as necessary. Your focus should be to get things down to an absolute minimum required for your site to exist. Do this obsessively for a number of weeks. Go on a deletion spree, chop and remove, disable and uninstall. Focus on making you site as lean as humanly possible without breaking anything.
Unfortunately, we did not keep track of the stuff we removed.
Step 8: MINIFY the total number of requests.
Remove extra images which are superflous. Host a version of any images which are served from external websites and link to a copy on your site (this will reduce the number of DNS lookups which your client's browser will need to perform since these have a severe impact of the page speed of your site). Analyse in detail what the requests are with GTMetrix or Pingdom performance tools.
GTMetrix also has a cool feature which will optimize the size of all your images. Save the versions which have been optimized and use the optimized versions in your website.
Step 9: Serve content from a CDNcan't afford a CDN, sites such as MaxCDN have a very cheap plan, which will serve the needs of most small websites.
Step 10: Follow each recommendation on PageSpeed, YSlow
Both PageSpeed and YSlow have a number of detailed recommendations, such as specifiying a default character set and ensure you have specified image dimensions (specify the width and height for each image in your website). For any content which is hosted on your site, follow each of these to the letter. If you have no clue what you need to do, Google is your friend, read about it and understand it and action it on your website. Avoid bad requests, i.e. make sure there are no images or files which are incorrectly linked. Some can be quite difficult to do unless you really know what you are doing (e.g. CSS sprites - we never were able to get this to work). Loads 3rd party scripts such as Facebook, Twitter, Adsense and Google Analytics asynchronously. There are many fairly easy optimizations which you can do.
PS. There might be recommendations which you cannot follow for content which is hosted outside of your control. E.g. AdSense, Facebook, and other scripts all have some optimizations they can make. You don't have much control over these. The good thing is that your CDN might also have optimizations for 3rd party content too. If not, don't worry too much about them.
If you keep iterating with optimizations, you should eventually arrive at a point where your site becomes lightning fast.
Why do you need to make your website faster?
Just in case you needed any convincing, you might want to check out the infographic below to understand how a slow loading website can affect your visitors. Really and truly, if you are using your website to improve your business through sales or otherwise, a slow site is literally burning a hole in your pocket. Users are quite impatient and will abandon your site if it's not snappy enough. You will also of course send a very negative unconscious signal to your visitors. Here are all the negative effects
- Customer satisfaction decreases by 16% if there is a one second delay in page response
- 47% of users expect a site to load within 2 seconds, and will abandon the site if it takes longer than 3 seconds to load
- 50% of users aren't loyal to sites which load slowly
Infographic provided courtesy of Hosting Facts via "How a slow websites burns a hole in your pocket"
Have you achieved good results with the above recommendations? Share your experience with us in the comments below!
How to make your website faster - a final thought
We're hosted on InMotion because we care about our website being really really fast, and we're recommending them because we truly think everybody should too - it will give your website an instant boost. Besides loading faster, their servers are safer and their support is better (they do have to metrics to prove these bold claims). Why don't you do like us and give InMotion a try. You won't have to worry about moving your site, they will do it for you for free. We guarantee you'll never want to go back to your old host. You have a 90-day money back guarantee, so you don't even have to pay them a cent if you don't like what you see ;)