FreshySites Founder Ben Giordano and Support Specialist Michael Alderson explain the importance of website speed, resources to test site speed, solutions for poor page speed and even run through a case study to walk through the process and results.
-
What is Site Speed, Why is it important?
Site Speed is based on how quickly users are able to see and interact with website content. Page-load time (front or backend viewing) is determined by several factors:
- The database queries executed while the site loads.
- Functionality on a website can directly affect site speed. The number or size of external resources included in the site.
- Speed can differ across a variety of perspectives (ie: in different browsers, in different countries, on different networks).
-
Site Speed Tests
Not All Site Speed Tests are Created Equal
One of the important things to note in differing site speed test results is that the metrics by which the site speed is measured vary greatly from test to test, as does the weight they’re given when calculating the final scoring, even if the core measures remain constant.“There are lots and lots of different testing resources out there. One of the really popular ones is PageSpeed Insights. What we use internally is WebPageTest. And one of the big differences between these two is that PageSpeed Insights uses a program called Lighthouse, which exclusively tests on what are called throttled connections, and they’re also on virtual machines. Essentially a virtual machine that has had its connection speed artificially slowed down. Whereas the system that we use internally, WebPageTest, tests on real devices on various different networks, and we’re able to then kind of garner more accurate information about the actual page load times rather than relying on artificial data.”
Video Transcript
Ben Giordano – Founder, FreshySites:
Okay, cool. All right, awesome. Cool. All right, so I think the conversation today, and I’ll just kind of start informally is about site speed. And we’re kind of hoping to kind of just uncover what that is and what that means and if that’s something a company should be concerned about, an organization should be concerned about, for their website. So maybe the best thing to talk about to start… Well, I guess first, why don’t you tell us who you are. We have Michael here and Michael, could you give a quick little intro about who you are and what you work on for FreshySites.
Michael Alderson – Support Specialist, FreshySites:
I’m Michael. I’m one of the support team members at FreshySites. I work doing a lot of updates and fixing broken things and making sites run faster and writing custom functions.
Ben Giordano:
That’s awesome. Michael has been with us for… What was it, two years or so?
Michael Alderson:
Almost two years.
Ben Giordano:
Yeah. He’s been awesome to have on the team and really helpful, really sharp guy. One of those guys you can throw problems at all day long and he just figures ways out to fix them and very highly technical and really understands kind of how things work, which is a great kind of asset to have on the team. he’s got a great attitude too. He’s been a great guy to work with. I figured we pull him in just to talk about the site speed thing a little bit. Site speed in general, can we just kind of define that? Should we set loose terms around that? What is this site speed thing that everyone’s always talking about?
Michael Alderson:
So site speed, what everyone is talking about, is really how fast your site loads. And there are a couple of different ways to look at it. There’s the technical way to look at it. We’re going to look at every asset that’s loading and how fast it’s going to load, but then there’s also how it feels to the end-user. And that’s a really important factor because hitting necessary specific numbers doesn’t always affect how your site feels to whoever’s visiting that site. And that’s really what it’s about. It’s about loading content quickly and getting people to the information they’re looking for as quickly as possible.
Ben Giordano:
Okay, cool. Nice. So it’s like there’s some metrics around it, but then there’s also this kind of more anecdotal test of just how it feels when you’re actually interacting with it.
Michael Alderson:
Yeah, for sure.
Ben Giordano:
Okay, cool. Nice. And just in terms of when a site loads, could you just run through what does that mean? Do different assets kind of load in at different parts? How does a website load in general in the browser? What does that even look like?
Michael Alderson:
Well, let’s breakdown what we even mean by assets, right? So we’re going to talk about the different portions of code and the code that are being loaded, as well as the actual content on the page and the images themselves. So when a website loads, it’s going to start reading right at the head of your file, and it’s going to start looking for the files that it needs to include, be that a JavaScript file or a PHP file or a CSS file, which is the styling of your site. And then the images followed by the content. And so those are going to be weighted and then determine how quickly things load and then how quickly things appear on the screen itself.
Ben Giordano:
Okay. So the browser has to go, we call it fetching these files. They have to kind of read the file paths, almost like you’re looking up files on your computer, and then it has to go fetch those files and then return them to the browser, and then those files sometimes point to other files, which it has to reference. And it does all this stuff really quickly before you even see anything on your screen, it’s all kind of happening in the background.
Michael Alderson:
It all happens in the background, yeah.
Ben Giordano:
And then usually within a couple of seconds, now you start to see things kind of pop up and those could be images or text or things that.
Michael Alderson:
Or background colors even. Sometimes you’ll see a wireframe load first before you see anything else. That’s obviously not ideal, but that can happen.
Ben Giordano:
Okay, cool. And besides the actual interaction and the actual feel of the site and the clients using it, what else does that affect? Because I know it’s a big buzzword right now in website design and web development in general, it’s page load. And particularly with mobile, we keep hearing about it over and over. It’s so critical to have your site load quickly on mobile. Why is that such an important thing? Is it for SEO or does it affect bounce rates, maybe? Those are some of the things that I think about when I think about page speed.
Michael Alderson:
I think that one of the number one things in terms of, if you mention bounce rates and such, one of the number one things that site speed is known to affect is revenue. The revenue of a company. People will go to a competitor, or go somewhere else to find that information if they’re not getting it fast enough. And because the whole world is moving towards mobile for the primary use of the web, mobile site speed, in particular, is becoming increasingly important.
Ben Giordano:
That’s crazy. I’ve seen some pretty wild statistics about how people if the site doesn’t load within three seconds, you’ll lose 65% of all the visitors or traffic or whatever. It’s that crucial to maintaining traffic and bounce rates.
Michael Alderson:
Yeah. And then every second that you increase that even, you lose even more revenue.
Ben Giordano:
It’s exponential.
Michael Alderson:
Yeah.
Ben Giordano:
That’s crazy. Cool. Well, I think that kind of sets the tone a little bit in terms of background, what page speed is, kind of what happens with the browser when you go to open a website, and this is all kind of aside of the fact that we’re kind of starting with a solid internet connection and kind of keeping all of that as a consistent base, right? I mean, obviously, if you’re on bad 3G somewhere versus on a fiber connection at an office, it’s going to affect the load speed, but we’re talking primarily about the time the website loads from the server to the browser, right? Not necessarily from your computer to the server. There are two legs kind of, in the journey that need to happen, right?
Michael Alderson:
Yeah.
Ben Giordano:
Okay. I think the next thing I want to talk about real quick, Michael, is if you could shed some light on some of these speed tests that everyone’s always throwing around. What does that mean? Is that important? Is it super important? What does it even do? And then maybe we could look at a couple of samples together and you can kind of help break them down a little bit.
Michael Alderson:
Sure. Site speed tests. There are lots and lots of different testing resources out there. One of the really popular ones is PageSpeed Insights. What we use internally is WebPageTest. And one of the big differences between these two is that PageSpeed Insights uses a program called Lighthouse, which exclusively tests on what are called throttled connections, and they’re also on virtual machines. So it’s essentially a virtual machine that has had its connection speed artificially slowed down. Whereas the system that we use internally, WebPageTest, tests on real devices on various different networks, and we’re able to then kind of garner more accurate information about the actual page load times rather than relying on artificial data.
Ben Giordano:
Okay, cool. That’s awesome. So PageSpeed Insights, that’s a Google tool, right?
Michael Alderson:
Yes, it is.
Ben Giordano:
Okay. That’s probably one of the more popular ones though.
Michael Alderson:
Wildly more popular.
Ben Giordano:
Everyone kind of uses that one as a basis, but there are others that we feel like might be a little more accurate, right? Like the one that you mentioned.
Michael Alderson:
Yeah. GTmetrix is also a really good one.
Ben Giordano:
Okay. GTmetrix?
Michael Alderson:
Yep.
Ben Giordano:
And then what about… There’s another one that’s really popular too. Pingdom.
Michael Alderson:
Pingdom is also a really good one, yeah.
Ben Giordano:
Okay, cool. So what I was thinking is maybe we could just use a website as a sample and just kind of run through these speed tests a little bit, and maybe you could help analyze them just as a quick little case study. I promise I won’t take up too much of your time.
Michael Alderson:
Of course, yeah.
Ben Giordano:
Okay, cool. So I’m going to present my screen, just that I kind of have everything prepped here a little bit. And I figured just as a case study, because I actually already ran this one through PageSpeed Insights, I figured we’d use the Apple homepage.
Michael Alderson:
Excellent.
Ben Giordano:
So we can see, we can test these guys, and see how good they’re really doing. The most valuable company on the planet, let’s see how their PageSpeed Insights works.
Ben Giordano:
This is the PageSpeed Insights tool from Google, right? It’s developers.google.com/speed/pagespeed/insights. And we can we can post that link for people so they can see it. But essentially what you do is just grab the URL and just drop it right in here and just click analyze. And then it’s running through. Now it’s running through that fetch process. It’s running through kind of analysis, as Michael mentioned, and it’s kind of using the slower virtual machines to give a more accurate representation, I guess, of what they feel like the score should be.
Michael Alderson:
Well, it’s using an accurate representation based on the average worldwide speed of modern networks.
Ben Giordano:
Internet. Okay. Gotcha. Cool. So here’s the Apple site and here’s the mobile, and you can see here it’s
mobile and desktop. So you can see the mobile version scored a 52 and the desktop version scored a 73,
which is okay. You know, it’s not great. And if you were running a business and you ran your website
through here and you saw 52, you’d probably not be super happy about. It seems like a bad score.
Michael Alderson:
It does.
Ben Giordano:
Although, Apple is one of the top companies on the planet. So it seems like… How does that correlate, I guess is my first question. That seems a little off.
Michael Alderson:
Well, we’re going to look at at that first Contentful Paint right there. That’s 2.3 seconds. So with the first Contentful Paint is essentially above the fold content is loaded. You’re visually able to see, the website is landed, you’re able to see the above the fold content.
Michael Alderson:
The benchmark industry-wide is about three seconds right now. Regardless, the average load time is, I think, still in the six-plus seconds range, but at 2.3 seconds for a Contentful Paint, that’s pretty respectful. You’re able to load that content in under three seconds, you have a page that they can then begin to interact with.
Ben Giordano:
Okay. That’s a pretty important metric. That’s really when you can actually see the site.
Michael Alderson:
Yeah. That’s a very important metric.
Ben Giordano:
Okay. And what’s the difference? Do you know what the difference is between that and the largest Contentful Paint?
Michael Alderson:
The largest Contentful Paint is scrolling all the way down, you should be able to visualize all of the contents. So the largest Contentful Paint includes the below the fold content.
Ben Giordano:
Oh, cool. Nice. That’s great. That’s super helpful to know. First input delay. What does that mean?
Michael Alderson:
The first input delay is once you’ve sent the request to the server, the initial delay before the server responds to you.
Ben Giordano:
Oh, okay, cool. Great. And then I guess we might as well talk about cumulative layout shifts. There’s a lot of jargon on this page. Could you help us unravel that one?
Michael Alderson:
Yeah. So that literally is about the layout shift from desktop to mobile.
Ben Giordano:
So in responsive design, how that works is when you load a responsive website, responsive design is kind of a way to build websites so that they work across all screen sizes, but there’s a quick little half-second where the browser tells the server what screen size it is and then the server has to return a certain set of CSS and rules that accommodate that screen size and shift everything, right? Does that kind of sum it up?
Michael Alderson:
Yeah.
Ben Giordano:
Okay, cool. That seems pretty quick. 0.01
Michael Alderson:
It’s very quick, yeah. Very nicely mobile-optimized site.
Ben Giordano:
Cool. Okay. So, this kind of shows now this is the lab data. Field data. Lab data. Do you know what the difference is between the two?
Michael Alderson:
Field data used to be testing on unthrottled connections, whereas lab data is the virtual machine test data.
Ben Giordano:
Okay. Gotcha. So these differ a lot then, compared to the field data. Okay.
Michael Alderson:
You’ll see even here that the first Contentful Paint there is showing two different numbers.
Ben Giordano:
Completely different.
Michael Alderson:
4.96 seconds. So that lab data is 100% a throttled data.
Ben Giordano:
Okay. Gotcha. This kind of shows just what the site looks like over time. This is a time-lapse almost, right?
Michael Alderson:
Yeah. As it loads.
Ben Giordano:
Okay, cool. So now this tool says, well here are some ways you can improve your weak results, basically. And it just shows us some opportunities. So maybe we can just run through these real quick too if you don’t mind.
Michael Alderson:
Oh, sure. Definitely.
Ben Giordano:
Eliminate render-blocking resources.
Michael Alderson:
Click that dropdown. So they’ve got some JavaScript loading, some CSS loading.
Michael Alderson:
These are all things that are going to load before it visually starts to load.
Ben Giordano:
Right. So —
Michael Alderson:
So anything that’s going to be render-blocking is going to be something that needs to load for the site to appear the way it’s supposed to appear.
Ben Giordano:
Before the Contentful Paint, in other words.
Michael Alderson:
Right.
Ben Giordano:
Okay. Yep. That makes sense. And what about when we initially kind of talked about the file being read in from the browser, it’d have to grab a bunch of stuff, cross-reference a bunch of stuff, kind of preload things, and that’s this section that we’re talking about.
Michael Alderson:
Yeah. For sure.
Ben Giordano:
Okay. That makes sense. Good. So here, these are just CSS files that kind of tell the website how to style what the layout will look like. These are custom fonts that it’s pulling in, some JavaScript, and it looks like some CSS for a modal. So, I guess my next question is, how would Apple fix this?
Michael Alderson:
They wouldn’t.
Ben Giordano:
Okay. They would not fix it.
Michael Alderson:
They wouldn’t address these. These are necessary files for it to appear the way it needs to appear, and
so they wouldn’t address them at all.
Ben Giordano:
Okay. But it’s saying eliminate render-blocking resources. Is there’s just no way to do that? Or this is where it’s kind of this gray area where it’s kind of giving you almost a false positive?
Michael Alderson:
We’re now into the gray area about how it feels. If they were to eliminate these render-blocking resources, what you would see load first is a wireframe site that is basically just an outline of links.
Ben Giordano:
Not styled, because of the CSS.
Michael Alderson:
Not styled at all.
Ben Giordano:
Right. That makes sense. Cool. Then the next one is to serve images in next-gen formats.
Michael Alderson:
You’ll see there’s some additional formats listed there, JPEG 2000, JPEG XR, and WebP. Although, WebP is not universally accepted yet.
Ben Giordano:
Okay, so basically they’re just saying, hey, instead of loading standard JPGs, you could load JPEG or JPEG 2000 that are a little higher compression rate.
Michael Alderson:
Higher compression rate or a higher quality image. If you loaded maybe a PNG here, you might get a higher quality output.
Ben Giordano:
Okay. Gotcha. Cool. And then efficiently encode images. I think that’s the same thing.
Michael Alderson:
These are probably not as compressed as they could be.
Ben Giordano:
Oh yeah, it’s showing potential savings of 400 kilobytes.
Michael Alderson:
Yeah, compression size.
Ben Giordano:
Okay, so basically the images are just too big. We could make them smaller or compress them. Compression is the idea that you keep the same size, but you’re just losing a little bit of quality to make a smaller file size, right?
Michael Alderson:
Yeah. You’re reducing the density of the pixels, essentially.
Ben Giordano:
Okay, cool. Nice. So that can make the files a little smaller and save us some load. Remove unused JavaScript. So it looks there’s some stuff they might not even be using.
Michael Alderson:
Right, but this could be content that’s below the fold, that it may still need to function.
Ben Giordano:
Okay. Gotcha. Cool. Same thing with CSS?
Michael Alderson:
Yep.
Ben Giordano:
Okay, great.
Michael Alderson:
Because it’s responsive, it’s loading also the desktop version and so technically you don’t need to load a desktop version if it’s only loading on mobile.
Ben Giordano:
Okay. Gotcha. And then diagnostics. We talk about insure text remains visible during web font load. I’m not sure what that means.
Michael Alderson:
Well, so what that means is that it’s possible, from a code perspective, to load the site and the content without allowing the CSS to style the font that’s in use.
Ben Giordano:
Oh, sure. I’ve seen that before where even maybe it queued improperly. On some sites, you kind of see the file. What that means is it’s loading in improper order, or they changed the order, so sometimes you’ll see a typeface and then after a split second, it changes.
Michael Alderson:
It’ll shift, yeah.
Ben Giordano:
Okay. So, that’s what this is. Yep. That makes sense. Do you not use passive listeners. Improve scrolling performance.
Michael Alderson:
One, they’ve got a passive listener.
Ben Giordano:
Such as waiting for inputs on the scrolling basically?
Michael Alderson:
Yeah.
Ben Giordano:
Okay, cool. Great. And then down here it shows a bunch of past audits, so properly sized images, different offscreen images, minify CSS. This is basically all your gold stars you’ve gotten down here. Okay, great.
Ben Giordano:
We got into the weeds a little bit, but that kind of explains a little bit about how they come up with this 52 score. And then if you click over to the desktop version, they’re basically doing the exact same thing and giving the exact same diagnostics and same opportunities, although they’re changed a little bit for desktop instead of mobile.
Michael Alderson:
Yeah. And they’re weighted a little differently in desktop and mobile.
Ben Giordano:
Oh, okay. Because of the network connection is often better?
Michael Alderson:
Because of the average speed of the connection, Yeah.
Ben Giordano:
Okay. Gotcha. Cool. So if you still have a few more minutes, I’d like to just run it through a couple of the other systems, just so we can kind of see what those look like. We don’t have to go into as much detail, but just to get a high level overview. Is that cool?
Michael Alderson:
Oh, absolutely.
Ben Giordano:
All right. So the next one is webpagetest.org. So let’s plug the website in here now. Test location, does
that matter at all?
Michael Alderson:
It does, because server location and how far that data has to transfer does in fact impact how fast it’s loaded.
Ben Giordano:
Okay. Any preference?
Michael Alderson:
I mean, it depends on where the site is and what the target is. So if it’s a global target, it doesn’t matter
quite as much. Local targets, you want to test closer to where that server is.
Ben Giordano:
All right. Let’s just grab Virginia. That’s out of the DC area, probably a pretty
densely populated area.
Michael Alderson:
Very dense, yeah.
Ben Giordano:
Do you usually do advanced testing or simple testing?
Michael Alderson:
I always do advanced testing. You also, if you have an SSL, you always want to test the HTTPS instead of the HTTP so that you don’t have that added redirect.
Ben Giordano:
Okay. Gotcha. And I’m sure everyone kind of knows what that is up here. You know, you have the little SSL certificate that kind of encrypts the data between the browser and the server. So that’s what Michael talking about. And you just want to make sure you grab the HTTPS version, if it has an SSL certificate. So that’s what we got here. So it looks we’re in good shape. So we just click start test, yeah?
Michael Alderson:
Yeah.
Ben Giordano:
Cool. Now I got to do a little CAPTCHA. Select all spheres with crosswalks. All right, let’s see if we can do this. I don’t know if that counts. What do you think?
Michael Alderson:
I wouldn’t click it.
Ben Giordano:
That’s iffy. Let’s see if we pass. Yeah, we got it. How long does this usually take?
Michael Alderson:
This takes a couple of minutes, although, because these run on actual devices, these will get queued if
there are a lot of people testing on that specific device.
Ben Giordano:
Okay, cool. That came back pretty quick. All right, so I guess you’re going to have to explain this one to
me because this looks a little more technical than the last one.
Michael Alderson:
Okay. So there are a few similarities here. So we’ll see up in that first little section, the first Contentful Paint we’re going to look there. That’s a pretty accurate number. It’s pretty relative to what was displayed on a PageSpeed Insights. It’s slightly different, probably right in the middle of the two different, the desktop and the mobile.
Ben Giordano:
That’s 2.780 seconds there.
Michael Alderson:
Right.
Ben Giordano:
Okay. Gotcha.
Michael Alderson:
Largest Contentful Paint is at 3.23. That’s all pretty good.
Ben Giordano:
This is a desktop?
Michael Alderson:
Yeah.
Ben Giordano:
Let’s see how that scores. So first Contentful Paint 1.32. So this is showing it as a lot slower, actually.
Michael Alderson:
It’s a little slower, yeah.
Ben Giordano:
Interesting. Okay.
Michael Alderson:
I would think that this probably has slightly more actionable data here, because this is testing on real devices. If you click the little waterfall that’s to the left of the first image there.
Ben Giordano:
This run one?
Michael Alderson:
Yep. Run one. The waterfall view is going to give you a breakdown of as the assets are loading, what the order of the assets are that are being loaded. If there’s waiting or if there’s something that’s stopping them from loading.
Ben Giordano:
Cool. So this is a timeline across the top here. Point two seconds. Point four. And then this is everything that’s loading across that timeline.
Michael Alderson:
Right, and how long that particular asset is taking to load. So you can see they’re really not loading a whole lot of assets here. They’re all pretty quick.
Ben Giordano:
Cool. So we can see this watch series logo hero file took 123… Is that in milliseconds?
Michael Alderson:
Milliseconds, yeah.
Ben Giordano:
And that happened at number, what, 37. It was the 37th item to load. Cool. And we could see what order they loaded in. Do these things, these later ones, have to wait for these prior ones, yeah?
Michael Alderson:
Yeah. Most of them, it looks like, have dependencies that they’re waiting for.
Ben Giordano:
Okay, cool. All right, awesome. That’s great. And what about these big call-outs, these lines and stuff?
Michael Alderson:
You’ll see there’s a color code right at the top about what those lines are.
Ben Giordano:
This is the font?
Michael Alderson:
That’s going to be a font. The straight orange line is a connection.
Ben Giordano:
Okay, cool. And then do you know what this yellow is down here?
Michael Alderson:
Usually, the yellow indicates an issue with that particular asset load. And so maybe it’s loading too slow. It’s going to call out something and say, hey, here go take a look at this file.
Ben Giordano:
Okay. So how do we use this? It’s very cool and it looks neat, but what do you do with this?
Michael Alderson:
What you do with this is you’re going to, okay, so we’re getting a bad test result, right? And so you’re going to go and you’re going to look for what’s taking so long. A lot of times you’ll find right at the top, the first thing we’ll have is what’s called a long time to first bite. And that often is you have a conflict on your site or you’re not properly caching your content yet.
Michael Alderson:
As we get down here, it’ll also tell us, are we loading these assets from the CDN? Or have we improperly in queued an image so that although it’s a static image, it’s not loading from the CDN and rather it’s loading directly from the site, which will actually slow it down a little bit.
Ben Giordano:
Gotcha. And that’s down here.
Michael Alderson:
Yeah.
Michael Alderson:
That’s the connection view. And then we can also see Apple uses their own CDN, so it’s a little harder for us to parse what the CDN that’s in use is. I think if you scroll to the top, you’ll see they get an F for CDN use, but it’s only because their CDN isn’t recognized by this page test.
Ben Giordano:
Oh, I see. Is that this cache static content?
Michael Alderson:
Yeah.
Ben Giordano:
Okay. Gotcha. Cool.
Michael Alderson:
They’re also getting an F for compressed images. We could take a look at what those images are and see if maybe they in fact could be compressed further than that.
Ben Giordano:
All right.
Michael Alderson:
An F means they have [crosstalk 00:24:51]. It’ll just take you down here to the lower section.
Ben Giordano:
Wow. Let me go back one. I think I might have skipped ahead. You have a sub menu here that kind of talks you through… Wow. This is a crazy tool.
Michael Alderson:
That really walks you through. All of the things, like the first Contentful Paint to the speed index, those are also links that are going to help explain what that specific metric is measuring.
Ben Giordano:
Oh, cool. Great. This is a really nice little tool. Great. Cool. Super helpful. So then down below here,
request details. What can you [crosstalk 00:25:25]?
Michael Alderson:
These are going to be the details of the asset requests that are being made, what the time to first bite for each asset was, the content download, the bytes downloaded, so how large the file is, where it’s coming from, and if you’re getting any error codes in the error status codes, those are pretty important. If something is redirecting 200 is a success. So that one that’s highlighted, that’s a 302. That’s getting a redirect, and that’s why that one’s highlighted. And so it probably could be loaded a little faster if it wasn’t redirected.
Ben Giordano:
Gotcha. Okay, cool. That’s great. So the rest of these navigation items, like performance review, content breakdown, these are things that just really help us dig in and see kind of what’s happening on page load and how we might be able to continue to optimize that.
Michael Alderson:
Yeah. They really help us dig pretty deep into what’s going on in terms of the actual assets.
Ben Giordano:
So in terms of remediation, you would essentially dig into these tools, do some analysis, find your pitfalls, and then you’d go about remediating those and retesting and kind of continuing that process until you begin to check off all the boxes.
Michael Alderson:
Yeah, absolutely.
Ben Giordano:
Cool. That’s awesome. All right. Well, I won’t keep you for much longer. I just wanted to run it through a couple more of these little tools and we can just see just real quickly. Here’s another one that Michael mentioned, GTmetrix. So we can analyze that one. These tools are all completely free. Is that right, Michael?
Michael Alderson:
Yeah, they certainly are.
Ben Giordano:
That’s cool. While that one’s running, let’s also run it through Pingdom. Let’s make sure we pick a North
America. Let’s go with San Fran, Apple’s on the West Coast, see what that looks like.
Ben Giordano:
It looks right now, GTmetrix is running it. Again, it shows page score. Why slow speed. Load time. And then it kind of breaks down almost a little more similar to the PageSpeed Insights, where it kind of gives you the score for each thing and then shows you how you can remediate them.
Michael Alderson:
Yeah.
Ben Giordano:
Browser caching. That’s another one that you had mentioned.
Michael Alderson:
Yeah. Caching is of course super, super important.
Ben Giordano:
And so caching, just for folks who are watching this, could you explain the idea of caching real quick?
Michael Alderson:
So there are a few different levels of caching, but the basic principle of caching is that it’s going to store the visual output, either on the server or in your browser, or it’s going to store the assets so that it doesn’t actually have to fetch all the way from the server already, it’s going to load it right from your browser because you’ve stored it already, or it’s going to load a stored version from the browser so that it doesn’t actually have to interpret the whole file because it’s already done that already from a previous visit, so it’s able to show you that content.
Ben Giordano:
Okay. So you’re almost loading the site from your browser instead of from the internet or parts of it.
Michael Alderson:
Parts of it anyway, yeah.
Ben Giordano:
So you saved that whole other leg of the journey between the browser and the server.
Michael Alderson:
Right. So if you’ve got a JavaScript file that’s used on a lot of different sites already stored in your browser, it’ll just load that file.
Ben Giordano:
Yeah. Okay, cool. That’s awesome. Great. And then this last one is Pingdom. So this is another tool. It looks they scored only a 79 here. And they’re saying that it’s a cookie free domain. Not sure exactly what that means. But expired headers, fewer HTTP requests. This tool doesn’t really look as… Well, I guess it’s more detailed down here. I’m not sure how you feel that this one stacks up.
Michael Alderson:
I don’t use Pingdom quite as much personally, but I just really like WebPageTests just because it’s got a lot of really good, actionable details there. I know that a lot of developers find Pingdom very helpful. It’s very similar in terms of the breakdown of the waterfall and stuff and being able to really identify what’s going on with the assets themselves.
Ben Giordano:
It looks also this might just be a really watered down free version, and it looks like they have a more robust paid version, which probably gives you all the detail. So maybe this one wouldn’t be a great option for a small business or someone who’s just looking to improve their page speed without being a full blown development shop or some sort of major company organization.
Michael Alderson:
Right.
Ben Giordano:
Okay, cool. Awesome. Well, I think that there’s a lot there and I think we covered a lot, but hopefully that gives people an idea of kind of what this whole page speed optimization, website speed optimization, thing is all about. It’s kind of good to see a company like Apple, even being who they are, still kind of being in that 50 to 70 range. It’s really interesting for me, because we get so many inquiries at FreshySites about my website’s only scoring at 64. That’s not good enough. And it sounds like once you start peeling back the layers, it becomes a more complex problem than just a simple number.
Michael Alderson:
For sure. I think that certainly with PageSpeed Insights, if you get a really low number, there are real problems that need to be addressed, right? That’s a whole different thing than falling in the middle and saying, oh God, this isn’t fast enough. Whereas if you’re hitting up a 10 or a 12, there are real problems with your page speed that are going to start affecting your revenue.
Ben Giordano:
And some of those problems, honestly, can be really easy to fix even, right?
Michael Alderson:
Oh, yeah.
Ben Giordano:
You’re downloading huge images is one we see all the time.
Michael Alderson:
All the time.
Ben Giordano:
Or you have 60 plugins on your WordPress site and you really don’t need to be loading them all, you can trim that number down to 20 pretty easily by building a little more functionality in a little bit differently, not layering so many plugins on top of each other. There’s a lot of things that honestly we’ve been able to fix pretty quickly. So it’s kind of, at least in my experience, it’s really been that 80/20 rule, where you can get 80% of the stuff fixed pretty easily, but if you’re a real stickler trying to hit those mid to high nineties, that’s a pretty serious, sometimes borderline impossible, task for some of these sites.
Michael Alderson:
Not only borderline impossible, it may also negatively impact your users feel of the website. If you’re really you’ve got to hit that number 99 on there, and then you’re loading a wire frame, people are not going to like that site as much.
Michael Alderson:
Oh yeah, for sure.
Ben Giordano:
Cool. That’s awesome. Well, thank you so much, Michael, for shedding some light on this for us, hopefully people found it useful and hopefully some more information to come down the road on things just like this.
Michael Alderson:
Sweet. Thanks so much, Ben.
Ben Giordano:
Yep. All right. See you.