Tags: image

2686

sparkline

Thursday, September 24th, 2020

Performance and people

I was helping a client with a bit of a performance audit this week. I really, really enjoy this work. It’s such a nice opportunity to get my hands in the soil of a website, so to speak, and suggest changes that will have a measurable effect on the user’s experience.

Not only is web performance a user experience issue, it may well be the user experience issue. Page speed has a proven demonstrable direct effect on user experience (and revenue and customer satisfaction and whatever other metrics you’re using).

It struck me that there’s a continuum of performance challenges. On one end of the continuum, you’ve got technical issues. These can be solved with technical solutions. On the other end of the continuum, you’ve got human issues. These can be solved with discussions, agreement, empathy, and conversations (often dreaded or awkward).

I think that, as developers, we tend to gravitate towards the technical issues. That’s our safe space. But I suspect that bigger gains can be reaped by tackling the uncomfortable human issues.

This week, for example, I uncovered three performance issues. One was definitely technical. One was definitely human. One was halfway between.

The technical issue was with web fonts. It’s a lot of fun to dive into this aspect of web performance because quite often there’s some low-hanging fruit: a relatively simple technical fix that will boost the performance (or perceived performance) of a website. That might be through resource hints (using link rel=“preload” in the HTML) or adjusting the font loading (using font-display in the CSS) or even nerdier stuff like subsetting.

In this case, the issue was with the file format of the font itself. By switching to woff2, there were significant file size savings. And the great thing is that @font-face rules allow you to specify multiple file formats so you can still support older browsers that can’t handle woff2. A win all ‘round!

The performance issue that was right in the middle of the technical/human continuum was with images. At first glance it looked like a similar issue to the fonts. Some images were being served in the wrong formats. When I say “wrong”, I guess I mean inappropriate. A photographic image, for example, is probably going to best served as a JPG rather than a PNG.

But unlike the fonts, the images weren’t in the direct control of the developers. These images were coming from a Content Management System. And while there’s a certain amount of processing you can do on the server, a human still makes the decision about what file format they’re uploading.

I’ve seen this happen at Clearleft. We launched an event site with lean performant code, but then someone uploaded an image that’s megabytes in size. The solution in that case wasn’t technical. We realised there was a knowledge gap around image file formats—which, let’s face it, is kind of a techy topic that most normal people shouldn’t be expected to know.

But it was extremely gratifying to see that people were genuinely interested in knowing a bit more about choosing the right format for the right image. I was able to provide a few rules of thumb and point to free software for converting images. It empowered those people to feel more confident using the Content Management System.

It was a similar situation with the client site I was looking at this week. Nobody is uploading oversized images in order to deliberately make the site slower. They probably don’t realise the difference that image formats can make. By having a discussion and giving them some pointers, they’ll have more knowledge and the site will be faster. Another win all ‘round!

At the other end of continuum was an issue that wasn’t technical. From a technical point of view, there was just one teeny weeny little script. But that little script is Google Tag Manager which then calls many, many other scripts that are not so teeny weeny. Third party scripts …the bane of web performance!

In retrospect, it seems unbelievable that third-party JavaScript is even possible. I mean, putting arbitrary code—that can then inject even more arbitrary code—onto your website? That seems like a security nightmare!

Remember when I did a countdown of the top four web performance challenges? At the number one spot is other people’s JavaScript.

Now one technical solution would be to remove the Google Tag Manager script. But that’s probably not very practical—you’ll probably just piss off some other department. That said, if you can’t find out which department was responsible for adding the Google Tag Manager script in the first place, it might we well be an option to remove it and then wait and see who complains. If no one notices it’s gone, job done!

More realistically, there’s someone who’s added that Google Tag Manager script for their own valid reasons. You’ll need to talk to them and understand their needs.

Again, as with images uploaded in a Content Management System, they may not be aware of the performance problems caused by third-party scripts. You could try throwing numbers at them, but I think you get better results by telling the story of performance.

