Hello everybody, you’re listening to The Drunken UX Podcast. And I am your host, Michael Fienen.

I’m doing relatively well this evening. We’ve got a lot of storms rolling through the area, and I am digging it because they’re cold fronts and the temperature has dropped by about 20 degrees. And that is just delightful.

Folks, this is Episode number 68. We’re gonna be talking about the state of page performance, Web page performance, Web page, speed and the things that factor into that and what you can do to make your sights faster and more elegant and more chewy and tastier and saltier. It’s not

No, it’s just changed me. My friend just changed.

Well, cookies don’t go good with what I’m drinking this evening. So that’s

digging into the monkey shoulder that I self aged in in my casket. Oh, that’s right. So, yeah. So this is this monkey shoulder. For those who don’t know, it’s a space I’d blend, um, balcony could envy. And, uh, another one that’s escaping my brain. Always forget the 3rd 1 I always remember Balboni can envy, and then I forget the 3rd 1 But

It is? No, not at all. It’s technically alcohol is that it’s Actually it’s a relatively good distillery, is all my brain remembers, because even the most of can envies Scotch is made for blending. But, you know, balcony quite well. The other one, like it just escapes me off the top of my head. But the very normally a very smooth, a little on the port sort of sherry sweet side. But

but mellowed enough that, like you can tell it’s there. It’s a rosy flavor, like maybe some, uh, like dried orange like a Citrus flavor, but like aged a little bit like the lost its hang, so to speak, with the aging I did on it. I forget how long now I had it in total in that casket was about three weeks, I think three or four weeks it picked up side aged bourbon in that cast beforehand, and it brought this really sort of interesting, sweet, sharp corn flavor to it out of that bourbon, Okay? And so it layered this interesting sort of sweet note on top that’s almost like a like a bark coffee. Kind of like a crunchy, sweet, something crunchy sweet on top of it, it really keep out kind of nice. I’m really

it’s definitely something that, like you have to play with, and I’m I’m gonna start what’s called an infinity bottle, and that’s gonna be the next sort of experiment I dive into, which is you have a bottle, you empty the bottle, and then when other bottles get near the end like you only have, maybe a glass left you pouring into the infinity bottle, and so it’s a constantly changing blend then, and so I think I’m gonna take some of this and use that to start the infinity bottle and see what happens. So that will be another treat that will have on the show down there. Hood. Nice. What say you, sir? What have you in fine glass of hacked over fist?

And you’re an adult.

Oh, white tequila. I get it. That took me. Oh,

folks, if you are enjoying this show before we get kicked off, be sure to run by our friends over at New Cloud. You can hit them up in a cloud dot com slash drunken ux. They do interactive maps, illustrations and have a platform waiting for you. Help Do all of your interactive mapping needs. Uh, okay, Aaron. So this episode is being built around the idea of tying up several things that we have talked about across. I don’t know. Five episodes, six episodes.

kind of.

Amazon Facebook. Sure, kind of. The right is one of the things we complain about. All of those is how big some of those sites are and how slow they are. OK, Paige, Performance factors into right. All of this stuff in and out. And we have talked about and we will reference a couple different show at our episodes during this. If you want to go listen to them. We’ve talked about some of these individual things in depth in other places, but I wanted to kind of bring all of these in tow. One in case you want sort of that quick, you know, 45 minute catch up kind of thing

I’m gonna start it with the God awful phrase milliseconds matter. I now hate that phrase. Hate it because the reality is Well, yes, I I understand the research, and I know that Google has figured out that 70 milliseconds of delay causes x percent of drop off. I get all of that. The reality is you have a gray area of expectation. We’ll talk about that here in a moment, about like, how long you have. It’s around two seconds wrote.

It’s worth, but it’s not so much. Most people don’t operate in a scale where milliseconds matter. That’s really the thing, I guess like, and those on milliseconds matter because milliseconds are millions of dollars to them. In many cases, if they

if they move the conversion needle by, you know, half a percent for a company, right does billions of dollars in revenue.

there For most people. You it’s a little more little fungible, right? You have a lot more room on that. But it does still matter. Performance does absolutely matter. If you got a web dot dev, they’ve got an article called Why? Speed matters, and these are some again bigger hitters. But just illustrated Pinterest reduced perceived wait time by 40%. And this increased search engine traffic and sign ups by 15% co produced average page load time by 850 milliseconds.

