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.
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 joomla extension 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 joomla 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!
Source: http://magazine.joomla.org/issues/issue-july-2013/item/1361-how-i-got-my-website-to-load-in-1-29-seconds
