The Joomla! Community Magazine™

How I Got My Website to Load in 1.29 Seconds

Written by | Monday, 01 July 2013 00:00 | Published in 2013 July
We've been hearing for a while that SEO may be affected by the time your page takes to load - so recently we've started an intensive exercise of getting our websites to load in the absolute minimal 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.29 seconds, so we thought we'd share how we did this. Some of these are Joomla! specific, but the general concepts apply to ANY content management system and any website.
How I Got My Website to Load in 1.29 Seconds image by @Helvecio

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.

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.5 seconds AND get at least 85% on both Pagespeed and YSlow.

Our end result is a load time of 1.29s, total page size of 149KB and total number of requests being 28. Not too bad :)

On to the nitty gritty...

Step 2: Enable the default Joomla Cache

This is pretty simple, however it is VERY effective. Mostly 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 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 website. 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 4: 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.

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

Other values you might want to consider:

1 YEAR:

Header set Cache-Control "max-age=29030400, public"

1 WEEK:

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 5: 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 uncompressed 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 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 of the plugin:

"This plugin combines your external JavaScript and CSS files into one to minimize expensive http requests. These files can be minified and gzipped to reduce bandwidth and further optimize download time."

Step 7: MINIFY the content of your site - give your site a Crash Diet

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 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 your 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 and the size of the 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 CDN

Content Delivey Networks are servers which cache a copy of the static parts of your site and can serve it optimally and much faster than your server ever could to your visitors. This will give you another HUGE boost to your page speed. If you can't afford a CDN, sites such as Cloudflare have a FREE 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.

Have you achieved good results with the above recommendations? Share your experience with us in the comments below!

Read 53108 times
Tagged under Administrators, English
David Attard

David Attard

Joomla is something which we've been working with as our web development platform for the last 6+ years ... with as much dedication as possible. Our website (dart-creations.com) contains many free Joomla! resources to help out newbie and advanced Joomla webmasters. Whatever has helped us, we put out on the web in the spirit of helping out with Joomla! since it has provided us with such a great tool.

Follow @dartcreations for more Joomla tips, tricks, extensions and general web design help

avatar
Hi David.

Thanks for a great article. I already have signed up for Cloudflare. I have done most of the things you talked about in your article.

Now i'm only waiting for them to take effect :-)
VOTES:1
avatar
Did you check the actual improvement Ivan? How fast your website loads now compared to before?
VOTES:1
avatar
Hi David.

Sorry for the very late answer. I couldnt see that much of an improvement.
VOTES:0
avatar
Hi,

Thank you for this article.
Got one question: don't you need to do step 7 after each Joomla! Update? I mean all the stuffs removed, are they not reinstalled by an automatic upgrade?

Regards
VOTES:0
avatar
Wow David. Looks like you understand your page speed greatly. I recently wrote a post for Anything Digital that went over page speed. It even mentioned GTMetrix and JCH Optimize and using CDNs and minifying requests. How funny!

A piece of advice when caching, if your site has any kind of contact form on it, there's a good chance it won't perform as a cached page. An example, all Chronoforms forms must be non-cached. JotCache works best for that because you can pick and choose which pages are cached.
VOTES:2
avatar
HOLY CRAP! DUDE!

I followed your suggestions as best I could and went from a 15-20 second load time on my site to under 3 seconds.
VOTES:1
avatar
Great results :)
VOTES:1
avatar
Very interesting reading,
what about DB optimization?
VOTES:0
avatar
Alikon, I tend to believe that database optimizations vary very much from website to website. With regards to Joomla, my knowledge with regards to the database, queries etc is quite limited. I wouldn't be able to determine which queries could be better optimized. I've seen a few articles regarding optimizing the Joomla database, but they were a bit oldish, and it's not something I've experimented much with. If I could get in touch with somebody who is more experienced in that, I'd gladly help out in experimenting.

Database optimization are also something quite hard to do on shared hosting where you can't really see CPU spikes and disk I/O spikes in real-time and thus you can't really be too sure which are queries which are causing performance bottlenecks.

For servers which you have access too, in my past I've used a mixture of database profiling tools and manual optimizations. Leaving a profiling tool such as those supplied with MS SQL Server typically results in good general optimizations. I'm sure there are tools for MySQL too. One would run these for a few days and then get some recommendations for the creations indexes or other optimizations.

As for manual interventions. In general, you would be able to tell which part of site is slow. You profile that part, check which queries are executing and then check each query individually. Once again there are tools which can granularly show which part of SQL query is taking a lot of time and you can then take actions to fix that.