So almost a second, which increased conversions by 7% decreased bounce rates by 7% and increased pages per session by 10%. We’ll talk about why that happened in a second.

like, yeah, these air. More big example. Certainly

out of people. Like a small city. The BBC’s was a little a little more like ratio, so they figured out that they lost an additional 10% of users for every additional second their site took to load. So that is something you could abstract to. Whether you’re big site or a small site. That would matter. I like the face that Aaron just made. I think he made. Was that refill a little bit strong? This will be fun.

Oh, God. They had not even it wasn’t Even a good face

Yes. So you’re right, though, that these things you know, abstract Lee. For some people, they matter. For some people, they don’t. The reality is we do know that page performance impacts users. Whether you’re a big site or a small side, it’s just about figuring out where you can land to improve things. So this is our very first throwback of the night. This goes, I think, two episodes of I believe this. Episode 66.

We talked about you x as a paid drank component that Google is looking at and most of what they were talking about in that case, dealt with using speed components as a proxy for you. XO. Yeah, if it pays little horrifically

and there were there was a couple others, right? Like time, The first interaction. And and then there was 1/3 1 mixed in there. These things do matter. They do impact us and potentially will impact everybody as we move forward because it will impact CEO rankings and things like that. So when we talk about page performance, this is not one thing. In fact, it’s lots and lots of different things.

Okay, It falls into, you know, stuff you have control over, but also, if you may have no control over, and it may be something that you just have to kind of find where you could move the needle best so, like you may or may not have control over your hosting or your server. For instance, a lot of folks if you’re using shared hosting if you’re on blue, host or host gator, you don’t have much control over that. You have what they give you, and and that’s that you none of us have control over our users networks.

So you know, I’ve got gigabit fiber. I’m superfast. I love it. I got to my dad’s house in the middle of nowhere. I barely get free G on my cell phone. You get what you get. DSL satellite. You know a lot of this country us is a huge place. People forget how much of the rule areas don’t have access to much more than DSL. And that’s something or just spotty. The thing about cell phones right is, let’s say you have five G. That’s awesome, right? Five gs, super fast. But it’s really spotting.

got you clipped out. It took me a second to actually hear the word in my brain that you were saying. I

But you know, just even if you have coverage in your area that going in and out of buildings or up and down on floors getting in and out of your car like your connective ity is still very fragile, so to speak. So user networks can really impact how quickly a site loads, Um, the actual page. Wait. So this is literally how much stuff is in your site? That’s something you probably have a lot of control over. And it will impact how fast you run the multimedia you’re using. You know you have videos. You have background sounds. I hope not.

Yeah. I don’t know that the user’s location can matter for reasons related to the network, but also Layton, see, So if your server is in, you know the New York Data Center for Did Lotion, But you’re user is in, you know, I don’t know Mozambique. You know, that data has to traverse half the globe to get to, and even as fast as data moves through, electrical wires are are fiber lines.

It still has to move through a lot of servers and a lot of switches and a lot of backbones to get to that other user. So location can add to Layton. See mm users. One you don’t have control over user’s browser plug ins as as much as, like Adblock and things like that are good and can speed up sites. If somebody has a lot of that stuff installed, it can really slow down not just Web pages, but your browser. Your browser itself is going slower as a consequence,

the the other thing, and this is by no means an exhaustive list. It’s just the common things, and we’ll talk about this and more depth. Here in a second is what we call blocking scripts. Uh, so things that may not be big and your site may not be big, but they’re things that have toe happen before your page is allowed to continue to render. That’s actually good lead in tow what the two groups are.

So I I lump these into two areas. You have actual performance. Actual performance is the genuine, like just straight up measured. How big is your site? How fast does it go? Actual performance? A good example. Like Woot, it loads relatively quickly. It’s 2.34 seconds, but it comes in at the cost of 3.91 megabytes. Thean trist ing thing about performance there is that Woot, which is owned by Amazon Amazon, is a smaller page, even though it’s gotten more stuff on it. But but it loads slower.

So you know, the actual performance of those pages competitively is impacted by a number of these things that we just talked about. So route has, ah, high actual page. Wait. But a relatively good, you know, connection to its network, apparently. And Amazon doesn’t think that you’re gonna talk about, I think, which is? I think their problem is mawr on the server side than it is the page. Yeah,

