How I got my website to load in 1.29seconds


Published on
A number of optimizations you can and should to make sure your Joomla (or any other CMS) website loads as quickly as possible

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How I got my website to load in 1.29seconds

  1. 1. How I got my website to load in David AttardWeve been hearing f or a while that SEO may be af f ected by the time your page takes to load - sorecently weve started an intensive exercise of getting our website to load in the absolute minimal timepossible. Our belief is that the current load speed and rating in GTMetrix is relatively good 85% f orPageSpeed, and 95% f or YSlow Grade and a load time of 1.29seconds, so we thought wed share howwe did this. Some of these are Joomla! specif ic, but the general concepts apply to ANY contentmanagement system and any website.Bef ore you begin: Run your website through GTMetrix. Take note of your current grade and then watch itimprove. The good thing is that GTMetrix tracks your history too so you can see a graph with yourimprovements!STEP 0: TAKE FULL BACKUPS - Some of the f ollowing recommendations may break your site. Takef requent f ull backups bef ore making any changes.Step 1: Set yourself an ambitious target and fixate on it until you get itThis is an absolute must. If you dont have a target, then youre unlikley to keep pushing. You must yourset yourself an ambitious target and strive to achieve it BEFORE you start optimizing. For us, our targetwas to reduce the load time of the f rontpage to less than 1.5seconds AND get at least 85% onboth Pagespeed and YSlow.Our end result. Not too shabby :)Step 2: Enable the default Joomla CacheThis is pretty simple however it is VERY ef f ective. Mostly this is because rather than running the samequeries over and over again against your database, the cache stores a copy of your page and serves itf rom a temporary f ile. This eases the load on your server and improves the general load time of yourserver. To enable your cache do the f ollowing:System > Global Conf iguration > SystemSwitch Progressive Caching On, and set the cache expiry to 60 minutes especially if your content doesntchange too of ten.Step 3: Enable GZIP CompressionThis step ensures that the content you generate is compressed bef ore it is sent. The logic is verysimple, it takes much less time to compress and decompress content rather than transf erring large
  2. 2. pieces of content. This is something which can also be done easily in Joomla 3 with the f ollowing:System > Global Conf iguration > ServerSwitch GZIP compression to YES.Step 4: Enable the System - Cache pluginThis plugin caches each whole page on your site and optionally recommends to your browser and thispage should be cached f or some time. Browser side cache makes a lot of sense especially because youwont need to redownload certain images and f iles over and over again. The browser will use the localcopy and thus less data transf er is required and hence your pages load f aster. This is especiallyef f ective f or stuf f such as the CSS and images of your stylesheet. This is also standard Joomlaf unctionality enabled via the f ollowing:Extensions > Plugin Manager, search f or Cache and enable the System - Cache plugin. You should alsogo to the Basic Options of the plugin and set it to YES.Step 5: Leverage Browser Caching at the server levelThis is very similar to Step 3, and is strictly related to Browser caching. However this is done at theserver level. Basically, youll need to recommend to the Browser to cache certain f iles types f or a specif icamount of time. Google PageSpeed suggests at least ONE MONTH. To do this, you will need to edit the.htaccess f ile to the f ollowing. The max age value is 1 month in seconds.<FilesMatch ".(ico|pdf |f lv|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 f ile types, but the above are the most common static f ileswhich can and should be cached.Step 6: Install JCH_OptimizerJCH Optimizer contains a HUGE number of recommended stuf f by PageSpeed and results in a hugeboost in your PageSpeed grade. The problem you might encounter is that this may break some of thef unctionality on your website. Tread caref ully with the options you enable. For our site we managed toenable nearly all optimizations with very f ew exclusions - but f or your site, you might have to play aroundf or a while to f ind the optimal settings. Describing JCH Optimizer is a bit beyond the scope of this article,but take our word f or it, install and enable the plugin. You wont regret it.The f ollowing is part of the of f icial description:This plugin combines your external JavaScript and CSS f iles into one to minimize expensive httprequests. These f iles can be minif ied and gzipped to reduce bandwidth and f urther optimize downloadtime.Step 7: MINIFY the content of your siteThis is VERY important. Make and keep your site absolutely lean. This is the one which you should spend
  3. 3. most time on. We spent weeks on this step alone.NB: Tread carefully here. Take full backups before deleting core Joomla! components, modulesand pluginsDo this with until you exhaust yourself . Really, do this. Remove ALL stuf f which you are not using. Evenstuf f which comes as def ault but which you wont be needing, such as the def ault template which youwont use ever again, the web links components which you are probably not using, the newsf eedscomponents if you are not using them, and ALL the plugins which you will never use. Uninstall them, notjust disable them. Obsessively f ocus on stuf f which you dont need, remove all the extra components,and combine modules and plugins if possible. E.g. f or social buttons use 1 plugin f or everything. If youhave custom html, put as much of it into a single module as possible. Delete extra f orum categories, andminif y 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 f ocus should beto get things down to an absolute minimum required f or your site to exist. Do this obsessively f or anumber of weeks. Go on a deletion spree, chop and remove, disable and uninstall. Focus on making yousite as lean as humanly possible without breaking anything.Unf ortunately, we did not keep track of the stuf f we removed.Step 8: MINIFY the total number of requests.Remove extra images which are superf lous. Host a version of any images which are served f rom externalwebsites and link to a copy on your site (this will reduce the number of DNS lookups which your clientsbrowser will need to perf orm since these have a severe impact of the page speed of your site). Analysein detail what the requests are with GTMetrix or Pingdom perf ormance tools.GTMetrix also has a cool f eature which will optimize the size of all your images. Save the versions whichhave been optimized and use the optimized versions in your website.Step 9: Serve content from a CDNContent Delivey Networks are servers which cache a copy of the static parts of your site and can serve itoptimally and much f aster than your server ever could to your visitors. This will give you another HUGEboost to your page speed. If you cant af f ord a CDN, sites such as Cloudf lare have a FREE plan, whichwill serve the needs of most small websites.Step 10: Follow each recommendation on PageSpeed, YSlowBoth PageSpeed and YSlow have a number of detailed recommendations, such as specif iying a def aultcharacter set and ensure you have specif ied image dimensions (specif y the width and height f or eachimage in your website). For any content which is hosted on your site, f ollow each of these to the letter. Ifyou have no clue what you need to do, Google is your f riend, read about it and understand it and actionit on your website. Avoid bad requests, i.e. make sure there are no images or f iles which are incorrectlylinked. Some can be quite dif f icult to do unless you really know what you are doing (e.g. CSS sprites - wenever were able to get this to work). Loads 3rd party scripts such as Facebook, Twitter, Adsense andGoogle Analytics asynchronously. There are many f airly easy optimizations which you can do.PS. There might be recommendations which you cannot f ollow f or content which is hosted outside ofyour control. E.g. AdSense, Facebook, and other scripts all have some optimizations they can make. Youdont have much control over these. The good thing is that your CDN might also have optimizations f or3rd party content too. If not, dont worry too much about them.If you keep iterating with optimizations, you should eventually arrive at a point where your site becomeslightning f ast.Have you achieved good results with the above recommendations? Share your experience with us in thecomments below!David AttardJoomla is something which Ive been working with as my web development platf orm f or the last 6+ years... with as much dedication as possible besides my f ull time job in security. My website contains many f reeJoomla! resources to help our newbie and advanced Joomla webmasters. Whatever has helped me, I put
  4. 4. out on the web in the spirit of helping out with Joomla! since it has provided me with such a great tool.Website:< Prev Next >