Fundamentals × What Makes a Website Slow?

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got

Mentals episode for you today on performance or what makes a website slow. So we're gonna kind of go through There's the surface area of a website and servers and browsers and Internet and try to talk about like what actually makes something slow and where do you really have to look to figure out what what's been caused with me as always, Mr. Scott Talinsky. How are you doing today, Scott? Hey,

I'm doing good. We We wanna talk about what makes a website slow. Let's talk about what makes, Scott slow. I got a new keyboard that is very different than anything that I've ever Worked with before. And let me tell you, it's it's I got the Glove 80 and, it's it's kind of shaped like the Kinesis one where it's concave.

Rid.

And it's a split keyboard, and it's very, very cool, but it has, rid Obviously, taken a bit of time for me to to grok here. My my brain is still in Mac keyboard land. So, I am just pecking at these show notes trying to type here, and it is super embarrassing.

And I'm like, I'm I'm chatting with you on Slack, and every other word rid is a total mistake, so I will get there. I'm gonna I'm dedicated to learning this thing. And honestly, it feels really good to use, but, like, I gotta I gotta get that muscle memory baked in before I'm anywhere near here. What's the idea

behind getting one of these Glove keyboards?

Rid. There's there's some aspects to I mean, besides ergonomics. Right? This thing is, like, super finely tuned to reduce Finger travel when you're when you're typing. Right? So it's every key is way closer together.

It the having the split gives you a lot of flexibility in how you do things. There's really great things with your your thumb keys. And since it's a z m k key keyboard firmware, so it means that, like, there's a, There's software for the firmware that you can flash. Oh, yeah. You can run, like, custom shooters and stuff like that on it. Yeah. It's super it's super open source, and, you could do so many things with it. And I just wrote my very first it's not even that macro. Of macros. You can write you can have, like, 1 key fire off, you know, 1,000,000,000 events if you wanted to.

But I just wrote even 1 one of the thumb keys To simply trigger a ray cast, and it will do that no matter where I hit it, and it just triggers ray ray cast. So no more Keyboard shortcuts to have to do ray cast. I have it right on my thumb, and that sounds really, really simple, but, like, you can do a 1,000,000,000 things like that that, greatly increase your productivity across your entire, entire computer. And and honestly, I've been wanting a split Split keyboard for a long time for ergonomics but also just for the flexibility of it. And, man, this thing is is incredible.

I just need to Get my fingies used to it. And also if your website is slow, maybe you could use some tools to help you figure out if it actually is slow or debug it, something like century atcentury.i0, s e n t r y dot I o, is really an amazing service for debugging this type of thing because One of the cool things that Sentry added a little while ago I think it was a couple years ago at this point, but it's it still feels new to me because I've been using Sentry so long.

But they have all these performance metrics now, and you can get performance metrics and profiling of your, your application really super easily with a centuries services.

You just drop it into your site. Basically, add on to the the normal Sentry code that you're using, and instantly, you you end up being able to track the performance of every single route. You get some gorgeous looking graphs and charts.

I I can see exactly which of my pages is the slowest to load, and I can see it across all of the users using my site. I can see Exactly. That's, you know, maybe I feel like this page is is slow to me when I use it. And I can now see with definitive proof here that this page is slow. So that I don't need to spend time wasting my time debugging why forward slash tutorials is slow because according to my metrics here, Forward slash tutorials, not slow.

But some of the other pages might be needing a little bit of tweaking. And therefore, I can really spend the time that I need to know, figure out exactly where what's slow, what's not slow. And with the profiling, you you can get access to all of those Performance tracking type of things on your server side as well and understanding exactly how everything is working.

You know what? One thing I really appreciate about this is also that they They make it kind of fun. There's like a green smiley face for good, a orange meh smiley face, and it says meh, m e h.

I love it. So you can see exactly, like, at a quick glance, like, how happy are your users? And there's even something called the user misery score, which rid Gotta love. Right? Because when your site's slow as we're gonna be talking about in this episode, your users are not going to be happy. So head on over to century. Io. Use the coupon rid. Tasty treat, all lower case, all one word and get 2 months for free. Thank you so much to Century for sponsoring.

Slow websites, what makes a website slow, And how can we start to dive dive into fixing these issues? Yeah. I specifically started writing notes on this because I

Converted my users. Tech website, which is a list of everybody who has a users page.

And it's kind of funny because That page started off as 30 people, and it has grown massively to almost 700 people. And that causes the home page to be unwieldy large because it's rid. Like a 20 minute data, 200,000 elements or something like that. And it's kind of funny because it's not A JavaScript issue. There's not really much JavaScript on the page. It's not a CSS issue. It kind of is a CSS issue. It's a HTML issue.

And I was kind of dipping into, like, why is this slow? You know? And there's lots of answers to it. But I thought, like, Let's go through all the steps of like, okay, I have this website.

I don't know why it is slow.

And or someone's telling you your website is slow. It's laggy.

Rid. What do you what does that even mean? How do you approach it? So I think the first one here is server generation time. So the round trip of a website is Maybe we should explain that is somebody goes to a URL and that URL is goes from that user's computer over their Internet.

It does what's called the DNS lookup, which is rid. I go to scottolinski.com.

DNS lookup matches scottolinski.com with an IP address of where Scott's website is hosted.

And then rid That that server the request is sent to that server, and the server says, oh, there's a request here. Rid. And there's a possibility that that server is not awake yet. That's what's called cold start.

Most servers are long running, but now we're starting the serverless functions, edge functions.

Those things have to start up. And sometimes there's a little bit of Anywhere from 50 milliseconds up to sometimes up to a whole second to start that process.