And actually, that piece of it goes to the second group, which is perceived performance that perceived performances, how fast a site feels to a user. And so I said, Amazon falls into that group because I think their problem is they’re doing a lot of stuff on the back end when the page loads. So you’ve got a lot of database calls, a lot of things like that happening before the page builds. And while their site is lightweight, there’s a lot of stuff happening that makes it feel slower to the user because it is slower.

It loads. I forget what the time was when I calculated at a pace that one and it’s like four seconds or something. Okay, So throwback. Remember the weather episode? It was at 3234 Somewhere back there.

I used to use weather dot coms, Radar all the time. I relied on it again in Kansas. Feed a lot of 17. 07 It was that late. OK, seven. I gave up on weather dot com. So I give you an idea. The page is 1.46 megabytes. Okay. Doesn’t sound like a lot. The finish was 1.46 minutes. What? And the page load was 21 a half seconds,

Yeah, Uh, well, let me ask you Why do you think their pages so slow? Why would a weather radar page be slow?

give or take. Yeah,

You would be surprised. It was about 54 requests, which isn’t bad. The average site has over 70 so the number was actually reasonable. The real problem was their map, a p I and the tile server they were using took the latent See that was built into that. Yeah, was incredible. It takes and you try it on your own sometime go weather dot com Look up your area and especially the radar into motion. And then wait, read it.

It takes a minute and 1/2 basically, for that thing to actually get everything spun up. It’s incredible. Now I use wonder man now. Erin, let me ask you, Why do you think I use Wonder Map?

Because it loads in 1.68 seconds. Wow, that’s substantial. It’s page weight is 46.3 kilobytes.

Yeah. Eso weather dot com lost me as a user because their age performance was garbage. I’m a walking, talking example of somebody page performance and said Nope, I There’s another service that I can use that is much faster

insane. The difference for folks that don’t understand load is when the window on load function fires. So that’s after Don content Loaded dom. Constant Loaded means the dom of the page has been read into memory for the browser now, so it can start manipulating the dom once it’s done doing that. It then fires the load function. The finishes win. All of the other stuff has now gotten complete, cause you tend to have a lot of things that then happened after on load like loading.

The tile server, for instance, are loading the tile set from the tile server. Rather, say, it’s It’s just why, and I can. I could get into the technical reasons as to why it’s so much faster. But it just it’s a good example of how performance impact stuff

last four years, and I did some research on this in higher ed a decade ago at this point, but just over the last four years. Page weight itself is out of control, and it was bad 10 years ago, and it’s getting worse. Still, there’s a site. If you haven’t seen it before, it’s called http archive. Yeah, basically, all they do is run lighthouse on millions and millions of Web pages and catalogue all the results to a giant database.

Okay, it’s actually their entire data set is available on Google Big Query. And so you can go and, like, run your own reports if you know how to use Big Weary. So okay, their latest report shows since 2014 of six years, desktop weight is up 35%. Mobile weight is up 45% both hovering right about two megabytes per page

I mean, I think it’s for a lot of reasons, and, you know, the research on http archive doesn’t get into it. I wouldn’t be surprised if you told me. Yeah, everybody’s layering, you know, foundation and Jake weary or bootstrap or, you know, tons of in PM stuff or what have you like? Those things that the thing is like, If you let’s say you use foundation, I use foundation. Sure. The amount of Kodi load for foundation versus how much of foundation I use.

Yeah, is probably frightening this frighteningly this proportionate. Sure, I’m probably loading 10 times the amount of code I need for what I use. And I think you know, Jay Query is another one of those, right? We’ve got all these. Ah, you know, the monolith scripts, right? That you can low. You know how many people go grab? Just j query dot men dot Js from a cdn, and they just throw it on their site.

And you can do that like foundation lets you do that PM If you’re if you’re building something and you install foundation through in PM, you can go in and be like Alam’s gonna use these parts of the packages, But I think a lot of people still use probably too much of that out of fear and out of dependencies like You get the idea, though, that there’s still a lot of crust that ends up in these, certainly.

And I think the other side of this is imagery cameras. Phones have gotten better. And so as we use more more imagery on websites, the images have continued to balloon in size.

If there’s like, Oh, they’re not efficiency, right? And that’s gone out the window eso. And here’s the good example of this right? So the first content full paint is down across the board. It’s improved by nearly 20%. It’s That’s roughly 200.2 seconds above what, like Crazy aid considers optimal. That’s that to second mark.

