Hey everybody, thanks for joining us. You’re listening to episode number 97 of the drunken UX podcast. We’re gonna be demystifying web vitals and page speed and performance issues. We’ve got special guest Erik Runyon joining us all the way from Notre Dame this evening. Ladies and gentlemen, I’m your host, Michael Fienen.

I learned that it was there and not in Nevada. So I don’t know what that says about me. I lived in

If you want to make fun of us, which I highly encourage you to do um you should come and poke at us on twitter or facebook at slash drunken uX or instagram at slash drunken uX podcast. You can also join us on our discord at drunken uX dot com slash discord. Uh make fun of us. Put us down because we don’t know where colleges are and uh you know, there’s just there’s, there’s nuggets of like trivia that if you never have to handle it in your life.

You just don’t know and I guess I just never needed to know or Notre dame was yeah, before we get too far into things. If you are enjoying the drunken New X podcast, be sure to run by our sponsors over at Hi Ed Web now. You have heard us talk about high end with many times they put together a fantastic annual conference every year for higher ed Web development professionals, marketers, accessibility experts and a whole lot more.

Their conference this year is all online. It is october 4th and fifth and their keynote presenter is Shannon cason from NPR so be sure to check them out. You can go get registered by visiting drunken uX dot com slash H E Web 21. That’s drunken ux dot com slash H E Web 21. Um Aaron, I need you to save me from my trivia. Black hole and share with me what it is you are imbibing this evening for this conversation of performance. Uh

cola tonight.

So I have a cola as my stand by drinking a Pepsi man for the most part. So I’ve got that kind of to the side. I am still trying to clear space on my bar so I’m, I’m not going to finish it tonight. But I’m going to put a pretty serious dent in it. I’ve got the end of my bottle of Martin Locke 16 so that’s, it’s a space side scotch. I love this eight. The bottle is beautiful. Um but it’s also known as the Beast of Duff Town.

Yeah, and so I I it’s just, I feel kind of like it’s my my uh my Simpsons scotch, you know like uh why? But it’s, man, it has about the best knows of any scotch. Uh very floral, very fruity. It’s like when you pour it in the glass, you know, you have poured a glass of scotch uh flavor wise, it’s like not anything like crazy out of this world, like it’s not bad, it’s not like great, it’s good, it’s enjoyable, very sweet.

It’s, you know, it is a space side, so it is sweet. Um but I I’m hoping this is the distillers dram editions, the 16 year. I’m hoping I can find another bottle of because it is good enough to keep like on the shelf. So we’ll see, we’ll see where that goes. Um Erik, I’m gonna turn to you now you lifted the glass and I, at first, are you drinking tea? I see something in the glass, that’s what I can tell.

I’m not gonna lie, I don’t know that it sounds super appealing, but at the same time I’m thinking rum and like maple syrup,

I could give that a shot. Like I’ve got a bottle, I haven’t in fact that maybe I’ll have that for the next episode if I, if I remember I’ve got a bottle of Ron Zacapa Xo um, so that’s the

Oh, the mint is what I was saying. Yeah, I thought maybe it was whiskey stones. All I could see. It was like something um, so Erica the voice, the third voice that you’re hearing is Erik Runyon. He is the Technical director for Marketing Communications at Notre Dame. Um he is also as we have referred in the past. He has slide number four on, should I use a carousel dot com?

Thanks to his, some of his research, they broke down just how little people use the slides on caress cells and so we have referred to that and many people have referred to that research over the years. Uh A welcome to the show, Erik, I want to the talk for just a quick second though because you know, technical director, but if I can’t I can’t talk martin locke is taking over my tongue. Um Technical Director for marketing Communications at Notre Dame.

Sounds impressive. I have no doubt. It absolutely is impressive, but I also doubt that you started your life that way. Um I just wanted to ask like how like what was, what was it that got you into like web development, web communications and like where, what did you start out as that got you to where you are now?

Uh huh.

I don’t know if there was such a thing as professional web developers at that time I was going to school for uh it was the music technology degree program. So once I got out of college, my first job was doing audio design for computer games for a company and herb in an arbor

like like chip tune type stuff, you

