This post is part of our ongoing Digital Strategy Notes series.
In this episode of Digital Strategy Notes, John Gough, Kyle Theisen, and Cory Crowley discuss the question “How do I make my website faster?”
Website speed is important to users as they explore your site (conversion rates drop by 7% for every second of load time) as well as search engines like Google (that have made page speed part of their algorithm).
Here’s why website speed matters, how to test it, how you can improve it, and when you should turn to a developer or your hosting platform for help.
Transcript:
John:
Hi everybody, my name is John and these are Digital Strategy Notes from Skyhook Interactive. Today I’ve got Kyle Theisen who is our studio manager here with me as well as Cory Crowley who is one of our lead developers here at Skyhook. We’re going to talk for just a few minutes about the question, “How do I make my website faster?”
Speed is a really important metric when we’re talking about website performance. It matters to your users how fast your website is going, because they are not going to want to hang out on a slow site. Google has said that it’s one of their search signals. If you’re interested in SEO and site performance in that way, you need to make sure that you’re considering website speed.
A couple of different things go into that; Kyle, Cory, why don’t you guys start off by just talking a little bit about what makes a website fast or slow.
What makes a website fast or slow
Kyle:
When I think about what makes a website fast from a technical perspective, it’s about what assets you have on your server, images, style sheets … which is the styles and colors and fonts of your website, JavaScript so that means a lot of different things. You can think of that as slide shows, galleries, functionality, are some common things that are JavaScript. The more of these assets that you have loaded on your website tends to make your website a little slower. There are some things you can do to speed that up but that’s what makes a website slower.
One thing specifically is these have a lot of these things buried in it. They have a lot of features. There’s a lot of JavaScript and a lot of styles so users can make many different types of websites with them. You tend to load a little bit slower than with custom websites where you have one slide show for your audience.
Cory:
I agree with everything that Kyle said. To add to that, what I think helps a website be fast is to determine how many requests a certain page is doing on page load. As Kyle said, that could be JavaScript, style sheets, images. Each one of those has to make a request to the server to download the image or the style sheet, etc. Depending on how long that request takes, it adds to your page load time.
The general rule is if you have less of those requests, generally your page will be faster. The key simple rule is to minimize the amount of requests you have on a webpage. Whether that’s reducing images, reducing the size of the images as well, and reducing the amount of style sheets, JavaScript files that have to be downloaded on a certain page.
John:
To abstract that more, a website is basically a set of files that your computer downloads from a server. What you’re saying is the fewer files you have to download and the smaller the files are, the faster it’s going to go. It’s just like downloading anything else. You download a picture out of your email. It’s a smaller picture it goes faster. Fewer files, faster.
That’s at a high level, right? You want to have fewer, smaller files. Are there other things that contribute to page speed?
Cory:
Yes there are. One thing that can help with page speed is caching. You can add caching to your website to minimize how files are downloaded. If the server doesn’t have to go back to the file server to get the file every time, but its cached in memory, it can download faster. It’s in memory so it can get there faster. That helps with page speed.
Kyle:
Yeah, that’s exactly right.
The one thing you touched on is a good server. Caching is built into servers but there’s bad web servers or ones that have websites on them that are not even your websites but they’re shared hosting. You may have caching installed on it but that doesn’t make it equal to a quality web server that has only your website on it or it’s managed in the right way. That gets into a pretty technical conversation.
You would probably want to start talking to your developer about if the server is good or is our response time quick enough and should I look somewhere else for a host?
What does “fast” really mean?
John:
What is a good response time? We’re talking about individual files or the whole page load as a complete website?
Kyle
If you’re looking at a server you’re going to be looking at the first byte and it’s the individual response times …
John:
What’s first byte?
Kyle:
First byte is the time it takes for the first byte of your website to render from when you hit the repeating server, basically. That’s about how fast your server responds.
John:
Do you have an idea about how fast is that?
Cory:
You want it to be within milliseconds. Under a hundred milliseconds is probably good.
Kyle:
Yeah, pretty good. I think under half a second is fairly okay from what I recall. If you get anything above that you want to look into some other options. It could be a couple of things your DNS, your registrar can change how you have the DNS pointed .
Cory:
I would say if that’s happening, that’s probably something that you just need to contact your hosting company about. If your timed first byte is slow there’s not much you can do at all. You need to contact your hosting company and they will give you recommendations on what you can do or they will make an adjustment there to improve that speed.
Past that, we’re talking about all the files downloading to run your webpage. I would say a good rendered webpage is … you want to shoot for probably close to a second or under. I would say that’s a really good webpage load time, but you see webpages these days that are interactive, etc. that 1.5 seconds is okay. Especially if you’re seeing a loading icon or something like that to keep them engaged.
If it were up to me I would love to get any webpage under a second. That would be the ideal goal.
John:
It’s funny that you say that, but that really is people’s expectation when they’re browsing on web. It’s all because they’re comparing it to Google. How fast is Google. They can get 100,000 results in .006 seconds and show you everything that’s been on the Internet forever, right away.
Cory:
If you’re talking about downloading a homepage of an interactive website that usually has lots of images, etc. Under a second is really good.
Kyle:
I would say for most websites that most companies build, you’re talking two, three that’s pretty good. You could do better definitely but that’s pretty good but a lot of sites you see in there. I think that would be a good target to reach for unless you really want to focus on speed. In that case you probably have a budget set aside to make your websites fast, which is getting to the speeds Cory’s talking about.
Cory:
To get to a second you really have to focus on minimizing those requests, having a really good server and adding caching.
Kyle:
All that starts the moment you start building your website. If you try to adapt it once your website is built, it’s definitely possible, but it can get expensive. If it was just built the right way, you’re probably going to save a little money, at least on rendering as quick as possible.
It’s definitely possible. We do that often, but if you do it the first time right you’re going to save the most amount of money.
John
It takes time to make sure you’re building it the right way. It takes a little extra effort on the developers part to make sure they’re not using frameworks or JavaScript libraries or those extra things that make their lives a little easier but can add … requests can add load time can add all those things.
I know that as a user I feel anything over four or five seconds feels like something’s broken. I start wondering has something gone wrong if I have to wait five seconds. It reminds me of that funny Louis C.K. bit where he reminds us that it’s going to space. Just give it a second.
That’s really users expectations. They think it needs to be lightning fast. The technology is continuing to push us that way. I think of AMP. Cory, you spent some time recently working on a project that was making a site AMP compatible… talk about that for a second.
Google AMP
Cory:
AMP stands for accelerated mobile pages. Specifically for mobile browsing. Google has come up with this way that basically strips out all the unimportant things and displays what you define as needed to be most important. Let’s say a headline image and then the rest of the article, etc. You may have to download one image and all the text for that article. Generally, that’s going to load a lot faster than a standard mobile homepage, for example.
Google has implemented some kind of tricks … the tools to make it load really, really fast on your mobile device. When you make a site AMP compatible, it’s basically going along with Google’s accelerated mobile page’s project and defining things that need to be loaded for that part or page. It adds to the user getting to the content as soon as possible.
John
Google has changed their results page. Especially if you’re browsing on your phone. I’ve noticed on the top of many search pages there will be the result on the title and all those things you’re used to seeing. There will also be a little icon and a little word that says AMP. It means that it’s been accelerated in that way.
Cory:
That’s right. It means it’s been optimized to work with AMP so when you load that page it will come as an AMP page, especially if you’re on a mobile device. I’ve seen that they’re starting to help pages that are AMP compatible. It’s just one more thing that you can do to increase the visibility of your page because it will load almost instantly.
John
I know that Automatic has … the guys who run the WordPress project have released a plug-in for WordPress that’s supposed to make it AMP compatible.
Have you had any experience with that?
Cory:
Yes, I have. If you install that plug-in it will make your articles or your posts on your blog amp compatible. If you want to customize anything beyond that, they give you code to do that. It’s plug and play. If you activate it on your site most of your posts will be AMP compatible.
However, if you have any type of validation problems with AMP because AMP is still pretty new. They’re still testing things out. If you have any validation problem then your page won’t load correctly. You have to know what you’re looking for when you activate that plug-in, but it’s pretty much plug and play.
Kyle:
Most of the people who are using AMP right now are big publishers. TechCrunch, most of their articles are AMPed. The New York Times. We did it for a sports publisher.
Is there any reason that a smaller company … let’s say you’re writing a blog and you’re interested in content marketing and you want to know, should I include AMP on my site? Yes or no, are you worried about that? What would you say to that person?
Cory:
If you’re a publisher trying to push content, not necessarily with fancy animations and graphics, it’s absolutely worth it to install a program and activate it because the user that loads your page that’s AMP compatible, especially on mobile devices, will get that page instantly. That’s what you want. You want them to get to that content as soon as possible.
However, if you have advertising on that page and you’re hoping that it works well with AMP. You might be surprised. Some do and some don’t. That’s a caveat if you have advertising on those articles. If it’s a standard blog and you want people to read it, like a political blog. You want people to scan those articles as quickly as possible, AMP is an excellent solution for that.
Kyle:
Any additional functionality like a slide show might not work if you have functionality in that blog post that you loading in WordPress via a shortcode, it probably not going to work too well. Something to test it. For content it works great.
John:
Do you guys know a good way to test that? Once it’s AMP compatible how do you see how Google is going to render it?
Cory:
When you install the Google AMP program, especially on WordPress, it will give you an end point on the URL so if its site.com/article-1, the AMP version of that would be article-1/AMP. That’s how you would see the rendered amp version of your article.
John:
That’s good to know. As both of you have said, you need to look at that after you’ve installed the plug-in to make sure you’re not missing functionality that you expected to be there that was critical to your content. If Google can crawl that AMP page they’re going to give it preference. That’s what they’ve stated. They want faster pages to show to searchers so they’re going to give priority here. If you haven’t checked out your pages to make sure that all your content is there and rendering correctly, you’re going to look dumb.
Cory:
Exactly.
How do I know if my site is slow?
John:
We started out this conversation really technical. We went straight to server things and page requests and all this stuff. As a layman, as a site owner, how do I know if my website is fast or slow? I can look at it but if I’m looking at it on my computer some of it is probably cached already on my browser so I’ll see it at a different speed than a first time visitor. How do I know how Google sees it or how do I know someone else is looking at it.
Cory:
That’s a great question. Kyle, do you want to take this one?
Kyle:
Sure. There’s a lot of resources. There’s webpage speed test so you can Google that and go there. They will test your website and show you the response time for the first time and for return users and show you lots of different statistics about your website. Some are going to get pretty technical but always show you what the response time is for your server. They’ll tell you that first byte every time and lots of other things.
A lot of technical stuff there so you may just want to look at what you need to. It would be interesting to look up some of the other stuff but if it is getting to be a higher response time you can may want to loop your developer in and see what they can do to speed that up.
There’s also the Google HB, which isn’t as much about how fast your website loads. It’s more about best practices. It does take into account how fast it does load but it’s also about some of the best practices.
Cory:
I would agree. Webpagetest.org is a great one to use. It will tell you the first render time. How long it takes to render the first time and it will also tell you a repeat view after its been cached. They’ll give you that time. Usually it’s less than the first time.
Google Page Speed Insights is another great one. Generally if you open up your website incognito mode, if you’re using Chrome, and you tend to see it loads kind of slow, that’s when you can start using some of these tools like webpagetest.org and Google Page Speed Insights.
You can also use Google Webmaster Tools. It’s not called that any more. It’s called Search Console. Google will tell you what pages are problems. Whether it’s not mobile compatible or something like that. It’s another resource you could use to find problems with your webpage because if there’s a problem, more than likely you’ll have a speed impact. It’ll say your HTML is invalid, or itt could be many different things. Generally Google will tell you that. Things to look for.
John:
If you Google Page Speed Insights it brings up a page and it says enter webpage URL and you type in your URL and hit search it will say seventy-nine out of one-hundred or ninety-nine out of one-hundred. It’s really hard to get that hundred.
But if you’re above eighty-five, above ninety, you’re doing pretty well.
Cory:
I would say so. It gives you a color as well.
John:
Like red, yellow, green?
Cory:
Yeah. Generally if you’re above eighty-five you’re doing pretty well. Obviously you want to shoot for the nineties but if you have a simple site you’re above the eight-five range. You’ve done quite a bit of things already. I think you’ll be all right.
John:
Any other tips or best practices for improving website speed that a site owner could do?
Cory:
One of the biggest things that I see when it comes to the site page speed and new website users is checking the size of the image when it’s uploaded. What I mean by that is a lot of times we’ll take the image directly from the camera that’s huge. It’s thirty-five hundred pixels by thirty-five hundred or something like that. Which usually equates to an image that’s over a megabyte in size. As long as you crop your images and make sure they’re the right size before you upload them and do some Photoshop work, that can improve your website speed greatly, rather than uploading them directly from the camera and hoping that the website will render them correctly.
That is the biggest misstep I see with new users. They upload way too big images. They need to size them down. Get them below a certain pixel range or size. That will contribute to your page load time.
John:
It’s just another file and however big that file is, your computer is going to have to download that whole thing before it can show it to your user.
Kyle, you have any thoughts on that?
Kyle:
That’s exactly right. If you’re on WordPress there are some plug-ins that help you do things depending on how your site is built that will minimize your CSS files, your sfiles and some other things.
Those are great. There’s a lot of plug-ins that work well. Some work better than others and some are better than others on different sites depending on how the structure of the site was set up or that theme. There’s definitely things that you check out if you’re interested in doing it yourself. Any more than that you might want to contact your developer and fortunately there are a lot of things they technically could try to do. Re-size up a hundred images can be time consuming, let alone a thousand. If you have lots of files included on your site it might be hard for you to find those. You want to engage your developer if needed but there is a lot you can do yourself, especially if there are a lot of plug-ins available to you.
John:
Do any specific plug-ins come to mind?
Kyle:
We’ve used a bunch. A handful for different things combining and refining. We tend to try a different one every time. Sometimes it works and sometimes it doesn’t. Then we go to a different one. Then the next site the last one that didn’t work would work. We haven’t narrowed it down to one that we like specifically.
I’m not sure if you have a recommendation, Cory?
Cory:
It depends on what you’re trying to solve. If you’re trying to focus on your images there are image re-sizing plug-ins that you can install that will help you with that.
If you’re talking about overall speed on a regular server there are certain caching programs that you can install. Then again, it depends on your specific set of circumstances.
My recommendation would be to take most of that out of the equation and go with a quality WordPress managed host. That will generally take care of ninety-nine percent of what you need when it comes to a server, when it comes to caching, and they will even sometimes give you recommendations on what you can do to improve past that. But at least you have those two very technical things, which is server types, speed, and caching. Those two things are taken care of with a WordPress managed host.
John:
I know GoDaddy has a good product. Good WordPress managed hosting and then WP Engine is one that we use often. I know they have a list of plug-ins that they will accept on their platform and they’ve been tested for performance. Whether that’s security or speed. They make recommendations in that way to help website owners not have to sift though the tens of thousands of plug-ins that are on the WordPress repository.
Cory:
All the big hosting companies pretty much have managed WordPress hosting so check with your hosting provider. If you’re not sure who to go through contact us, we have our premium hosting as well.
Recap
John:
To recap, if I were a website owner I would start by opening up my site incognito mode..
I can see how fast it loads. If it feels a little slow, or look at it on my phone and it feels a little slow, look at Google Page Speed Insights. Look at …
Cory:
You want webpagetest.org.
John:
Or webpagetest.org. That’s my diagnosis set of processes. I’d consider AMP as a way to accelerate mobile pages, I would consider adding plug-ins to WordPress that are going to help modify my code or help reduce image sizes. All those help on individual pages and after that there are a lot of questions that have to be asked about caching and about number of files that are downloaded per page. That gets pretty technical pretty quick.
Hopefully that gives us some direction on where to go if we feel like, my site’s not loading at the speed I want it to or I think I can get a bump in Google if I can get this up a little faster. That’s where I go first.
Cory:
Yep.
Kyle:
Absolutely.
John:
Well guys, I really appreciate your time. Thanks for taking a few minutes to talk about this. This is one of those things that is one of those quiet behind the scenes things you don’t often think about it when you’re building a website but when the site launches it becomes pretty important pretty quickly so let’s pay attention to that.
Cory, Kyle, thanks again and thank you all for listening.