Author Archives: Robin Osborne

Save 24% With The Last Frontier of Minification: HTML!

As a web developer, front end developer, or web performance enthusiast (or all of those), it’s likely that you’re already minifying your JavaScript (or uglifying it) and most likely your css too.

Why do we do this?

We minify specifically to reduce the bytes going over the wire; trying to get our websites as tiny as possible in order to shoot them through the internet faster than our competitor’s.

We obsess over optimising our images, carefully choosing the appropriate format and tweaking the quality percentage, hoping to achieve the balance between clarity and file size.

So we have teeny tiny JavaScript; we have clean, minified, uncssed css; we have perfectly small images (being lazy loaded, no doubt).

So what’s left?…

The ever-overlooked … HTML minification!

Thats right! HTML! BOOM!

Seriously though; HTML may be the one remaining frontier for optimisation. If you’ve covered off all the other static files – the css, js, and images – then not optimising html seems like a wasted opportunity.

If you view the source of most websites you visit you’ll probably find line after line of white space, acres of indents, reams of padding, novels in the forms of comments.

Every single one of these is a wasted opportunity to save bytes; to squeeze the last few bits out of your HTTP response, turning it from a hulking oil tanker into a zippy land speeder.

Continue reading →

Getting Browser Location in Chrome and Deprecating Powerful Features on Insecure Origins

A while ago I created the most useful web page I’ve ever written; an extremely basic page to list the bus arrival times, based on your current location anywhere in London!

I have used this page several times a day on an almost daily basis since I created it, as does my wife; every morning we need to know when the next bus will arrive near our house in order to know when to rush out with our children to take them to school.

I used it every morning to check if I needed to rush out the door to catch the rare “express” bus that would get me to the tube much quicker than the usual one.

I discovered just how useful it is whilst in a pub, deciding whether I had time for another drink before heading home; a quick glance at my phone and I could find out that the next bus home wasn’t for 20 minutes – plenty of time!

However, recently it stopped working for me. It still worked just fine on my wife’s iPhone (and hence Safari), but not on my Nexus (Chrome). It works on my laptop too, or at least appeared to.

So what’s going on?

Continue reading →

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 →

Client Hints in Action

Following along from my recent post about responsive images using pure HTML, this post is about the more server-centric option. It doesn’t answer the art direction question, but it can help reduce the amount of HTML required to implement fully responsive images.

Client hint example site

If you are aware of responsive images and the <picture> element, you’ll know that the code required to give the browser enough choices and information in order to have it request the correct image can be somewhat verbose.

This article will cover the other side of the story, allowing the server to help with the decision of which image to show and ultimately greatly reducing the HTML required to achieve responsive images

Continue reading →

Responsive Images Basics

srcset, sizes, and picture element

The term “Responsive Images” has been in common use for a while now. It refers to the ability to deliver the most appropriate image for the available viewport size, pixel density, even network connectivity.

For example, a Mac with a huge retina display is capable of displaying an extremely high resolution, large, image; whereas a phone in portrait mode on 3G may be better off with a smaller image – both in terms of dimensions and file size – which has been cropped to focus on the most important part of the image.

To achieve this required a significant amount of effort from the Responsive Images Working Group (RIWG) to help get functionality like the <picture> element and support for srcset and sizes attributes on both <picture> and <img /> into major browsers.

srcset

The srcset attribute allows us to define different sources for the same image, depending on the size and pixel density of the device’s display.

srcset’s “x” – pixel density (dpr)

So to display a different image for different pixel densities (e.g. standard definition or high def/retina) we might use something like:

<img src="img-base.png" 
    srcset="img-1x.png 1x, 
            img-2x.png 2x,
            img-3x.png 3x" />

The browser then decides which image to request based on the device capabilities (and potentially connectivity too).

Continue reading →

Achievement Unlocked: OSCON 2015

I’ve recently returned from a fantastic week in Amsterdam for the O’Reilly OSCON conference

OSCON in Amsterdam 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.

Gruesome twosome

I thoroughly enjoyed presenting my Automating Web Performance workshop with the ever-epic Dean Hume at the Amsterdam RAI.