Very cool. Okay. We’re going to see how this plays out. Uh We wanted to talk about page performance. Now this is a subject we have covered in the past, but we wanted to take a slightly more specific dive into a couple areas. Um specifically it is applied as it applies to google and those are what is page speed and and why should I care about it as a developer and then where we’re really gonna dig in, are these new things.

This new deal that that google has decided is going to be important for the future, which are web vitals. Think of them kind of like just like any other vital in medicine or something like that. There’s sort of a baseline set of metrics that help elaborate on how good is your site, How fast is your site, how usable is your site? The interesting thing about web vitals is this notion that they are kind of using them as a proxy measurement for usability.

Uh They’ve decided that these three different areas represent key things to making sure your site is usable. So we’re going to dig into those what they mean, how they affect your site and how you can measure and improve upon them. Um

by the time you’re listening to this episode, it may very well already be out and rolling at that point. So the the one phrase that a lot of people will probably be familiar with is this phrase page speed.

Not in the abstract sense, but in the sense of the actual thing that google creates called page speed um and you can get the page speed insights report in the, I think it’s in the google search console, um page speed for what it’s worth, this is sort of an always moving target, right?

Uh um if you look into how things are measured and how you’re scoring on different things, you can usually go into your web developer tools in chrome run Lighthouse and we’ll talk about Lighthouse here in a bit um and get a number of scores back basically. Um now what page speed does has changed over time and now correct me if I’m wrong on this Erik but isn’t page speed now basically just a combined abstraction of all of the web vital scores, isn’t it?

Just those combined and sort of remarks or am I thinking about that wrong?

you’ll see all of these as acronyms very frequently and there are more than these as well. But anytime you see something referring L C P F I D C L S that’s what Erik just described. And there’s like I say, there are several more than that as well.

So, well you you mentioned uh let’s let’s start with LCP. Right? Um not SCP s those are weird and creepy. Um, LCP is you mentioned largest content full paint. Right. This is, and I’m going to quote google on this as far as what that means. They say LCP is on the metrics report is the render time of the largest image or text block visible within the view port relative to win the page first started loading.

So it’s basically when is the biggest thing that you can see finally available from milliseconds, zero milliseconds, whatever.

so lighthouse in chrome actually will give you one as well.

GT metrics I think does it as well. And there’s, I think is a little more like they, they overlay the bars of each element as it renders out. And I think that’s kind of nice.

Yeah, yeah. Always correct us if we’re wrong. Um, we’re a couple guys. So that’s all right.

It’s this line and you mentioned like our events that we have access to. Right, so dom content loaded are dumb. Content loaded is very programmatic, opaque black box behind the veil kind of thing, developers get it. We understand when that fires why that fires but a user has no clue and the perception of the page and I think that’s going to be one of the sort of the running themes of web vitals and and how they’re sort of aligned with usability.

Is there high tide somewhat to this notion of how how does the user, how quickly does the user perceive your website, you can make something feel and look very fast even if it’s still very busy in the background doing things. And this is one of those examples.

You can get something painted to the page very fast even if you’re still binding events to different things in the dom you’re still rendering out dynamic content or making api calls all of that stuff can still be happening even though to the user they think it’s done

It is I think worth pointing out to L. C. P. Is very narrowly scoped. It’s not just anything on your page. It specifically applies to image tags, um Image elements, video elements um any element that has a background image that is loaded via a U. R. L. Function. Um This is opposed to like a CSS gradient or like a data encoded image in your CSS. Um And it can also apply to any block level elements that contain any text.

So we’re talking paragraph ties, you know div things like that. So it’s there there is a very sort of limited scope as to what will affect an LCP score will trigger an LCP score. Um So thinking about that we’ve got a limited set of things? We know we need 2.5 seconds. That’s not fooling around. I mean that’s fast.

Um You know what what’s uh what do we figure the average load page pate time is these days it’s like eight seconds, nine seconds um Something in that area 2.5 seconds is super fast. Yeah. What does the does the clock starting

the clock starts? I think from the minute the browser receives its response and starts working.

I’m oh that’s what you’re saying. Uh Honestly I don’t know the answer to that and I’m not gonna I’m not gonna fake it. Um I don’t know. I would have I I would presume it’s probably cause most things you know network wise usually happen at the request time. Right? So like because if you’re sitting there waiting that that wait time factors into any you know performance metric normally. So