With regards to Joomla, I would assume that this sort of generic database optimization exercise is done prior to releases?
VOTES:0
avatar
And if you are using AdSense and want even further optimizations, Google AdSense have just released an asynchronous loading version of AdSense code!
VOTES:1
avatar
In addition to extensions like JotCache that give you more control over what pages are cached, I found for a site like mine (where typically 70% of visits were just to the homepage and about 85% were to the top 10 pages) I needed a way to cache only those pages (particularly the homepage) and leave everything else as is so I wouldn't run into issues with certain pages that don't work well when cached as Ryan Boog mentions above.

Since there didn't seem to be anything currently available that met that specific need I went ahead and created the Homepage Cache Plugin (which replaces the default System Cache plugin) and specifically only caches your homepage by default (and you can specify additional pages in the plugin configuration if you wish).

Hope someone finds it useful (it's free :-)!

extensions.joomla.org/extensions/core-en...formance/cache/23513
VOTES:0
avatar
Ryan,

I probably did come across your article while doing my own optimizations. Essentially whilst running the website through PageSpeed I did read quite a lot of different articles, and then I bundled all the suggested solutions together to achieve the overall effect. I then documented all of them in a single article which you now can see :) I really don't remember all the sources, so if credit is due to you, then so be it ;)

I've also used various tools, including PageSpeed from Google, Pingdom Tools, YSlow plugin and GTMetrix. My opinion is that GTMetrix gives a good user friendly breakdown. Rather than pointing to all the tools I used, I just thought I'd include the one I thought would be best.

Re your advice, totally agree. My suggestions are generic in nature, and one should ensure that they follow individual advice for individual components such as yours.
VOTES:0
avatar
Dipendra Pradhan Saturday, 06 July 2013
Very needed post.. Thx a lot for posting it and sharing with us....
VOTES:0
avatar
Chamira Athauda Sunday, 07 July 2013
Thank you for a great article, all the essential things in one place!

I have a concern about the part of JCH Optimize which claim to combine JS files to reduce resource call - it never really work on complex sites, especially with templates frameworks. There is always a huge development investment in re-factoring JS if you want to get this working.

As more and more extensions use MooTools and JQuery causing many versions of it to be loaded I think effective management of this is really a must on the Joomla admin side.

There are extensions available for it but it should really be built in to the Joomla Framework, a robust way to manage script libraries.
VOTES:0
avatar
Thanks for a great article, I reduced the load time with more than half following the tips in this article.