47% of consumers expect websites to load in two seconds or less, and 40% will abandon a page of takes. Three or more seconds. This gets into that gray er scale. Now that we’re not talking about middle of seconds, we’re talking about seconds. But here’s the thing. How is it you know what? What’s going on? Do you think that pages are 35% bigger, but 20% faster?

I think it just comes down to the efficiency thing. I think we’ve got faster computers and better engines in the browser. They’re just sure the engines are more efficient. The computers themselves are faster and more efficient, and so as a consequence, it is hiding the problem of page Wait. It’s basically making people feel like they don’t have to care. That’s my opinion on it.

I mean, remember when V eight came out when chromium released the V A JavaScript engine and it increased JavaScript performance by, like, 120% or something insane like that? Like because it was it. They discovered that in the browser engine they could compile JavaScript and run it as a compiled runtime ray on the fly. And that made it faster than running it as an interpreted language just on demand. Like it’s that kind of stuff.

The people making the browsers have just figured out how to write better stuff to make up for our laziness, right? Right. And don’t we also can’t take some of what A GP archive and all of that and crazy egg and their research off. And because different research gives you different results, there’s some research from Google, they found they looked at 900,000 mobile pages and found that 70% of the pages took nearly seven seconds to load for visual content above the fold.

And that’s the best one was classifieds and local sites at 7.9 seconds of the worst was technology websites at 11.3 seconds. So who you look at? What, what they’re looking at like http archive, I don’t know, with their cross section, so to speak, is of their pages in the grand scale. They’re they’re looking at, like, six million pages these days. That’s not very many pages, guys. Six million pages is not a lot at all. Just be aware of that. I wanna talk about what we do about all this now. So these are the things like that.

I mean, hopefully I’ve convinced you that page load is a prop. Age weight is something to be concerned about. I know I haven’t made the best, most compelling case, but the reality is smaller pages load quicker. Remember in in that same episode two weeks ago are two episodes ago we talked about the fastest loading Google fonts. Yes, and the fellow that had gone through and broken down, which fonts were faster. How to make them load quicker and got into a lot of the stuff about, like first content. Full paint.

How to prevent You know your fought from loading blank before it shows up or low. You know, getting that flash oven styled text. The thing is, a flash of on style text gets you to first content for paint quicker, then hiding it until the Web thought has loaded, because now the user can’t remember perceived perform. If there’s no text there because your Web font is still downloading, the user perceives the page as not ready.

So these were the things like that that you conduce that will make your page feel faster to the user, even if it does take longer to load. My first and most important piece of advice is to focus on writing content and not Marca. I mean, that one’s easy because confidence important and that

Yeah, and the reality is when you get in the markup, you know, simpler is better and the real problem that you run into overtime is you start to learn, like if you’re looking a WORDPRESS website that uses, like, one of those page builder plug ins. And have you ever looked at, like, how much markup they output when you try to build a two column page couple in service and yeah, you end up with you know what we call dibs Soup, you know?

what’s ironic about it is we used to have that same problem with tables years and years ago. Remember nesting tables and how god awful that mark up would get when you

based layout. Yes, we’ve just reinvented that with gives now, and I honestly, I feel like it’s just a bad if not worse, because looking at 20 nested gives is even less context in a table, which, at least you can distinguish between rows and cells. Right, So when you start caring about your mark up, you can consolidate it, you can shrink it. Remember, simpler markup is more semantic. It’s easy to make accessible.

It’s easier for the browser to parse it. You get to don content loaded quicker as a consequence. Get to that first content, full paint, much faster images. What episode was that? We talked about images. That was

yeah. So 45 was Season two. Then we talked about different image formats and how to optimize them like image optimization. I was just saying, Too many people will take a picture on their phone and they’ll use that on their website URL ago. Have you ever used on slash? If you’re seeing that?

unspool? Ash is a photo archive you can go to, and all of their photos are free. Okay, it’s It’s open licensed public domain photography, and it’s super high quality. But they’re also huge, like you can get full resolution photos, thousands of pixels wide, and I’ve seen people take those photos and just drop them on a website. So here to make a bite, you know, a Web page being to make a bat bites Well, here’s a six megabyte photo that just blew that entire Ah, that entire thing. Go back. Listen. Episode 45.

