The Mantra of Milliseconds Matter has been repeated to us over the years ad nauseam. Even if we feel the saying is somewhat trite, the principle isn’t. As faster computers, better browsers, and increasing connection speeds erode techniques that encourage efficient design and development, it’s more important now than ever to be aware of how performant our pages are (or as the case may be, aren’t). This week we’re looking at issues of actual and perceived performance, and what some of the low hanging fruit are that you can check on.
- 20 Ways to Speed Up Your Website and Improve Conversion in 2020
- The Deal with WordPress Transients
- Eliminate render-blocking resources
- HTTPArchive Page Weight Report
- Modern Asynchronous CSS Loading
- PageSpeed: Leverage browser caching
- Using Lighthouse To Improve Page Load Performance
- Why does speed matter?
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Hello everybody, you’re listening to The Drunken UX Podcast. And I am your host, Michael Fienen.
And I’m your other-other host, Aaron. How you doin’, Michael?
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.
That is great,
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
what you think. The Internet’s changed a lot since last week.
No, it’s just changed me. My friend just changed.
You can Ah, by not more about this tasty, gooey Internet on ah Twitter and facebook dot com. So I struck a new X and instagram dot com slash trekking. Rex podcast will post photos of this chewy and decadent chocolate filled Internet and on a drunken two x dot com slash discord. If you want to come tell us your recipes for your favorite chocolate chuck Internet. I want cookies now.
Well, cookies don’t go good with what I’m drinking this evening. So that’s
what are you drinking? I’m
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
is it the one the rocks?
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?
I am starting with a hungry and tonic. Is it summer time?
And you’re an adult.
I’m a goddamn adult. That’s right. After this is done because it’s about 2/3 done, I’m going to switch over to some categories. Tequila. Blanco.
Oh, white tequila. I get it. That took me. Oh,
I’m sorry to say our local liquor store has, like, a bunch of different tequila is in the skulls and everything. And so I like try out the different ones. But you know, there’s always like, that whole thing of like, Oh, it costs more. Therefore, it’s better. But I found that not to be the case like I’ve had a few different tequila is both like Uncle and Musalo, and they can different price points like they can still be good with this cheap or expensive. So,
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.
Also, weather sites, restaurants, car dealerships, libraries. And now,
There’s 1/5 1
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.
So it’s a significant amount of money. It matters
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.
They’re but they’re dealing with traffic levels that are like easily in the hundreds of thousands,
like, yeah, these air. More big example. Certainly
that’s like that thing when when they say somebody states like a percentage statistic like, you know, like your 99.9% not likely to get this in the US but like we have printed 30 million people so, like that’s still a lot of fuel
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.
I took a mouthful line right there. I think all the lime juice Swath.
Oh, God. They had not even it wasn’t Even a good face
caught me by surprise.
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
of are just content. Full pain. Yes. That’s the term they used to go look it up
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.
I think we have any five G towers. That must be why we have no Kobe. 19 cases are here. We’ve
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.
You’ve been playing a media file in the back room.
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,
or if you accidentally have ah, some browser malware and like doing point base or something for someone else. Now, Yeah,
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,
we’ll get back to that in a short 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.
Oh, man. First season
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,
so OK, why?
Yeah, Uh, well, let me ask you Why do you think their pages so slow? Why would a weather radar page be slow?
He said the total page size was like 1.5 makes
give or take. Yeah,
right. Without seeing any of analytics on it at all. I have to guess it just had a shit ton of requests. Like a lot of that. You you can never get around like there’s always gonna be that baseline you see of making a single round trip requests to a server.
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?
Why do you wonder, man Michael?
Because it loads in 1.68 seconds. Wow, that’s substantial. It’s page weight is 46.3 kilobytes.
That’s significantly smaller.
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
looking at your screen shot there of Michael has shared with me a screenshot of his page load time on the 1st 1 for weather dot com it’s just load 21 a half seconds. But then the finish was 1.46 minutes. So you know 90 seconds to finish but 21.5 just to load it. That’s significant. Stella’s
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
Yeah, over the
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
Them Is this, like the page weight that if it’s the past few years, the one thing I can think of that has been different in the past few years as we have a lot more spas with a lot more front and frameworks. But is it because of that?
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.
Yeah, well, you have, like, the remember Jake, Where you I how they had, like, the site you could go to and you’d check off the boxes of the which modules you wanted. And then package went up for you with just the bits.
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.
So it’s kind of like how, with Moore’s law, computing has gotten worse. Yeah, like when we had, you know, um, you know the to 86 earlier, Um, you had you had to be a lot more careful about how you program something cause it’s a little memory to work with, but now we have literally gigabytes of memory on it to fry average system.
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?
Problem where use of a cdn, Libyans Or maybe like this more more streamlining, like fewer requests requests you can get. You could get a really, like every everyone who has broadband Internet in the U. S. You know all of our if you have cable broadband, at least they give you really high speed burst. But then attenuate it’s down to a slower speed for sustained transmissions. So if they like, if the request front was everything into the original request that you’re gonna get a lot coming down the fat pipe initially,
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.
No, I I could totally see that.
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
it’s literally the reason people are looking at your page.
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?
Yeah, that’s just kind of Ah, it’s a natural consequence of trying to make quick one size fits all. You’re always gonna lose a lot of inefficiency because of that. And 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
were going to a table
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
last season 45. So yeah, yeah,
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?
No. What is 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
in Intersection observer AP I Yeah,
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?
Vaguely, that this is like almost 20 years ago. So that little
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
I probably used I probably used some scripts that did that, but I never wrote any.
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.
Right before you get to that, I would say, If you’re gonna drop in a large size image, look into the source, said property for images and provide multiple scaled versions like There’s nothing to say. You can’t include the largest possible rez for something. But if you’re gonna do that, you can use original size current image. You should definitely include, like lower restorations in the sooner say
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.
Yeah. Twitter, Twitter, use that one, right?
Um, I don’t recall.
I’m pretty sure that Twitter uses, um when p for like the images on the site.
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
of conversion things, though,
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.
I mean, it’s it’s lower C compression kind of your technically compressing it cause you’re taking one thing and you’re making a pick up my space. But it’s not like Jesup compression.
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.
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
it’s pretty common. You don’t have it enabled already. It’s It should not be too difficult right to enable it.
According to Yahoo, this could reduce download time by around 70%.
Yeah, that makes I could see that because it’s all text. Yeah,
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.
Yeah, yeah, I could see
I remember that. Yeah, the
whole idea was let the browser get through your dom first and then stopped
10 years. About 10 years ago, I think when I started doing that,
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
do. Yeah, I was so media screen, I never really considered that there might be a reason
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 this like I, um
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.
There were there was a time, probably a little over 10 years ago. I think closer to 15 when I would be really concerned with what the source looked like. You know, having like, really clean looking, readable source. I was hated going to sites that had just like, no character turns and just their source look like shit and all the classes 90 names were like weird Alphen America strings. I kind of changed my mind on that a bit.
It just It matters a lot less now because there’s just so many extra attributes now. It’s not as Queen is used to be anyways, if you’re doing it correctly. So okay, yeah, just going to throw the shit. But you know what? Like we’re talking about this before the show put it in the footer so you don’t have the Fouke.
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.
Yes, this I am familiar with. Yeah,
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.
Her Okay, so yesterday I did. So I did a stream with the Ruby for good twitch. We’ve been doing some like livestream coating, and we were trying to debug A. It was a really basic page of three tables on it. That’s records. Probably few 100 records are being loaded into data tables, but it took three seconds to load 3.5, actually, and that was like way too long. And we’re watching the server dump. And it was because there was all these like they had a lot of in efficient querying.
That’s what we were working fixing that night. But, um, one of the issues was that they were doing leading database lookups when the pages being rendered. And if you remember doing Ph. B and you just have, like, the flat file and you know, you kind of do like he just started reference, whatever, wherever on the page, because it’s peach piece of whatever you know it. It pre processes the whole page before it dumps it to the server.
And I guess that was probably happening happening here, too. It’s not like he was rendering part of the page and then going back to the data views, but, um, you should definitely pre calculated and pre compute all of your data first and then send it out
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.
Yeah, we, um, in the rails world, we have like, Well, he’s been cash, but, um, also the like memorizing, which is really just you. Assigning a method Teoh, one of your models that maybe runs a query. But then you only required when the query once so within a single request life cycle. It only execute the query single time it starts it. Remember you otherwise.
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.
Are we still using Cloudflare after the thing that happened recently?
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
if you if someone if you have 10 different things sentiment, assets in your page, let’s just say like in the html CSS a jobs file and then we’ll say seven images that seems very light. But whatever. Um, and someone’s requesting that from you, that’s like every single initial page load is gonna be 10 requests if they haven’t cashed anything from previous load. So if you have a CDN, it’s gonna take a lot of the load off of your Your server is gonna be distributed across a couple different endpoints.
The last little advice I’ll give him This is a throwaway piece, but it’s, ah, something I
This is this is your thing.
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
be curious to see that. I was saying that those
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.
This episode of The Drunken UX Podcast brought to you by nuCloud.