Well, but I think that that absolutely matters because it’s all infrastructure. Right. And the user, here’s the thing. And to go back to this notion that this is all about you x and usability. The user has no clue which part of that is slow and they don’t care.

That that would be so that that certainly would be my assumption on that. And if anybody knows offhand, feel free to shoot us a tweet and verify that. But I would bet that that’s got to be from the minute the network traffic starts, the clock starts and it would be my guess if if I wanted to be less lazy I could probably just open up my network tab right now and load a page and just literally watch it load and know the answer.

But I feel like that’s a safe assumption at that point.

course but we all I mean I keep that in my wallet

let him

Mm What can we do then? So if we want to get our LCP score down, let’s say I’ve got a four second LCP and I’m like, man, I’m right on that edge of being poor. I’d like to get that closer to that nice green number. What can we do to improve our largest content for pain?

One of the things though about that, even though the fold is a myth, what is or is not visible to the user isn’t. And now that we have the intersection Observer ap we can do do clever little tricks like say, you know what, let’s not try to request all the images that aren’t visible to the user yet. We could defer those or, you know, lazy load, lazy

those. Yes. Then those aren’t competing for http requests and bandwidth for that user, especially if they’re on like a bad mobile uh network or something like that.

network tab. Right? The network tab of web developer tools. Yeah.

which is huge mind like that, that’s 14 kilobytes. G zipped as well. So usually you compress web pages that’s called G zipping. Um So uh the html itself can be, you know, easily four or 5 10 times that size before G zipping.

Sorry, just fake it force your force your network to be slow and just see if the, what the score is that comes back. You have to be slow a few things. Some other stuff you can do, I think right is and Erik you’re absolutely right when you say like yeah, just the stuff right.

The stuff you do to optimize the site is what will help you here make sure like you if your masthead images a photograph Don’t send over like an un compressed tiff or something as a background image, you know, like making a Jpeg cut it down to like 70%, you know, quality, like make it reasonable.

Yeah.

It needs to be prioritized,

And those are the yeah, the html is nothing by comparison in those cases then quite frequently.

and the other way to get that happening as quickly as possible is to make sure you’re leveraging, cashing and make sure you’re leveraging content delivery, network Cdn.

Um if you’ve got a bigger site or a site that you know, doesn’t have a lot of resources, you can, if you can offload html and imagery to really fast networks that have it pre cached at nodes close to the user, these are all things that make sure that person gets that information as fast as possible so that it can get painted as quickly as possible.

Okay. Web vital number two this one is actually one of the weirder ones, it’s probably the one I like the least because it’s a little confusing, shall we say? That’s first input delay. F I. D. Um Again from google they say F. I. D. Measures the time from when a user first interacts with the page I. E.

When they click a link, tap a button or use a custom javascript powered control to the time when the browser is actually able to begin processing event handlers in response to that action. Um Now this Erik you kind of laid the groundwork for this right?

That when you look at things like the insights report, you have access to two sets of data in some cases some of it is the lab information and then the others are the the user data and F. I. D. Is very much meant to be the the the user side of this. Um This one’s weird,

Oh is it just the web console? Just google. Search console.

search console console stuck in my head.

but but you will get T. T. I. Or T. B. T. Correct, just let us know if we’re throwing too many acronyms that you guys listeners. Uh I told you a lot of them out there for this episode.

Oh yeah

finished recording. You’re out of luck

One of the things I find really interesting about first input delay, Google says like to have a good you know a good score, the first input delay has to be 100 milliseconds or less than 1/10 of a second. Um The reason this is kind of interesting at least to me is That’s only 25% of what they call the Doherty threshold. Um Which this is like an old school computer science type concept that goes back decades and decades.

Which is this notion that for something to appear immediate simultaneous to the user the reaction of the system has to be 400 milliseconds or less. And so it was interesting to me that google’s like oh yeah but to be to write good you have to be under 100 milliseconds because I feel like the user can’t tell at least in theory the user shouldn’t be able to tell so I don’t know what to make of that entirely.

I don’t know Erik if you’ve got any thoughts on that but that’s just that just struck me as funny anyway.

click.

I don’t think we think enough about how many things we bind to when we are writing javascript and especially as like I’ve started thinking about it a lot because I have basically removed J query from my vernacular. So I’m not using j query as a means of like creating effects or events or behaviors.