Then the process has to take the request and say, Okay, what do I do with it? So if it's a Node. Js application, you might have like a router in there. The router matches it to the router will match it to some JavaScript logic that JavaScript will run. Maybe it looks up a database, then it gets some data back.

It loops over and creates some HTML and then sends it back to rid client then takes the HTML, parses it, downloads the CSS, downloads the JavaScript, and finally bada bing bada boom, it gives you a website,

Which is amazing that that works really. Yeah. Totally. Right? That's a it's a lot of stuff going on here. But, you know, this one is one of those ones that you can see specifically in your network request if you're, rid waiting on that time time for your your server to respond by heading into your dev tools, going to the network. And then when you load the page, You can see if the thing that's taking a long time is assets coming in, or is it the response from the server that gives you your HTML or perhaps it's the response from the server that gives you the content itself. And maybe it's not that the content is too too large, but maybe just that in that process of of doing something on the server side, you're taking too long. So like what kinds of things could take a long time on the server? Well, if we're working with a database, maybe you're doing some unoptimized database calls and database calls that are grabbing too many things. Right? Like, what if you're you only need a couple of things and you're grabbing a 1,000 things? That's going to slow your side down. Right? So being cognizant of what you rid need to be grabbing and and don't get anything more than that because there's no point in hitting your your your database to grab more out of your database than you actually need at that very moment.

And in another, you know, way, if you do need a lot of heavy things and if there is a need for a Lot of heavy data, then that's where you can step in and cache those results. You can cache them, in memory. You can cache them in a service like Redis or something like that. That way you don't have to do that database call every time and that data could be available to you because, you know, database calls, they can be very fast or they can be very Slow depending on how much stuff and what stuff you're pulling out.

Another thing to think about with slow server generation times could be concurrent rid. Quests. So if you are running maybe 2 database requests and they don't rely on each other, then you can run them concurrently sort of at the same time.

And that is pretty easy to do with promise. All or promise. Allsettled if you're using promises on your back end.

Pretty simple, and that will really speed things up. Generally, when you have a slow server request, you your dev tools will tell you how long it takes to wait for a response from the server, and then it will also tell you how long it takes to download all of that HTML from the server. But past that, you have to then start getting into your actual Logic on your server and start putting in logs and and whatnot. There's a lot of tools out there that will sort of analyze how long specific functions took to to run. And hopefully that will give you some at the very basic. You just console log.

What is it? Performance.

Now And you can use just like regular timers and you can figure out pretty quickly from just logging times where something

is is sort of eating up most of your time. Yeah, that's actually a really helpful tip because I've done that myself before where you're dropping in those those, because you can drop an intermediate one in there as well. Right? You don't just start 1 at the start and at the end, you can drop intermediate ones in there to rid Give you the the amount of time it's passed between certain steps, and then you can figure out which steps are taking the longest and then optimize those steps specifically or figure out why those things are taking a long time. Another thing that goes along with this is if you are working in a database, working with a database, making sure you have your index rid set up correctly. Right? If you're querying off of something and you don't have an index for whatever you're querying off of, That that call could take a lot longer as well. So, you know, there are different aspects to this. You kind of gotta you kind of have to be on. If you're a full stack. You're not spending a lot of time on the server. Maybe this is just passing off this to somebody else and saying, hey. This particular request is taking a lot of time. At the end of the day, the server again is just a computer process that's having to do things. And if it takes a long time, then, you know, the user is going to be hitting that rid that time sink as well. Another thing here to think about is, like, what kind of hardware is your server running on, and is it appropriate for the type of work And how much work you're putting into the server and having the server do. Because the server, just at the end of the day, is a computer. Right? And if your server has A CPU or RAM or whatever requirements, maybe perhaps you are using more than what the type of server you're on. Maybe you're Maybe you've cheaped out and got bought the cheapest server, space possible, and you're trying to do some heavy lifting with it, or maybe you have a lot of users who are all hitting your server at at the same time. And your server just isn't equipped to handle it. There's definitely tools out there to really keep track of how your your server's doing. I mean, Sentry even does a little bit of that with their profiling.

It's important to to know exactly what's going on here. Is your server rid. Not equipped to handle the load? Or is your server equipped to handle the load and you're asking it to do too much? And you can often just take a look at rid. Most host hosts will have a like a CPU and a memory graph.

You can take a look and see, rid. Am I using 80% of my memory at normally? If if that's the case, then you probably should just drag the slider and give yourself more memory and more CPU, something And with that, you can there's way more to scaling and whatnot, but at a very basic, bigger computer is better

is faster. I mean, isn't that the solution to solving anything is just rid. Dragging that slider all the way to the right so that

bill becomes unattainable. Exactly. Yeah. Next one we have here is you possibly have large payloads, read. Being sent. So one kind of interesting thing about the website that I made is that the HTML that is loaded on the home page.

Is are you ready for this? 1.34 megs.

Rid.

But that's not don't screenshot that and and try to tweet shame me just yet. LOL.

That's not the actual what goes over the wire because most, if I would say if not all,

servers have some sort of compression that It compresses it to the but while it sends it to the browser. So the big ones are Gzip and what is the other one? Brotli? Brotli. But I don't I think those may be used in, coordination. But I don't I'm not I'm not positive about that. To be honest, I would want to do a deep dive on I know Bradley is like A really good compression algorithm. And I think Gzip is something that the browser does, but I don't think the browser does broadly. I think broadly might be something you do in a process before it even gets uploaded.

Okay, so Gzip is the browser knows about Gzip, rid. But your your server has to have GZIP turned on, meaning that so if I'm I'm sending 1.3