Learn about the different formats, how they way out against each other and things. One thing you can do. So we had a page at work very recently that has examples of client work. And so it’s It’s kind of like a gallery, and we’ve got lots of them. And so every one of these had an image behind them, and we discovered in looking that at that page somebody came to have set. This page is loading really slowly, and we look at it. Yeah, it was loading 13 14 15 seconds in some cases, and all of that was basically images.

I forget the exact size of the page. As a consequence, it was several several megabytes, and what we did was I used a tool by Andre Overly ci. I apologize to him. He’s Italian, and I may be pronouncing that wrong. Hey has a vanilla lazy load plug in like it’s literally called vanilla lays load. It’s just a vanilla Js. Plug in you can use is that before it’s yes, super elegant. It’s super tiny, which is important for tonight’s theme and lets you it makes really easy to lazy load images.

What lazy loading is it’s saying, Wait until something is visible before I try to load it. So in our case, we had, like, maybe six images you could see above the fold, and then there were, like, 20 images below it. Well, those 20 images, if somebody that never scrolls the page, there is no reason to load those images. But it uses something called the Intersection Observer a p I

the intersection observer FBI. All it does is identify an element and lets you say, Is this thing in the view port yet? Okay, okay. Remember how we used to do that, where we would, like, calculate the page height and like the offset of elements against that and subtracted them to figure out if it’s if the X or the Y coordinate is within range at that point?

old way of doing it, which was like, OK, if you’ve got a page that’s 5000 pixels tall, your view port 1000 pixels tall and the div you want starts at 2500 then you basically I constantly check the scroll position to see if you’re between, like 1535 100 in which case you like. Yes, it’s in the It’s in the view port

We’ve I’ve written that by hand, and it’s a pain in the ass when that when you kids say, Well, I ever use math theater section observer FBI takes all that out and it just it’s literally a browser, a p I that you can access through Java script that just lets you ask the browser. Is this thing visible yet? Then the lazy load plug in uses that to then make the requests for the images on demand makes way faster. I combined that with ah, image optimization are images We’re getting loaded un compressed.

Okay, It was another part of the problem. I decreased the the page weight by 70% and got it from like 15 seconds down, like three seconds loading time. Nice. Just making those two little changes, and it was very little work to do either of those. But it made a huge difference because images are un compressed, images are massive. Big images are massive, different image formats and be huge un compressed J pegs.

Or like how full quality jape aids could be enormous as opposed, like a 70% quality J pay, which most people can’t tell the difference between. No. We talked in Episode 45 about Web P.

yes. So that’s a good point, because just like talking about with lazy loading, loading on Lee the things you need and thinking about how I used to write, you know, intersection type stuff, remember we the crazy code you would write for responsive imagery. Oh, and so now you can use what’s called the picture element with a source set in it that lets you define images with media queries and attach media query to it and say, If if the screen is you know, 800 pixels use this image if it’s only 400 pixels.

If the mobile device on Lee use, use the small image and it won’t even download the bigger image as a consequence. So that’s been a huge improvement to So I didn’t think to talk about that. But responsive imagery and using the new picture and source set elements are is a huge step in that direction. So the new kid on the block is Web P Web. He is the image format that Google came up with and was pushing, and for a long time it was Web. He was very fetch. They were trying to make it happen.

Um, I don’t recall.

They may, if it’s if they detect you Support supported on the browser level. Yeah. The thing was, it wasn’t well supported. Edge Didn’t supportive so far. Didn’t support it. Firefox did. Starting in version 65 chrome obviously did months. The world has changed edge now uses the Web. Kid engine so supports everything. Chrome supports Firefox supports it.

And now, in safari 14 they’re going to support Webby and time WebP is generally believed to be pretty much superior across the board from a compression standpoint, and it gets into and I’m not gonna go into the details you go, Snips owed 45 but, you know, image, compression, image, bit depth, you know you can do pings are great file format at eight bit. But if you go to a full like 32 bit P and G with transfer al filet or transparency, that image is not gonna be smaller than a J pay. I promise you, like or using another this just often using S V gs for stuff where you can I suck it after graphics. I’m just I can’t make a lot

Just generally speaking. Oh, and S V G is gonna be microscopic compared toa in most. The next thing you could do is men. If I stuff what is modifying? Just making everything small compression, right? Well, compression is not the same as modification. Unification means taking out the white space, taking up the comments.

