ciplogic.com
Live with grace. Write superb software.

When creating websites performance is one of the main concerns that must be addressed. Fortunately with tools such as Google Page Speed measuring performance, with concrete actual improvement steps that can be taken. So when I've seen that the performance of this website was in the gutter, I know I had to take concrete actions:

1. Compression

The first quick win for a site is to activate compression.

I use regular Apache, so in my httpd.conf I just added:

AddType font/truetype .ttf
AddType font/opentype .otf
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE font/truetype
AddOutputFilterByType DEFLATE font/opentype

On the google's page insights, this alone increased the score rating of performance with ~10 points. You might wonder why I am setting the compression for text/html in the config file of Apache, instead of setting in the control panel of Joomla. In case the answer is not already obvious, it's because you want to have your configuration centralized, and to cover all possible scenarios, such as Joomla missing some text/html content (e.g. static HTML files) from compressing.

If you stop reading the article now, do take this with you. It's super easy to add, and you get a noticeable performance boost.

2. Custom Template

I used a free template, that was based on bootstrap, and until I started fiddling with it, I had no idea why stuff was so slow.

The problem is that in Joomla, all the modules register whatever javascripts they need into the <head> section of the document, into a <jdoc:head> node, that the joomla templating system will expand to the actual nodes that were registered.

Here's the problem: if you have a Twitter widget that bundles bootstrap, and you also have your theme that bundles its own version of bootstrap, then,well, bad luck, you'll have your jQuery and bootstrap CSS loaded twice, from different places, probably with different versions as well. This is a common problem also for other frameworks, it's a lot like JSF2 deals with things as well.

So the solution becomes either:

  1. creating a theme that knows there will be modules registering the bootstrap support, thus having a flag not to load them,
  2. changing the theme code itself, to not include them (not only this might infringe the copyright, it will cause issues with updates)
  3. creating a custom theme without custom scripts.

I personally favored the third, since loading scripts severely impacts the performance of your page loading.

After a bunch of fiddling, here are my findings for creating a template that is responsive, and is super-super fast:

2.a. Use a CSS authoring framework.

I personally recommend compass, with sass.

You can do it with regular CSS of course, but it will help you tremendously, and keep you sane. You won't write random hex CSS colors again. You can write variables, define a sort of functions (called mixins) that can help you output code, etc.

2.b. Use JavaScript only if you really need it

If you use you need either a new HTTP request, either you need to embed it into your template. Either way it's expensive. Furthermore if you need jQuery, all these will impact your loading times.

2.c. Design mobile first

Write your rules targeting the mobile, and the media queries for the desktop to target the desktop. This will reduce the flickering, and load faster your design.

2.d Measure, Measure, Measure.

If your design is 2kb of CSS, but loads an image of 1MB, then all your hours of work are meaningless, unless you also optimize that image. I can go on and on and on, in regards to sprite optimizations, etc., but this is what measuring tools are supposed to tell you.

Conclusion

Obviously there is still work to be done, but seeing these performance boosts just from the template improvements, looks good.

Here are images with before and after from google page speed measuring:

Before

After

 

Disqus Comments

comments powered by Disqus

Germanium

The one to rule them all. The browsers that is.

SharpKnight

SharpKnight is an Android chess game.

MagicGroup

MagicGroup is an eclipse plugin.