Use tools like Request Map Generator to help them visualise the impact that third-party scripts are having. Talk to them. More importantly, listen to them. Find out why those scripts are being requested. What are the outcomes they’re working towards? Can you offer an alternative way of providing the data they need?

I think many of us developers are intimidated or apprehensive about approaching people to have those conversations. But it’s necessary. And in its own way, it can be as rewarding as tinkering with code. If the end result is a faster website, then the work is definitely worth doing—whether it’s technical work or people work.

Personally, I just really enjoy working on anything that will end up improving a website’s performance, and by extension, the user experience. If you fancy working with me on your site, you should get in touch with Clearleft.

Tuesday, September 15th, 2020

Checked in at St George's Inn. Beer in the sun 🍺 ☀️ map

Checked in at St George’s Inn. Beer in the sun 🍺 ☀️

Monday, September 14th, 2020

Let’s go.

Let’s go.

Saturday, September 12th, 2020

Checked in at Blakers Park. Tunes 🎶 — with Jessica map

Checked in at Blakers Park. Tunes 🎶 — with Jessica

Wednesday, September 9th, 2020

AVIF has landed - JakeArchibald.com

There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.

Monday, September 7th, 2020

Checked in at Duke of York's Picturehouse. A cinema to ourselves for T E N E T — with Jessica map

Checked in at Duke of York’s Picturehouse. A cinema to ourselves for T E N E T — with Jessica

Checked in at The Eagle. Outdoor Thai food for lunch — with Jessica map

Checked in at The Eagle. Outdoor Thai food for lunch — with Jessica

Tuesday, September 1st, 2020

Checked in at Shelter Hall Raw. Beer on the beach — with Jessica map

Checked in at Shelter Hall Raw. Beer on the beach — with Jessica

Checked in at The Eagle. Outdoor refreshment map

Checked in at The Eagle. Outdoor refreshment

Tuesday, August 11th, 2020

Checked in at Shelter Hall Raw. Having a beer on the beach — with Jessica map

Checked in at Shelter Hall Raw. Having a beer on the beach — with Jessica

Monday, August 10th, 2020

I can’t wait to see @IreAderinokun’s talk at An Event Apart next Monday, August 17th! https://aneventapart.com/event/online-0820 I get to sneak in for free ’cause I’m speaking, but you can get a $50 discount with the code AEAJER.

I can’t wait to see @IreAderinokun’s talk at An Event Apart next Monday, August 17th!

https://aneventapart.com/event/online-0820

I get to sneak in for free ’cause I’m speaking, but you can get a $50 discount with the code AEAJER.

Sunday, August 2nd, 2020

Checked in at The Hartington. Sunday roast — with Jessica map

Checked in at The Hartington. Sunday roast — with Jessica

Friday, July 31st, 2020

Checked in at Pelicano. Iced latte — with Jessica map

Checked in at Pelicano. Iced latte — with Jessica

Sunday, July 26th, 2020

Checking out the charts for my websites/PWAs on the Lighthouse hit parade…

Checking out the charts for my websites/PWAs on the Lighthouse hit parade…

Thursday, July 23rd, 2020

Had a lovely evening stroll with fellow Clearlefties—so nice to see them in a non-screen context!

Had a lovely evening stroll with fellow Clearlefties—so nice to see them in a non-screen context!

Sunday, July 19th, 2020

Coldwater.Science

The World Ocean is as close as you can get to outer space without leaving Earth. It’s an entirely different universe, nothing like the life we have on land.

Saturday, July 18th, 2020

Reading Purple People by Kate Bulpitt.

Reading Purple People by Kate Bulpitt.

CSS photo effects - a Collection by Lynn Fisher on CodePen

These wonderfully realistic photo effects from Lynn are quite lovely!

Friday, July 17th, 2020

Checked in at Pelicano. Iced latte — with Jessica map

Checked in at Pelicano. Iced latte — with Jessica

Having an iced latte in the sun.

Having an iced latte in the sun.