The differences Compression can always be reversed. You can’t reverse modification. What’s have taken out the parents of spacing. Get out the backings young what they were Now, obviously, if you have a build script doing it, that’s not a problem. But that’s because you keep the source right. But it’s about two things. A. You make the file smaller. You know, I try to comment my code very heavily.

And so there are times where I have as much commenting in my JavaScript as actual JavaScript so reckon, reduce the size of that file by half form or, by the time of the white space is taken out. A lot of men. If IRS, especially in Java script, will also what’s There’s a name for it when it the renames everything like it takes my variable name one state confiscation. Yeah, kind of. There’s I don’t think that’s our

Uggla. Fire. Yeah, So my long variable name one gets turned into X eso it shortens your code that way to so it’s about a It’s about making that file smaller. But it’s also about reducing the number of http request, because what you can do is you can modify several files together, which basically just takes them and contaminates them. So you have 10 CSS files that become one CSS file

and there yet and, like gulping it, go plug ins and do it if you use a process. If you use WordPress there plug ins that will take every script, it’s in cute on your site and we’ll run them through ah compressor. And I think like w three total cash and stuff, I’ll have that built in, up in so and to go to the big C. Compression on This is one of those things that not everybody’s gonna be comfortable with, cause if you’re not a server person, you may not have access to it.

Um, or if you set up your own site and rolled your own, it may not be something that you were familiar with, but making sure something like Jesus is enabled on your server even shared hosting. Sometimes it’s just an option to click if you go into like your server settings. If you’re on your own server, you’re going have to configure Apache orange NXE or something for it. Usually I think it’s on by default, though, but

According to Yahoo, this could reduce download time by around 70%.

Texas is highly compressible. Text can be compressed down wildly in terms of like it’s it’s usually in the area like 6 to 8 toe one.

six through 8 to 1 give or take, depending on what it is. So the next two things are the big things. First off, if I used the phrase non blocking CSS and JavaScript does that ring a bell for you? Erin? Yes. Okay. So blocking CSS by default. CSS is a blocking action when you put CSS in your header. When the browser gets to that as it is rendering the dom, it says, Hold on, got something else to go do real fast.

It has everything else, and it goes downloads your CSS. Then it comes back and hits the play button. Yes, it does that with CSS. It does that with javascript. So if you have a lot of CSS and JavaScript in your header, then that can dramatically reduce the performance of your page. Because your site has to wait on those actions to finish. This is why, several years back it became very invoked. But all of your JavaScript right above the closing body tag.

whole idea was let the browser get through your dom first and then stopped

yeah, give or take. I know it really got publicas of analytics, and Google, for a long time, was saying your analytics code at the very bottom of the page because we don’t want it blocking anything. The reason enough to do that anymore is because of the way it’s included for one. That’s why you like if you look at the analytics, include Tag. It’s a It’s a a line of in line javascript that loads an asynchronous script tag. Was that mean when you are loading something a synchronously or using the defer command?

Not quite the same Differ says, Do this At the end. A synchronously means do this, but keep doing everything else right? Right With CSS, there is no a sink, and there is no differ. But we do now have, Ah, the REHL Tyrrell attribute, which normally no relish style sheet you can say well, is pre load, and you need the load a little bit of JavaScript to help that, because after the pre load, you need to then tell the browser that that’s a style sheet, so it has toe Ryan.

Check it once it’s loaded, Then you do an on load event basically on it is what it needs. But so I started out by saying there is an article of the filament group. They’ll have lengthen shows that give you a quick tutorial on how to do that. It’s very simple. It’s just something a lot of people aren’t familiar with. Another thing you could do with CSS is make sure you declare what media types it’s for. If you, for instance, use a prince, I’ll sheet, but you don’t declare it as print in the link.

If it’s like in a media query inside the file, then your browser will stop and download that style sheet, even though that users not printing anything yet. Well, if you declare it is print, it won’t download it until something happens with media print or, you know, all there. There’s a ton of media queries you can do now in that in that vein, so right. Using that to your advantage, you can control what CSS is or is not download. But you have to actually say it for it to work. I always

if you only have one style sheet. It doesn’t matter there. If you have multiple, it does matter, especially if you have multiple for multiple media elements, right media, all is the default one. If people realize that there’s I’m not gonna call a growing trend because I don’t know if it’s a growing trend thumb this idea of in lining your CSS at least the CSS that applies to everything above the fold. Yeah, Now, amp makes you do this.