Best time on Pingdom from Netherlands (I'm in Sweden) were 1.48 sec!


I have a question about the CDN, since my site is in Sweden and 99.9% of the visitors are in Sweden, will aCDN like Cloudfare based in the States make any big difference? I haven't so far noticed much of a gain with it.


Jan
VOTES:0
avatar
This is just great information. I have been focusing much more on load times and this is just the article I needed! I have been able to get load times down to around 2-3 seconds, but 1.5 has been the threshold I have wanted to break.

I would not underestimate clean coding. Especially CSS! Use shorthand where you can. I have noticed that using pre-processors such as LESS and SCSS have been good also....though I am still not as big of fan of using full on frameworks like Bootstrap.

I am psyched to try some of this stuff on a new clients build...I will report my findings!
VOTES:0
avatar
Jan,


CDNs are usually geolocated, so the requests will be served from a server nearer to your visitors typically. I can't vouch for each CDN, but they should at least be geolocated. That is the whole point.

Typically yes the CDN will still provide value, they will serve static content faster (they are optimized to do that), and that will ease the load on your server, leaving it to handle the &quot;real&quot; stuff, rather than become more inefficient by serving something which can be handled by your CDN.
VOTES:0
avatar
In addition to extensions like JotCache that give you more control over what pages are cached, I found for a site like mine (where typically 70% of visits were just to the homepage and about 85% were to the top 10 pages) I needed a way to cache only those pages (particularly the homepage) and leave everything else as is so I wouldn't run into issues with certain pages that don't work well when cached as Ryan Boog mentions above.

Since there didn't seem to be anything currently available that met that specific need I went ahead and created the Homepage Cache Plugin (which replaces the default System Cache plugin) and specifically only caches your homepage by default (and you can specify additional pages in the plugin configuration if you wish).

Hope someone finds it useful (it's free :-)!

extensions.joomla.org/extensions/core-en...s/performance/cache/ 23513
VOTES:0
avatar
Hi David,

Thanks for a good post. Hopefully an easy question for you. Im running a site and have done lots of the optimisation things and have got my yslow and pagespeed scores up to the 85% mark however my page load is still around 5 seconds. Could the quality of my hosting be effecting this rather than anything on the site, and would doing the CDN thing help address this?

Thanks in advance,
Rowan
VOTES:0
avatar
Yes, your hosting server could be affecting the loading times of your site.

However, first things first. Have you enabled a cache? Caching immediately improves the load time by reducing the load on your server. If you haven't yet done that, do that first. Refer to Step 2.

The CDN will help to render static pages, such as CSS, images etc. It won't help with the dynamic rendering, i.e. the content which is coming from your database directly.
VOTES:0
avatar
Fadi (itoctopus) Tuesday, 16 July 2013
1.29 seconds is quite a lot and, if you have about 20,000 articles, then good luck with keeping your website up even with only a few visitors.

Joomla 2.5 is unoptimized - there are some very silly queries especially in the articles.php file under the com_content directory. There is a huge query (that doesn't need to be that huge) that select ALL the fields and all the rows from the #__content table and that is run twice (not once!) - the second one is run for paging.

We have explained this in details here: www.itoctopus.com/how-we-optimized-a-lar...ver-200-times-faster
VOTES:0
avatar
Why not work with the Joomla team to maybe put these optimizations into the official Joomla code? That would make sure your optimization work benefits millions of websites and the whole internet audience in general I would say.
VOTES:0
avatar
Hi,
Thanks for all the info I am still reading but it already helped. I was looking for some time now and found it on your website, just great.
VOTES:1
avatar
Fadi,

my suggestion would be to get in touch with somebody from the Joomla! team and see with them whether they can implement that change. That is the beauty of open source, everybody can contribute :D
VOTES:0
avatar
Not bad David!

We got a GTmetrix score of 98 , a Yscore of 88 and just 20 http objects.
It wasnt done overnight, it tooks lots of hard work but the amount of disc space and bandwith saved was great. Also website visitors loved that it was faster too.

Still working on speeding it up (have to do sprites and a few other tweaks).
VOTES:1
avatar
Yeah, a fast website makes absolutely everybody happy :D
VOTES:0
avatar
Knowing almost zero in coding makes me wonder whether i can do this or not especially the minifying step. I've tried to do compress before n some images in the website didn't come out to what i've expected. I think this has something to do with js clash.
VOTES:0
avatar
Most of the above do not involve any coding at all.
VOTES:0
avatar
Great post. How can you improve the very first request? My website doesn't do anything in 2-3s. It is waiting for something, but I couldn't tell what. I disabled most of my pluging, modules, components, that I am not using. When it starts loading, it is fast. But there is an idle time when start loading. How can I reduce that?

thanks,
Gery
VOTES:1
avatar
In all likelihood your server is a shared hosting server and is under stress - that's why it takes such a long time to reply.

Check out for our experience with good web hosting companies.

David
VOTES:0
avatar
One of the things that you don't mention about JCH Optimize is the fact that you have to include the CSS and Javascript using Joomla's system codes ($doc->addScript() or $doc->addStyleSheet()); you can't just write the CSS into the templates, but they have to be included into the .

Below is the link to Joomla docs on how to do so:
docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page

Here's our take on JCH Optimize:
y-designs.com/support/tutorials/how-to-u...our-joomla-site.html

Also, if you use K2 and CSS4K2 plugin you might want to check this out:
y-designs.com/support/tutorials/how-to-i...e-css4k2-system.html
VOTES:0
avatar
Thank you for a [size=large][/size]Helpful article.
VOTES:-2
avatar
Wow, its really the one the best post i ever read on this topic. The steps which you have mentioned are really perfect.
VOTES:3
avatar
thanks for this article
VOTES:1
avatar
this is great
VOTES:1
avatar
i wan't you to check my website
if i enable the cache (both) it break
my site sometime open under 1.29 other time it just loop
you have to refresh it to work. It's bizarre and i need help

thank
VOTES:0
avatar
thanks for this very useful article..!!!!!!
VOTES:1
avatar
Now our site is loading much faster than before..Thanks a lot man
VOTES:1
avatar
I'd also recommend to compress all images with optimizilla.com
VOTES:0
avatar
Paul Henry Leonard Smith Friday, 16 May 2014
My joomla website loads in under a second now
VOTES:1
avatar
it is working. thanks a lot. now site is loading like html site. thankyou
VOTES:0
avatar
I am building (development phase) a Social Network site on Joomla 3 with Easysocial, Easyblog and EasyDiscuss as main extensions, using it on a shared host which has Varnish cache (static+dynamic) enabled and I am looking forward to use AWS storage and CDN.
My question is : What is the best speed optimization could be in this scenario. As main component would be creating dynamic content by users frequently and some instant features like chat, like, comment, friend request etc is included .
Previously I have activated CloudFlare free version to test leaving default settings and some features either was not working or working after 2-3 min. Please suggest me ? Also if possible suggest possible cache time, htaccess config, Etag options etc, whatever needed.
Thanks.
VOTES:0
avatar
We are using rockettheme for our websites ... Using JCH Optimise options doesnt help for these heavy because as soon as we turn the options of this plugin the site looks really bad . We had to add custom rules in .htaccess files for loading our site fast . Your article was also helpful to us . Will follow it in future . Thanks !
VOTES:0