Hasty Treat - Slow Connections Part 2

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest development treats coming in hot. Here is Wes Barracuda Bos and Scott El Toroloco Tolinski.

Welcome to syntax on this Monday, hasty treat. We're gonna be talking about slow connections, and, this is gonna be part 2 of these tasty treats that we're doing. Who knows how many we're gonna do because it seems like there's so many of these tips, these hasty, tasty tips here we got for you. My name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me as always is Wes Paws. How you doing? Hey, everybody. I'm excited to talk to you on my slow connection

about Slow connections. More stuff about how to account for slow Internet connections. Cool. Well, this episode is sponsored by Kyle Prinsloo's

study Wes development.com.

And with a little bit more about that is Wes.

Yes. Kyle Prinsloo has his course, which is everything you need to master freelancing.

Man, he's got over 25100 people have already taken this course, which is pretty impressive.

And what this is is a course. You go ahead and buy it, and you get all kinds of stuff in this course. There's an ebook for freelancing. There's an ebook for web design. There's a bunch of HTML CSS templates.

There's a CSS Spice Chrome extension.

What?

Yeah.

Cssspice.com.

Spice. Like a inspector extension to show you different properties and whatnot. If you select an element, it'll show you what's styling on that. There's a Slack community, a Facebook community. This is really important when you're trying to be a freelancer. Prospective client questionnaire because you need to know what are the questions you ask your client before you build something, a proposal template, SEO checklist. Oh, I'm not gonna go through absolutely everything on here because there's tons that you get with the bundle, but check it out at studywebdevelopment.comforward/freelancing, and you can see everything that you get in the bundle, in order to become a freelancer yourself. I think this is probably very a very good time to maybe brush up on freelancing skills because of the the shaky job market right now. I know that a lot of people will be in between jobs over the next couple months, which is unfortunate. But if there's any way to make a little bit of money while you're in between jobs and as well as keep on top of your web development skills. I definitely think freelancing is that. So we got a coupon code here.

It is syntax. That's gonna get you 25% off the entire course. Thanks so much to Kyle Prinsloo and study Wes development .comforward/freelancing for sponsoring.

How are you doing? You doing good? You're doing good? I actually got Scott my MacBook computer back in 3 days, so I'm on my my fancy new computer again once again. I'm impressed at how quickly you got that back. You have no luck with computers, so I'm surprised that you can actually get it back. Yeah. I bought a backup computer, which is kind of a crazy thing, but I bought a backup computer, which is going to be a Linux machine. It's a system 76 machine. So we're gonna do a whole episode on that in the future. So I know this is a hasty tree. We don't normally do banter at the beginning, but, you know, I just thought, like what we want. Yeah. We do what we want. We we make the rules here. Yeah. So let's get going. Let's first talk about images. Now images are one of the most killer things for any website's download time because there's just nothing you can do about images. They're going to be hefty, hefty, hefty just about all the time with some small exceptions, and there is a lot of different techniques you can use and utilize to make your usage of images just a little bit better. When you think about it, we have, like, a JavaScript bundle, and the solution to making your JavaScript less bundle y is to use less JavaScript. Right? But in an image, there's only there's only so much data you can remove for an image, right, before the compression gets to be bad. That's where you'll see a lot of companies right now. They're doing a lot of research. You have a lot of new image formats coming out whether that's Wes piece or or various things like that. But what are some strategies that we can have to reduce the load of our images? Now one, here's here's the here's the the beginner tip number 1. Do not serve an image larger than you need. I remember back in Dreamweaver days, there used to be a button that was, like, optimized image that all it did was make the image the actual I mean, this is in high school. Somebody's like, your images are huge. You just click that optimize image button. I was like, oh, wow. Okay. Yeah. Okay. Then it makes my site a little lot faster.

It should be, like, the very first step. Don't serve a little image larger than what you Node. 1st step. Next one we have here is resize your images on the client before uploading,

which is something a lot of people don't think about. They always think about, like, loading download fast, but if you have an application that where the user has to upload stuff, a photo off your iPhone is 3 or 4 megs.

They're massive. That that takes forever to upload on some of these things, and Scott to mention someone needs to upload 6 or 7 images. You're just killing their data plan with that. And it is so easy to resize images in the browser. You just pop it into a canvas element, resize the canvas element, pop it out of the canvas element, and you've got the the resize image. You can just convert that thing to binary string and and post it over to the server. So always think about that. Next 1 we have here is width and height content on placeholder images. So not a lot of people do this anymore because of responsive design. It's frustrating to set the width and height attributes on an image, but also make them responsive. But you can always overwrite within high attributes at smaller values. But it's really frustrating to go to a website and start reading something, and then have the content shift down or the button shift down because the image has then loaded in it. The browser knows how big it is, and then it has to to shift everything around. So width and height

is key for not having page jank as the slow Node is loading. Another tip we have here is to crunch your images to compress them with lossless compression.