If you do ample pages accelerated mobile pages you have behind all of your CSS. Regardless, the idea is you buy in lining it like putting it in the page. It is immediately it is instantly ready when the page loads. So anything that is in the view port by the salt already has it CSS available. And so all the rest of the CSS can download and do what it needs to.

I don’t hate the idea. I find it to be technically challenging. And for a lot of folks knowing what sets us, that is, if it’s not like, if it if you’re using a WordPress theme, you can’t do this. Yeah, Oh, yeah, Yeah, that’s totally It has to be a site that you have written pretty much from scratch. And you know, exactly the CSS that is applying over the fold.

It doesn’t matter if it’s in the footer or the header. I just had put in the footer just so it’s not in the way of looking at the rest of the code. Yeah, because either way, the whole thing is, Yeah, you don’t get a flash of Unseld content because the CSS is ready. Assumes the dom is ready,

So it’s already loaded into memory. So that’s that’s render blocking. Render blocking is one of the single biggest ways a to slow down your site, but also to make it feel faster if you can, you know, manage all of those elements. And if you use a tool like, you know, ghouls, page, speed checker, lighthouse, a lot of times those will show you the render blocking element so you can go in and tackle them. If you need a tool toe, help you with that. Yeah. The other big thing is utilizing cashing properly.

and a big part of this to go back to the start of the show is the server side component of cashing Not necessarily the client side, because a lot of stuff can happen on the server that makes your site slow even if the page itself is very small.

and then save it for the next time. Yes, yes, cash it. And so that’s the cash component, right? Like you save this stuff when after you’ve computed it. And people may be familiar with names, like if you use PHP a lot meme cash or op cash this idea that you’re cashing things on the server side so that you don’t have to make those database queries for everybody every time reduce the number of interactions you have to do because and it may not just be databases, sites may be clearing, you know, third party AP eyes.

They may be reaching out the database, but then also maybe elasticsearch or solar for information. There’s all of these different interactions that can be happening that slow down the delivery of the site outside of the users control WordPress is has got some good stuff for this. A. If you use like one of the cashing plug ins that your total cash or super cash or whatever, Um, you know they’ve got tools for database cashing that will use meme cash up cash. Oh, are even file cashing so there.

When it gets stuff from WP query, it saves it as a file or it saves it in the memory so that the next page loads. It doesn’t have to go to the database for its just ready in there looking that up out of memory is significantly faster than making a call to a database that may not even be on the same server. In some cases, that speeds things up. WordPress also has transients. If you haven’t used, um, I’m about to turn your life on its head.

If your WordPress developer there’s an article CSS tricks that goes into how to use it, it’s incredibly simple. Think of it like cookies or local storage, but on a server side and not for the cancer. So the whole idea is, especially if you’re using third party AP eyes for something. Let’s say I’m gonna an A P I that goes to my Flickr feed to grab my images and returns the list of my latest photos for a gallery WordPress.

I’ll write a function that says Get transient and get Transient Flicker Gallery, and it says a flicker gallery isn’t set yet and says Okay, so What do I do if it’s not set? I do. Ah WP remote open with this u R l and I save the result of that and I give it a time stamp, so I save it for a year. I save it for a day. Whatever. Sure. Then when everybody else comes to that site and get transient runs that AP I blob is already stored. So lets you cash ap. I responsive to cash anything.

Database responses, whatever you want. It’s just a It’s like it is a key value local store on the server with an expiration. And so unless you reduce that load time because it’s much quicker to look it up from a transient than it is to wait on the round trip of a lot of AP I calls. So that’s one of those areas That perceived performance takes a huge leap forward because now this is one of those areas where all of these http requests and stuff that get made some of those from the client, But stuff your server does also adds to that in the user. Can’t even see that happening.

The other place you could go to his browser’s there is browser cache if you are familiar with or comfortable with editing headers. If you’re in WordPress are many other CMS is there maybe plug ins for this? WordPress definitely has plug ins for it. You can set expires Headers, which tells the browser, Hey, if a user has been here before, used the page from yesterday. Um, okay, however long it does, it is only useful for turning visitors for what it’s worth, but you can control.

