Layout shifts on page load

( Jakob Nielsen is presenting face-on to a live and recorded Zoom call, holding a paper sign with the words "#8 - Layout shift on page load" printed. )

NARRATOR:

Hello, everyone. Today, we're going to be talking about number eight on NNG's list of top 10 web design mistakes. And this one is layout shift on page load. Now you might've experienced this yourself with just loading up a page and noticing a thing that you're about to click on suddenly shifts because the page hasn't finished loading yet.

Or you might've been spending time in something like your Google Search Console, and having a look at Core Web Vitals, and notice this thing called cumulative layout shift. So it is a metric that Google measures in terms of performance. And there's a lot of things that can contribute to a non-performant score in this regard.

We're going to have a look at one real-world example. This is a tricky one to actually find a site immediately to look through, that's why even if you really wanted to dive deep into the reasons behind this sort of stuff (you can check it out on Google's web.dev material), often they do an animation because it's hard to find a real-world example, but I have found one. So we'll go through that.

( Narrator screencasts the Taswater homepage. )

Take this website here. We fully loaded this page already. So, we understand that we've got a carousel here, "how can we help?". Here are some actions where the user might want to take. Let's just take a moment now to pretend that I'm visiting this site again for the first time and perhaps I want to take one of these actions.

Okay, the page is loading and notice that flicker, I'm not sure it is quite quick sometimes notice that flicker that the whole section actually pushed down while this whole carousel menu was trying to load. I'll try and replicate that again for you.

Notice the jump. So it is subtle, but it is quite jarring. So from an aesthetics point of view, it does look a little bit jarring. And, like I said, if the user wanted to immediately update their details or was actually on a slower connection, they might have had some time to look at these options, about to click "update my details" if that's what they wanted to do, and actually have the page change on them.

To demonstrate that a little bit more clearly, imagine if you were on a mobile phone. So let's do that on their mobile perhaps, and we'll throttle this to have a look at maybe you're in a poor reception area so you're still on a 3G, kind of network speed.

Again, we've seen the image carousel. We know that "update my details" is down here. But when I first load this page for the first time, I actually do spend some time here. I'm about to be able to click it, everything's loading, and then it shifts. So that's what it means by layout shift.

This is why Google scores it as important because it is an impactful user experience and is one of the reasons why Jacob Nielsen puts it on his top 10 lists of things to hopefully avoid.

Hope that was helpful. Ciao.