Team EaSE Article: Beauty is more than skin deep!

Written by | 01 July 2010 | Published in 2010 July
When shopping for Joomla! templates, users very often make their choices based entirely on the look and feel the template presents for their content. A user visits the demo pages of a few template manufacturers, looks around and picks a design to represent the content of a new or existing Joomla! web site. What is often overlooked are the ways in which a template is more than skin deep. A template is much more than a web site design: it actually defines the way the web site elements such as HTML, images, Cascading Style Sheets (CSS) and JavaScript are sent to the web browser. Have you considered the impact of the these elements to your overall user experience?

While design choices are influenced by subjective decisions of preference and taste, a lot of the interaction a visitor to your Joomla! web site is determined by how such elements are delivered to the browser—for instance, the loading speed of your page.

Though you may not realize it, the first experience that visitors have with any web site is… waiting! When visitors click on a link, or type in a URL, they must wait for the page to load in their browser. If they are kept waiting for too long they will either abandon the web site and look elsewhere, or will raise their expectations—and possibly be disappointed when the web site finally loads. For web builders and webmasters, it's a top priority to keep loading time minimal. But how do templates impact your web site's load speed?

How Browsers download a page

To answer this question, let's consider how web browsers understand and download a web page. When visitors arrive on a web site, the first thing their browsers download is that web site’s HTML code, which for us is generated by Joomla! itself. As this begins downloading, the browser parses it (that is, converts this code into the web page we expect to see) and looks for references to external files. When it discovers one of these, for instance a CSS or JavaScript file, it will download and parse it. In fact, as soon as it discovers one or several JavaScript files, a browser will put all the other downloads for a page on hold until it is finished downloading every JavaScript files. As the downloading progresses, the browser parses CSS files and continues to load the images that are included.

While that may sound very straightforward and simple, browsers have a limited capacity to download multiple files at the same time. By default, modern web browsers have four “download slots” per Internet domain: they will download only four files from your site concurrently. As a consequence, the more CSS and JavaScript files a web site has, the slower it will load. But when several CSS files are combined into one file, even if this does not reduce the overall file size a significant amount of download time is pared away—even as much as 100 milliseconds per file. The same is true for JavaScript files, but the gain in speed is even better because JavaScript files actually block all other downloads until they're complete.

Minify & Compress: your visitors will reward you

As you may have realized, most of the CSS, JavaScript and image file references that a browser has to parse are the those used by your Joomla! template on you website. A well-designed template will use a minimal number of distinct files, and each file will be “minified” (a fancy way to say that most spaces and line breaks are stripped out) or even compressed, which minifies both the number of files and the total file size your user’s browser must download.

Does this make any difference? Not in your search rankings: the effect of page load time in that area is negligible. But it makes all the difference to your users! If your site loads in just five seconds on an average connection and a competitor's website takes 10 seconds or more to load, visitors will prefer your site because “it feels faster”. Fast-loading pages also encourage visitors to delve more deeply into your content and spend more time on your website, learning more about what you offer in the process. Your template thus has very big impact on the visitor's experience.

The next time you choose template for your web site, make these factors part of your evaluation. You may find that a simple but fast-loading template fits your needs, while a template that is very feature-packed will result in your visitors unhappy with long page loads speeds. When selecting a template, remember: beauty is more skin deep.

Further Reading

We've barely scratched the surface with this article. If you’re interested in learning more about the differences between an underperforming web sites and a blazing fast one, a good place to start is Yahoo! Developer Network's “Best practices for speeding up your web site”.

Please speak up! Leave your thoughts about this article in the comments. Friendly debate is welcome!

Read 27807 times Tagged under Extensions and Services Evaluations
Nicholas K. Dionysopoulos

Nicholas K. Dionysopoulos

A Mechanical Engineer turned web developer I am mostly known as the lead developer of Akeeba Backup, the leading open source backup solution for Joomla!. When not working on my flagship software I enjoy squashing Joomla!bugs, writing articles about Joomla!, helping out with this magazine and playing the guitar.