Website analysis tools - results vs. practicality vs. reality - part 2
In our part 1 blog article, we covered the use of analysis tools in search of the holy grail of fully optimised lightning fast performance for your website. In our conclusions, we found things weren't quite as straightforward on the face of it. Lots of effort can go into getting number and figures down, but this can mask what's really happening and create little to no real-world performance improvement - it might even get worse!
That said, we're still in favour of using such tools to highlight the more obvious and easy-to-fix problems. Things like images being uploaded too large, websites not being mobile friendly etc.
However in this part 2, we want to dive a little deeper into the more tricky aspects of optimisation - namely Render Blocking JavaScript, Render Blocking CSS and the mysterious Above-The-Fold
Even to experienced developers, these terms may be unfamliar...they have kind of been coined by Google's Pagespeed Insights tool which carries out the webpage analysis. So let's start with some simpler definitions:
Render Blocking - All websites are made up of many different bits. At their most basic, there is the HTML code and there are usually some images. For tidy, maintainable styling, you'll probably use a CSS file for defining how things should look. Then if you want to do anything interactive, you'll probably use javascript or frameworks like jQuery on top of that, plus a bunch of fancypants plugins to have things dancing around, image slideshows and such like. Some of these things (like CSS and JavaScript) are known as Render Blocking because the browser has to download and process them before it can display your web page. The less render blocking there is, the quicker the browser can start showing something to the person who is browsing the website.
Above-the-fold - This refers to content that your typical visitor will see as they first land on a page. Most websites have scrollbars to show content but this content is hidden away initially because screens and monitors are only so large - so there is usually a cut-off point which is known as the 'fold'. This varies tremendously for all users due to differences in the devices they are viewing the website on. It can even change depending on whether the visitor has browser-furniture enabled such as toolbars and widgets like the Google search toolbar. However as a general rule, the idea of Above-the-fold content is that it is the stuff the visitor sees initially so we need to prioritise getting this to them in a presentable way as quickly as possible. Stuff in the footer, animations and other effects can wait.... or can they?
Design and build strategies
Designers and developers often overlook these concepts initially because they are concentrating on the overall picture - the whole experience. Whilst this is perfectly sensible, it does often mean that it can be difficult to revisit a large and complex website later to reduce Render Blocking speed up access to Above-the-fold content.
We would argue that in today's world, building a website form the ground up with these concepts at the forefront is technically do-able but it may hinder creativity and almost certainly add to the design & development involved. This is because you can find yourself nit-picking over every decision because it may have some performance impact - and as a result, the experience may be too dialed-down to create that amazing first impression.
If you take a look at many car manufacturer showroom websites - they really don't care if they force the visitor to wait a few seconds for their website to load.... because what is most important is the most visually stunning images, a 3D rotatable car which you can customise in different colours, change the wheels etc.
It comes down to the client's priorities, the project budget, skill of the designer/developer and possibly some compromises. Is it possible to have the best of both worlds? Yes, in some cases. We think of it like hand-crafting something. Yes, you can have something off a factory line which has excellent quality, reliability etc, but for that little bit extra TLC, having something hand-made can make the difference - but it takes time and money.
Solutions
The solution will definitely depend firstly upon whether you're starting from scratch or you're trying to retrofit or optimise an existing website. Some of the points below may be more difficult to implement on an existing site without compromising how it loads or looks as it loads.
- Inline Critical CSS - Instead of forcing the web browser to download a 50kb bloated CSS file containing the style rules for an entire website, you can chuck just the basic rules into a <style></style> tag on the page. This achieves two things - firstly, it avoids the browser having to issue another HTTP request to download another CSS file... and all the overhead that goes with that. Secondly, the basic rules will be processed much quicker and the browser can get on with showing the visitor something
- Move CSS / Javascript references to the end of the HTML file - typically just before the </body> tag. This means the browser can load all the HTML first, and things like JavaScript execution is not being waited on before the browser can render the content. The disadvantage of just doing this step is the website may load up initially as 'unstyled', and then moments later will 'snap' into place when all the usual CSS/JS gubbins kicks in.
- Use a preloader - this isn't really a solution, but it does get around the problem of visitors seeing an 'ugly' website for a brief moment before the real thing loads up. A preloader is where a user will see a progress bar, spinner or other interactive element to indicate that something is loading and they need to wait.
- Remove the bloat and unused stuff - it's surprising how many sites have tons of HTML code, CSS and JavaScript which is no longer used. By getting rid of this, there is less data for the browser to load and thus everything happens faster as there is less to get and less to process. A spring clean of a website can be a really nice way of cutting everything down. Rebuilding a site from scratch with the latest techniques can be hugely beneficial in reducing size.
- Minify and compress - We've talked about reducing things, inlining critical CSS etc, but don't forget to minify this once you've done it to squeeze it down even further
It can be done! Here's an example...
We've recently tackled one of our client websites using the above techniques - namely by Inlining Critical CSS. This involved us hand-picking all of the CSS rules which built up the main visible elements Above-the-fold and then including these inline inside a <style> tag within the <head> tag close to the top of the HTML document. We also took the opportunity to clean down the new production CSS file as well as minifying all of the resulting code.
Consider fixing?
Yes, you might spot that there are some points listed above that still apparently 'consider fixing' according to Google. However one of which is there are no browser caching headers on the Google Analytics tracking script that they provide! Not much we can do about that, and it's a little comical that their own tool complains about something which is also their product - get your own house in order Google!
The other point mentioned is minifying the HTML. Whilst this can be a good idea, it does make debugging more difficult and can cause problems with code/markup being incorrectly rendered. So we've opted against this because we're already using compression anyway so the benefit is neglible - and because this site changes frequently, we feel it's better to be able to support it quickly.
Conclusions
Cracking the Render Blocking and Above-the-fold recommendations is definitely a technical challenge, which may be made more difficult by an existing website with potentially bloated HTML/CSS/JS. However with time, budget and patience - improvements can be made to dramatically speed up the load speed of a website - and here's the important bit - so the visitor sees something almost instantly (i.e. within 1 second) with the rest of the site coming along a bit later if necessary.
Unfortunately it's not a 'quick fix' and in some scenarios it may either not be worth it or it may compromise the quality too much depending on the target audience of the website in question.
Best of luck with the optimisation!