There's a lot of different ways you can do this. A lot of build tools do it nowadays. There's also if you're working on a a little bit less of a build tool heavy process, which I don't Node, a lot of people probably aren't nowadays, but there's an app called ImageOptim, or there's a lot of image compression software on the web that you just drop your images to, and it removes all of the metadata.

Any of the extra color data that doesn't need to be there, all while keeping your images looking the exact same. And and I've seen, like, huge reduction image sizes doing this. This is something I would never not do. There's obviously ways to do this within your build tool as well and maybe even some stuff with you could have, like, a continuous integration sort of workflow with, like, a GitHub action or something that could go crunch your images on commit or something like that. I know you've experienced quite a bit of crunching things on commits with your Gatsby site and just how long image processing can take, but it really depends on your setup.

It Sanity be one of those things that is very nice to have. Totally. There's we've talked about this a 100 times. There's services. There's Git Hooks. There's local apps, all kinds of stuff. Just find some way to to compress your images.

Next up, we have, use SVG where possible. So a lot of times, the the logo of the website, a lot of these things can be used as SVG.

SVGs are significantly smaller and can be

infinitely scaled up because they are vector based. Yep. Definitely. And they can even be straight up server side rendered in line.

So next 1 is gonna be lazy load images where possible.

That's actually become increasingly easy given the fact that you can now just drop a is the tag just lazy? Right?

Yeah. Lazy attribute

on your image tag. So there's browsers that support the lazy attribute will take care of it. Other ones that won't, well, hey, they won't just yet, but at least that's some progressive enhancement for you. I use the React lazy load plug in that works really well for lazy loading images. I think that's something that it should definitely be done, especially for things that are out of the v port.

Yeah. That's that's easy one to add.

Next, we have scripts and CSS assets. So we we're not gonna talk about this again, but make sure that you're appropriately loading your your CSS and your scripts. We did a whole series of hasty treats on things that cause your website to be slow. Go back and listen to those ones. Next is video.

This is one thing I didn't do initially when I launched my course platform JS I just had Node type of video, and users on slow connections would not be able to smoothly watch the video because it just was too large. So some sort of player that does variable video processing, whether it will drop down to a lower resolution or something like that, absolutely key. Next up, we wanna talk about connections that go in and out. So you might have a fast connection, but if you are going into the subway or you, walk under a bridge or something like that and your connection goes out for a minute or even 10 seconds, it's important to show some sort of UI to the user that they are offline, and it's very easy to do this in your applications. You just have an ad event listener for the offline and online events.

You listen on the window, and then at that function, you can go ahead and set state online true or online false. You could probably make a React hook called use online that returns true or false. Very easy to do. Same thing with, like, if you have data that needs to be saved but is not pushed up to the cloud yet, telling the user I'm gonna retry to upload this or retry to save this in 10 seconds, I think Slack does a probably the best job I've seen Mhmm. On doing this. Yeah. Discord has a really nice one too. I think that is an important

capability, especially if it's, like, a real time thing. If it's a website, obviously, you don't need to alert people. But if it's anything where people are inputting content and viewing content in real time, then, potentially, I think that's an important aspect.

So next 1 is gonna be service workers.

Now I'm interested in maybe getting maybe we should get, like, a service worker expert on here. Service workers are a bit of a mystery to me in terms of writing us. Like, I could not write my own service worker from scratch, but I have never tried, and I've never really looked too in-depth at it. Do you know the internals of what a service worker does exactly, how it does it? Yeah. Yeah. It I've talked about a little bit on the CloudFlare

Workers API because it's very similar JS that a service worker sits at the network level and intercepts requests. So that's that's one thing it does JS it sits at the network level and allows you to both save values to your cache as well as intercept requests and serve up cache HTML, CSS, images, things like that. Service workers can also be used for other things as well, but that's probably the most popular one is is showing an offline version of the website.

They are a little bit tricky. I'm always a little bit scared to put them on because you can accidentally get into a spot where you cache the website and then someone visits it. Luckily, you can always a service worker will always try to check for a new version of itself on every page load, so you can always clear that cache. But I agree that they're much harder than I think they have to be. They are. Yeah. Google is working on something. It's like worker.

Workbox by Google is a a nice little library that will allow you to do things like, progressive web apps very easily without having to to know all the nitty gritty service worker stuff.

Interesting. Yeah. I've never heard of that. Yeah. Cool. So next 1 we have here is font loading. So one one trouble with fonts in the browser is that if you use a custom web font, then your browser will show you nothing until that font has then been loaded, which is frustrating to the users because they don't care about your custom font when their Internet is slow. They just wanna read the actual content of it. So you can use the font display property of your font when you define the app font face, and you can set it to fallback. You can set it to swap.