You can have it set for CSS files, images, pages, whatever you want, and there’s a little tutorial from GT Metrics all length. It gets in like the easy way that you can do it is using just in HD access file, going your HT access file right some rules for it and set what you want. Those expires headers to be and boom, you’ve got browser cache. So you’re helping the client side move a little quicker in those cases, if it’s good for sites where you have, like a lot of returning users for different things, the last big one is a cdn.

Get a cdn. Ah, that solves our helps the location problem. So if you know your users are overseas, hopefully they request your site from a server much closer to them than the one that you have, so you reduce the distance it travels. Many CD ends have cashing built in, but a lot of them were also. I think that Cloudflare doesn’t Cloudflare do medication as well. Uh, I think they do. It gets an option you can turn on.

I I don’t people do some there. There are, ah CD ends that give you some other options as like a cashing proxy toe crunch down your file so they’ll strip all your white space out. They’ll strip everything out and combine stuff without impacting performance or the look and feel of the page or anything like that, but that helps. Just getting speak is a lot of times the CD and also has a much faster network than you do. Oh yeah, eso. Their distribution network is optimized to deliver stuff very quickly. So

The last little advice I’ll give him This is a throwaway piece, but it’s, ah, something I

This is my Hank. Anybody who uses tag manager, um, if you’re using tag manager very lightly, then you’re probably fine and everything works great. I’ve got some containers on some big sites that have tons of tags, and when I say tons, I’m embarrassed by how many? Some way were noticing some pages, though, that we’re having some really bad performance hits. And it took us Ah, hot second to figure out that it was job description.

It was scripts that were loading from tag Manager, and the thing that I noticed was the problem is things were set to run on page view. That means it was basically loading as quickly as the site itself was assumes. It got to dom content loaded. This caused a lot of our tags to fire as blocking scripts back to this idea of Js uh, causing things to block the page. Hit these scripts. Tag manager was going, Hey, hold on, I’ve got stuff to do and the browser goes Everybody stop everything way.

We’ve got to get these scripts taking care of change your triggers from being paid you to being window loaded. That way they won’t block your Dom from loading and and your first content will paint. Your page will load, the user can start doing stuff, and then all of those other scripts will fire off in the background. This goes back to perceived performance. It lets your pay your pages usable by the user, even though not everything is completed, you it will likely complete well ahead of whatever the user is doing, but it doesn’t impact their ability to see how quickly they can get stuff. So that’s just a little quick piece of advice on a very specific use case.

But as more and more folks are using Teich, Manager, I do highly recommend using window loaded instead of page for cool page view style triggers. Sit back, Relax. We’re gonna get you out of here after these quick messages from our sponsors. Drunken UX podcast is brought to you by our friends at New Cloud. New Cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solutions?

Provide your users with an interactive map of your school, city or business? Will New clouds Interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and already to design an artistic rendering to fit your exact The one map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website.

To request a demonstration or to view their portfolio, visit them online at new cloud dot com slash drunken ux. That’s in you cloud dot com slash drunken ux around this useful. I know we ran through a lot of stuff and we didn’t go deep in any of it, but we wanted to put all these different ideas in your head. If you haven’t played with some of them, go pick a couple and look him up and figure out how to use them. Go fear how WordPress transient works or go learn how toe start deferring and they secretly loading your drive a script, whatever you’re comfortable with.

But let us know how you do take a snapshot beforehand. Go If you’re ever wondering how we get some of these numbers, if you go into the Inspector in In Chrome or Firefox, there’s a network cab F 12 right, F 12 and Firefox. I don’t know if it is in chrome, to be honest with the examinees. Chrome in a while. Yeah, just go with network tab and you can see how big everything is, how quick loads on and get those in France to take a snapshot, See how you did beforehand, change stuff, improved stuff and then take a snapshot afterwards and see how quick you can get your side. I’d

improvements, Yeah, if you have enjoyed this episode, be sure to follow us on Twitter or Facebook Flash dropping UX or on instagram at slash drunken UX podcast on you can find us on discord at dot com slash discord. Come chat with us and you’ll love the air and we will help you with your page feet. Come asi aside, ask a question and roll chocolate chip build. Yeah, we will. We’ll send you some chocolate chip.

What are you going on? You know, it’s it’s really telling that we get to the end of these episodes and you start talking about chocolate chocolate chip. Nice talking about the beginning rubber. I know you were, and I’m concerned about the advice that you give because you’re leaving people those kinds office instead of telling them that they should be keeping their phone is close and their users closer. Bye bye.