Dinghy GmbH’s Post

Transcript

Hey everyone mutes here from Dingy I wanted to show you something real quick. We're working on our website and on performance optimizations and we're doing that on our clients websites of course, but I'm always just using our website to show you as an example. So. Look at this I. They just pulled up our website and I disabled the cash, take the browser where it stores and stuff for the next time you go to the website. So it just turn it off and I am told it to emulate a connection speed that it calls fast 3G. So like we have 4G and 5G now like 3G is a couple years old. Imagine you're, I don't know with your mobile phone on a 3G connection running around somewhere and so it's. Not your air office grade fibre connection. And let's read out this website and pay attention to what happens to the text over here. Let's do it right here so it loads it's 3 lines and then it jumps over to being 4 lines. That's horrible. There's a thing that's called cumulative layout shift. That's like a pretty big word and it's one of the core web vitals. Now Google came around and said we're going to put up a couple, a couple metrics that measure your website and give you scores. And they factor, actually they factor into your Google ranking. So the way that happens is that they did exactly what. I do right now and they look at your website on a mobile viewport on a phone and with like a medium well connection or whatever and then measure how well it performs in terms of user experience. So and and the the metrics that go into this is of course like loading speed but also stuff like cumulative layout shift and that's what we saw in action right here. So what it means is. The website loads, you see it for a little bit, and then the layout shifts around like stuff moves right. In our case, the headline, because we loaded a custom web font, it went from three lines because in Helvetica the headline kind of fits into the viewport on three lines. And then it loads the web front and suddenly doesn't fit anymore because our reader fund, that's the name of our fund, is just a little bit. Provider and so it has to split on 4 lines and cumulative layout shift. It's super annoying for users, right? Like you've been reading something, then it jumps around and you have to start to read again. So that's why it factors in. And I wanted to show you how to fix that real quick. And there's a couple ways to fix this, but I'm just going to show you what I did right now. So one thing, I'm going to show you code, don't freak out. It's simple stuff. And so one thing is in our CSS. Make this is our app CSS where we have everything and the first thing we do is that we tell the browser, look, we're gonna have 3 custom fonts right here. All of them are named Rita Pro. One of them is the extra light, then the light and the regular version. So we have 3 files and The way that browsers work is when you load a website for the very first time, it sends all the HTML and the browser starts to read through the HTML from top to bottom. And for the browser to know that we even want these font files and first has to download the CSS file because that's the first place. Where we mentioned these funds and so one thing that we did here as a performance optimization is to take these fund files and stick them into the HTML immediately and right in the header all the way at the top and and we're using a preload tag here so preload tags and where you say link and then rel preload and. In the way of hinting the browser at exactly this issue, like this line of text tells the browser, here's the font file, I'm gonna need it later to display all of our website, so please go ahead and load it as soon as possible. And that's one thing that it does. And the second thing is a little bit more involved and but I'm going to run you through it right now so. This font face declaration is basically just telling the browser look, hey, I want to have a a font that's called Reader Pro. You can find the file right here And that's it, right? Like this we want to extra light font and so go get that for me. And then there's an option right here and as you can see we have that on all the three declarations. It's called font display optional. And. From a design perspective I think this is a little bit controversial and because what this tells the browser to do is to try to download the font and if it arrives quickly enough, I think the threshold is 200 milliseconds or something. So if you load the page and the the font files arrive. In this window of 200 milliseconds and it will show the web font on the first page load immediately, just as normal, and if it doesn't it still downloads the font but it will keep it on the back burner. Let me show you what that looks like. So I have our website here again and I'm going to disable the cache. You know, and not gonna disable the cash, I'm gonna just leave it right there, but I'm gonna reload the page, emptying the cache and doing a hard reload. So let's do that right now. Look at the same thing on the 3G connection and it loads and loads and loads and then at some point. It will show the website but without the flash. So the font is Helvetica now and not our reader font and but as we can see down here, it actually did download the font files. So what's happening here is that we told the browser look the font is optional. All right, if you get it quick enough, show it. If not leave it out and. So this way the website loads, nothing shifts around, it's not the perfect font, but nothing shifts around. And so the next time we visit this website and it will show the font immediately because and it has been downloaded already. Group. Team, that's here. It's the reader font now and nothing jumped around. It just loaded immediately even though we're on this 3G connection. And so I say this is questionable from a design perspective because there might be a situation where your website doesn't show your custom font, but I think from a user experience point of view. This is actually a perfect tool for the problem, because you can be on a mediocre connection, still see the entire site, and it won't jump around and do all of that weird stuff. And as soon as you visited the next time or navigate around, it will just show you the next page with the right font on it immediately. Which is very nice, and it's pretty cool that this works out that way. Ohh yeah that was a quick tip about how the load fonts and how to avoid cumulative layout shift. And when talking about web fonts there's other situations where cumulative layout shift can happen and but this one is to has to do with ponds. We're going to continue working on different metrics on our website and we'll work through all of this. All of these different issues, some are easy to fix like this, some are not and some will even have to do with moving servers And the goal is to get a perfect 100 green score on this website And as an experiment like it's not super important to have 100 like 95 is also super amazing and will keep you ranking in Google as high as possible and but we just want to see how can we get to 100. And and what does it take? So I hope you like this video. Let me know what you think and see you in the next one. Bye.