Swap is most likely what you want Wes it will take, like, a 100 milliseconds or 200 milliseconds. And if it hasn't download or sorry. That's fallback, not swap. Fallback will try to download the font, and if it's taking too long, then it'll just show the fallback font face, which is which is what you want. And I think that's also the default in a lot of browsers Node, And your browser will also determine how long it should try to download the font before it then falls back. But definitely check out your font display, especially if the developer have that font installed locally on your computer, and it just shows up immediately when you visit.

That's why I always like to name my fonts something different than what they are on my computer. Oh, nice. So that you can still get the feeling of what is it like for regular

visitors. In the very like, the case where performance is absolutely essential in these things and you can using a system font is going to be the fastest every single time. There's going to be no font download requirement, you know. There's this little snippet. I'll put it in the show notes here. It's font family,

Apple system, Blink Max system font Mhmm.

Sego UI, Roboto, Oxygen, Ubuntu, Open Sans, Helvetica new. It's just, like, massive font stack that will give you a really nice font regardless of of what you're on, and that's kinda my default. And then I'll I'll go for a custom font usually on headings and things like that. Word.

Next one we have here is just some CSS tricks like the like the website. If you have text over top of an image, make sure that your background color matches that Yes. As well as possible. Because if you have, like, a white background and a black image and you've got white text, you're not gonna be able to see that text until the background image loads. So make sure you set your background image show your background color to be something similar to that image.

Yeah. That's actually a really good point. I don't think about that a whole ton, but that is that is definitely right. So let's talk briefly about, like, testing these things. I don't know. There seems like there's a 1,000,000,000 services to test these things and to really experience them. I use, obviously, the audits tab within Google Developer or Chrome developer tools to really run an audit to see where the potential slowdowns could be. But like you have listed here, the the ability to mimic a slow connection goes a really long ways. Now Wes doesn't need to mimic a slow connection because he has one right now, but I have a really fast connection, and, I often forget a little bit about just how fast my connection is. So if you head into Chrome developer tools, you head to the network tab, you'll see that they have the Sanity. There's a drop down. It typically, by default, is online, which just means you're online. Now you can test to see your site in offline here already, but you can also test to see if it's any fast three g network. Three g? Yeah. Fast three g or a slow three g, or there's some custom ones where you can actually get down into the nitty gritty of throttling it so you can make a custom profile and choose the actual amount of KBs, download upload latency, all that stuff. You know what? I'm surprised they haven't updated this to have, like, 4 GBD option because, like, honestly, 3 g who's using 3 g still? You you give me an pnpm network next? Check your privilege out the door, Scott. A lot of people are still on three g. Are they? Myself included. Are you? Yeah. Oh, yeah. Man, I'm I'm not with that. I well, because Scott of, like, 5 g is the thing now, so I just figured 4 g was ubiquitous.

My phone regularly dips into 3 g Well, I take that back. I'm sorry. Depending on on how far I am from the yeah. Plus, like, also, we're thinking about just, like, all around the world, and and a lot of developing countries don't have 4 g absolutely everywhere because, like, the faster these connections get, the more towers that are needed. So 5 g needs towers every couple blocks, whereas 3 g needs towers every, I don't know, 10, 15, 20 kilometers. So there's a lot of places.

I guess it's different in Canada because Canada is a massive country with, like, a tenth of the population of the US, and there is a lot of spots in Canada that still don't have have LTE connections or the LTE connections are are heavily throttled. Like, I I do get LTE up here, but they're heavily throttled just because there's 2,000 cottagers on the one tower.

And 1 tower can only do, like, a 100 megabits, I read. And Scott's here sitting with 10 times that on 1 Internet connection for his office. Right?

It's nuts to to think about. It is. It is. And and I I understand that JS not common. In fact, for a very long time, I just really wanted fiber Internet forever and ever and ever. I would've watched the the updates of when it's gonna roll out to Google and whatever. And then one thing, we just got a a little letter in the mail that says CenturyLink has fiber. Now granted, CenturyLink does not deliver the speeds that I'm paying for, but it's it's like, am I going to really complain that hard getting 700 up and down or something when I, like, am paying for a gig. I don't I'm probably not gonna complain about that.

It's important, I guess, if you're doing video and stuff like that, but I would absolutely love to get that. I can't wait for the day. Like, I bet in the next couple years, we'll get that where I live in in Hamilton.

And it's important to Node all of this. Even just even if you have, like, 15 megabits down, that's fast enough to load most websites in a second or so, but it's it's when you get down to just, like, 1, 2, 3 megabits down. That's when a lot of these things that I'm talking about here start to show their cracks. Come to a crawl. Yeah. Especially in today's JavaScript framework world. Am I right?

There you go. Let's start the flame war.

Alright. That's it for today. That's all the things I have. Oh, I I should also say you can throttle your connection in Firefox as well. You have to use the mobile emulator, and there is a dropdown that says the different types of throttling. And that 4 g LTE is an option.

Cool.

Thanks so much for tuning in. If you have any tips of your own, make sure you tweet us at syntax f m, and we will catch you on Wednesday.

Peace.

Our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.