Amsterdam from our OSCON workshop room

Having a dedicated conference venu instead of just using a hotel was a master stroke; the venue was amazing, the wifi always worked, the food was plentiful and regular, our workshop room had a glorious view, and the general colour scheme changed from OSCON red to Velocity Conf turquoise as the conferences switched over mid week.

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)

Palace to Palace 2015 – ACHIEVEMENT UNLOCKED

Recently I completed the 10 year anniversary Palace to Palace cycle ride for The Prince's Trust; a 45 mile "Classic" (or 90 mile "Ultra" if you're crazy) route from Buckingham Palace, along the north side of the Thames, through Richmond Park, and out of West London, through Surrey, and in to Windsor.

Sponsor me and get awesome coffee for £1!

The Night Before

Realising that although the ride itself would be in daylight, it wasn't until the evening before the ride that I realised I'd be riding to the start line in the dark; and none of my lights worked.

A late night wander around West London promptly ensued to every newsagents and corner shop I could find, trying to rustle up a few of those little round batteries; everywhere I went seemed to have sold out! I was a long walk and a late evening before I got home, batteries in hand.

Tip 1: Check your lights and stock up on batteries well in advance..

The Big Day

The BEAST

Previous years I'd wake up and make banana porridge to give me a good start to the day; unfortunately it was always far too hot to eat before I'd have to leave, so I was running on empty before the day had even started!

I found that the same ingredients – plus a few more – could be made into something much more easily consumed on the morning of the ride: a smoothie.

A couple of handfuls of oats, a banana, some frozen berries, and a spoon or two of some sort of nut butter (peanut, cashew, that sort of thing); whizz it in a blender and pop it in the fridge overnight – you can just down it in the morning whilst pulling on your lycra!

Tip 2: Banana + frozen berry smoothie, not porridge

Leaving my house before 6am on Sunday morning, in the dark and the cold, I had a fantastic ride through central London with barely another vehicle around.

I took a few blurry photos whilst riding along my route to the start line; The Royal Albert Hall, Prince Albert Memorial, The Ritz, and Trafalgar Square – all beautiful in the early morning light.

Continue reading →

The Prince’s Trust: Palace to Palace 2015

tl;dr I want your money

Please sponsor me! https://www.justgiving.com/teamadequate

The insignificant detail bit

It’s the 10th anniversary of Palace to Palace – a fantastic 45 mile cycle ride from Buckingham Palace to Windsor Castle, raising vital funds for The Prince’s Trust.

The Prince’s Trust supports 13 to 30 year-olds who are unemployed and those struggling at school and at risk of exclusion. Many of the young people helped by The Trust are in or leaving care, facing issues such as homelessness or mental health problems, or they have been in trouble with the law.

The Trust’s programmes give vulnerable young people the practical and financial support needed to stabilise
their lives, helping develop self-esteem and skills for work.

Three in four young people supported by The Prince’s Trust move into work, education or training. The Prince of Wales’s charity has helped 750,000 young people since 1976 and supports over 100 more each day.

The route is a mere 45 miles (but to an untrained body it might as well be a lap of the Earth):
palace to palace route

I’ve been doing this ride for a few years now; back in my heyday I was able to do more than adequate by cycling across London in darkness to the the start line for 7am, get to Windsor by 9.30am, turn around and get back to London in time for a pub lunch and a pint in one hand, head flung back in hearty laughter.

Continue reading →

Is that image a photo?

A very quick hack to check if an image is a photo in C#, using image properties, is to see if there’s a “camera manufacturer” property set:

[csharp]
foreach (var img in Directory.GetFiles(imagedump))
{
using (var fs = new FileStream(img, FileMode.Open))
using (var i = Image.FromStream(fs))
{
foreach (var p in
from p in i.PropertyItems
where p.Id == 271 // manufacturer property
select p)
{
var encoding = new ASCIIEncoding();
var manufacturer = encoding.GetString(p.Value);
Console.WriteLine("Camera make:{0}", manufacturer);
}
}
}
[/csharp]

Learned from a little msdn article; the value 271 is the integer version of the hex “0x010F” in the table of common IDs.