I’m writing it all vanilla Js which means I’m writing a lot of like add event listener type stuff and I start looking at like as I organized my code, I try to put that stuff kind of together and I see how many event listeners I’m adding and that’s the stuff that we’re talking about here. Think about how much are you using java’s for your menus for dropdown behavior.

Are you using javascript? Um for event handling on something like links or like simulated links or things like that.

Um depending on if you’re building also a web app versus a website that can also make a lot of, you know, if you’re building a react app that has tons of javascript, obviously you’re going to be a lot more sensitive because you’ve got all of this stuff, all of these react components that need uh we’re the word and I’ll jump ahead to a phrase here, hydration happens. Um you left, that’s that’s what it’s called. You know,

well I mean you’re watering it uh web if you use web components, that web component is useless until it is quote unquote hydrated. That’s the javascript for the web component loading and binding everything to it to make that web component do what is necessary. So in those instances you’ll see a lot of first input delay type stuff. Am I treating that fairly Erik if I explained that well enough to not confuse people or have I made this way? Way worse?

Um I’ll throw that article, tim’s article in the show notes as well. If anybody wants to go go read that, definitely check that out. Yeah. So let’s talk about F. I. D. In terms of how do I reduce it? How do I reduce the time reduce rather the delay to first interaction? Um Obviously I think everything we’ve already said about largest content will paint applies here.

You know, again good performance techniques are going to help you know what’s what’s the phrase right? Uh you when the tide rises that it lifts all the boats. Um There’s some clever phrase rising tide lifts all boats, That one.

Yes that that phrase by improving based performance, you know technique you’re gonna inherently kind of affect all of this that ones I think kind of their what uh what would you do Erik if if somebody came to you and said hey we we ran a test, you gotta search box on the main page of the Notre dame website.

I don’t know if you do but they can’t use it because you’ve got javascript binding to it and it’s taking way too long to load what would be your process of improving that.

because javascript is what we call blocking right? Like when you are, if you are just loading plain old javascript and you throw it in your head. It does what we call it and we use this phrase just you know in this previous segment right?

Total blocking time. How much time does the browser spent stopped because it has to do the thing that’s in front of it and javascript and CSS or two of those things that when the browser hits them, it wants to download them and run them before it moves on.

One thing I want to do um when I rebuild the site at work is because it will have a lot of javascript. It just does. Um but when I set up my build toolchain, I actually want to input to files. I want to have the javascript that you have to have in order for the above the fold, quote unquote stuff to work everything else. And the most important stuff will go ahead and load right away and that file will be like a kilobyte at most probably.

And then everything else can be deferred down at the bottom of the page. And because for like you don’t need all of our lead form code validation error handling because you’re not going to be able to fill out a form quickly enough and get to it before that’s needed. So that is something I can offload and say don’t load that and run it yet. It’s not even necessary on every page.

So let’s let that weight and linger a couple other things you can do is, you know obviously make sure things where you can or asynchronous so you can, you know, if you’ve got fetch tasks, api calls things like that, make them asynchronous, you’ll shorten the time that it takes for things to to load because then it doesn’t have to wait linearly for them.

Um and make functions small and this is just like a good piece of, You know, advice for Javascript in general. It makes it easier to test, it makes it easier to debug and it makes it execute faster. Don’t have a function that’s 500 lines long. Uh The last core web vital. Accumulative, cumulative layout shift CLS

Yes, this this is definitely one that everybody has ran into, even if they don’t know they ran into it, but if you, you will know the problem uh again, for the last time quoting google CLS is a measurement of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. What you know,

I read that definition and it’s terribly hard to understand. Um, CLS is basically an abstract measurements between zero and one um and if you want to know the math, I am not going to go into it because it is complicated and weird. I’ll have a link. They have a page that explains like how you calculate it based on fractions and the amount of you know, pixels things move relative to other things. There’s a whole equation and it’s not fun. You don’t need to know it.

Yeah, it’s not good podcast content. That is a very excellent point essentially

Yeah. Users fixate right? When you see a page, your eyes lock on things and we’re used to this notion of an image placeholder that’s 6 40 by 4 80. Right? And if the browser, if you put an image height and width on that, whether on the tag or at least in CSS the browser knows to hold that space that something is going to come in there, that’s that size.

