Lazy Loading Images? Don’t Rely On JavaScript!

So much of the internet is now made up of pages containing loads of images; just visit your favourite shopping site and scroll through a product listing page for an example of this.

As you can probably imagine, bringing in all of these images when the page loads can add unnecessary bloat, causing the user to download lots of data they may not see. It can also make the page slow to interact with, due to the page layout constantly changing as new images load in, causing the browser to reprocess the page.

One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them.

If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience.

So everyone should always do this, right?

Before we get on to that, let’s look at how this is usually achieved. It’s so easy to find a suitable jQuery plugin or angularjs module that a simple install command later and you’re almost done; just add a new attribute to image tags or JavaScript method to process the images you want to delay loading for.

So surely this is a no-brainer?

Continue reading

I’ll Be Speaking At OSCON EU

OSCON

I’m lucky enough to have been allowed to speak at OSCON EU this year, with – as per usual – the awesome Dean “Wrote The Book On Web Performance” Hume (that’s his legal full name, thanks to him having actually written a book on web performance).

OSCON – the Open Source Conference – “celebrates, defines, and demonstrates the best that open source has to offer.” From small businesses to the enterprise, open source is the first choice for engineers around the world, and OSCON is the place to celebrate that.

The workshop we’ll be presenting is Automating Web Performance – first thing on Wednesday morning.

As regular readers may notice, I do like my web performance optimisation – in fact, I’ve spoken about it once or twice.

What’s different this year is that .Net is finally open source, so, as long time .net-ers, we felt it was time to spread the .Net love amongst the open source community! I’m really excited for this conference – a different focus (I’m used to almost everyone at the conference talking about a similar thing to me – i.e., web performance optimisation – and the line up at OSCON is exceptionally diverse), a different location (the wonderful city of Amsterdam) and a different format for us (a 90 minute workshop instead of a 40 minute presentation).

We’ll be talking about tech that, although not specific to .Net, can be applied to such web projects – and to pretty much any other tech stack too – in order to reap the benefits of automated web performance optimisation.

We’ll go through automating the optimisation of images, css, javascript, and html, as well as introducing WebP images, critical css, unused css, and ultimately automating the continual testing of these optimisations.

It’s going to be a great start to the third day of the conference; if you’re attending, and you’re looking for something fun to start your last day with, then come and sit in with us – you won’t regret it!

If you’re not already attending and I’ve managed to convince you how wrong you are, then perhaps you’d also like to get 25% discount off of your ticket? How does that sound? And a cookie? Just use the code SPEAKER25 when you buy your ticket for that discount, and come find me at the conference for that cookie. *

(* cookie may not exist; the cookie is a lie)