And so when it loads, it’s not disruptive to the users like visual threshold on that page because the for instance with text, right? You could already be reading the page in some cases before like a big image loads and if you’re trying to read that page and the image loads and then shoves all that text around. Suddenly you’re jarred out of that flow and that’s disruptive. I mean that’s and that’s you know, a nice way of putting it.

But thinking about improving that value, I mean this feels easy, doesn’t it? I mean

that at least reduces the amount of shift then. So you’re, if you can’t avoid the shift, you can at least minimize the shift which is perfectly valid. Like I’m sure there are situations where maybe your CMS doesn’t give you the information about the image you know to work with and it’s a user uploaded image.

they even specifically say like you it’s reasonable that sometimes you have to insert something into the page but you should always try to insert it after things not before things. Um that helps reduce that score as well. And something else that I thought was interesting was um use animations where you can, because the animations help reduce the amount of shift from frame to frame. So you don’t go from nothing to a huge something.

And that helps reduce the overall cumulative score because the way they calculated based on ratios if your frame, the frame movement is smaller even if you move the same distance overall, the cumulative score is lower because the change between ratios from frame to frame is smaller. Again, the math is super weird. Uh If you know you’ve got to have a banner ad, if you work on a content site and you have ads then You very likely know how big those ads are.

So don’t let the Javascript insert it and go from zero height to you know 80 pixel height. Hold the space, have a div there that’s 80 pixels tall. And in sort of inside of that then there’s no layout shift when that ad loads. Think about placeholders that way and try to use them in context. Keep stuff from moving around Erik tools. I want to talk about tools to kind of round this thing out. We’ve mentioned several. Uh Lighthouse, what is Lighthouse?

The interesting thing about Lighthouse right is it’s also available as a command line tool and so if you wanted to script it, if you wanted to write your own tool to maybe test a certain thing on a schedule, you can download the cli and build it into a node script or something like that.

Yeah so speed defies an interesting one because I threw it on my list as well. Um speed lo fi uh is the product of Zach Leatherman. Um It is, it runs in 11 t it’s a static site generator and it basically lets you produce a website that gives you the ability to track all of these things over time to see how your change. I use it personally.

I’ve got my own server set up and I have a bunch of my work site set in it, I’ve got a bunch of my personal site set in it and I just let it run. Uh It’s very cool though because it gives you it does give you all your lighthouse scores. It gives you all your core web vitals, everything we’ve talked about LCP, they have CLS they have all the other web vitals first content, full paint and all of that.

Um But you can and also uh wait, tracking how much html do you have? How much CSS do you have? How much javascript do you have? And so it’s just a really cool and useful way to track this information over time. Um GT metrics is another one to write. Um And there are a lot of these GT metrics is one mose has one that are just like sites you can go in and just plug you are Ellen and they’ll they will give you a score on on a site and they’ll show you the filmstrip.

Um Erik you mentioned, you know, being able to see like what does your site look like? Two seconds in five seconds in what changes, where does stuff move things like that? Yeah,

and and as you were talking, I went ahead and plug drunken UX into the web page test. And man, I don’t want to tell you what we got. All I’m gonna say is I’m really glad I’m doing a lot of work to redesign this site, make it fast. So

oh it’s not good folks. Go plug your site in the web page test dot org. See what the results are. And while you’re doing that we will be right back. T

Erik thanks again for taking so much time this evening to sit down with us and go over this. Um, I know we we threw a few questions your way that I did not prep you for.

So I commend your ability to think on the fly and whether my whims as it were uh as uh absolutely judicious payment for your time and suffering, please take that microphone, take three or four minutes whatever you need and tell folks where they can find you what you got going on and literally anything else that you want them to know.

Uh Nazi.

That’s pretty good. Pretty darn good. I don’t think we mentioned it, but .25 is the threshold on CLS for good. So anything below .25 and you are. Yeah, doing it right.

Or the other way around

The other way around it sounds good, but it’s definitely the other way around, you know, And as I’m sitting here talking about you caught me, I’m, hey, I’m listening. I’m, it doesn’t matter. I I’m through my morlock but boy, I know my links.

No, I was just sitting here thinking about as you talk about like static site generators and Jekyll and performance and how that affects things Erik And I were talking right before the show started about stuff and I got when we start thinking about like page speed and

Well done

you got me hey Aaron, Yeah, bye bye.