All You Ever Need to Know About Website Speed

A plain English guide to website speed for small business owners

In a nutshell, page speed is how long it takes for everything on a page to load. We can get into the techy details later. All you need to know now is that the faster your page loads, the better.

Why? It gives your customers what they want (which helps your conversions), and boosts your ranking in search results (so more customers can find you).

SEO Best Practices

Here’s the bad news: Google considers page speed when deciding how well you rank. This means the slower your page is, the less likely you’ll be in the top three search results. It also means users won’t stay on your site long enough to even know what you have to offer.

In fact, studies show that if your page isn’t up and running by the time they blink, they’ll sigh and go elsewhere. That’s a red flag in Google’s eyes. Bottom line is, slow pages hurt your SEO. The good news is, you can do something about it.

Here are a few starting points:

Reduce response time: Response time is how long it takes for your page to show minimal signs of life when users click on a link to it. Just so you know, one survey revealed that nearly half of web users will jump ship after a mere three-second delay in page response time. Scary. We know.

Speed it up on mobile: In the good ol’ days, you could enjoy a pretty decent ranking even with sluggish loading times on mobile. But Google has put its mighty foot down, and now page speed on mobile is a major factor for search ranking. This means laggy pages on mobile can seriously hurt your overall SEO. Plus, you’ll want to get on this pronto considering 39% of online shoppers are on mobile.

Check your page speed: By now you’re probably wondering, “Okay, so how do I know my page speed?” That’s easy. You can run it through Google’s PageSpeed Insights. You just put in a web page URL (the link), and you get your very own speed score. It’s even nice enough to tell you what’s slowing your page down and what you can do about it. Pretty neat, right?

What is website speed?

Now, this is important. Website speed is how fast your website loads overall, and it’s in your best interest to makes yours quick. With literally billions of websites clamoring for attention, users won’t hesitate to skip your slow-loading site and head off to your speedier competitor.

Seem unfair?

Well, think of it this way: In a room full of potential employees, would you hire the candidate who freezes up and takes five seconds before answering every question? Nope. If they’re slow now, it’s only going to be frustrating working with them later. First impressions are important. Same rules apply online. If you’re slow, you lose the dough.

Why website speed matters

You may be kidding yourself in thinking, “But my website is seriously cool, surely they’ll wait a couple seconds longer!” No, they will not. People are impatient, especially online, and if they want something, they want it now. But don’t take it from us, here are some cold, hard facts on why you should care about website speed:

How do I speed up my website?

We’re glad you’ve arrived at this point because we don’t want you leaving money on the table over a couple seconds delay. Now, hold onto your breeches while we show you how to get your website into warp speed.

Enable compression

Here’s a non-surprise for you: Your website is made of code. It’s what makes every page look just how you want it. Text here, image there, logo in the corner, etc.

But code is like a suitcase. The heavier it is, the longer it’ll take you to move it. If that suitcase were, say, smaller and lighter, then you can be off and running. That’s where compression comes in. You’re going to want to make that bulky code of yours smaller, so use Gzip. It’s a nifty application that compresses files that are much too large.

Warning: Don’t use it for images, unless you want them to end up looking like one giant pixel. We’ll get to how you can optimize images later.

Minify CSS, JavaScript, and HTML

Wait, wait. Don’t glaze over just yet, we promise to keep it simple. Let’s go back to the suitcase analogy. Making a bulky suitcase more compact is great on its own, but if you could take out the extra odds and ends that you don’t really need, then it’s going to be a whole lot lighter.

That’s what minifying code does, and there are plenty of ways to do it. But Google knows best, and it recommends these minifying tools. See? We told you it would be simple.

Reduce redirects

You know when a road is closed off and there’s that poor guy standing in the middle of traffic waving his arms around telling cars where to go?

Website redirects are kind of like that guy. They automatically take users on your website to the new location of something you previously moved or deleted. The problem is, like with the traffic example, they make users take longer to get to where they want to be.

Check out these suggestions from Google on how to avoid redirects. You can also give your pages a shakedown using the redirect mapper tool to know exactly which redirects you can clean up.

Remove render-blocking JavaScript

Website browsers (like Chrome, Firefox, and Safari) have to process scripts of code to make things on your website load.

Turns out that JavaScript is like that one guy in front of the line at Starbucks who won’t let anyone go ahead until they’re done ordering a 12-ingredient latte. So check this post on how you can stop that script from holding up the line.

Leverage browser caching

Everyone loves leverage. But first, what in the world is caching? A cache is where bits of website data (pages, images, files, etc.) are stored temporarily so it takes less time to load next time.

Usually, caches have expiration dates so make sure yours is set to a minimum of one week or a maximum of one year. Actually, you can check when your cache expiration date is with this cool tool.

Bonus tip: If your website is on WordPress, you can kick back and install the WP Super Cache plugin to manage your cache settings.

Extra bonus tip: We like to think we’re nice people, so we did the digging for you and wrote up a complete guide on everything you need to know about browser caching and how to leverage it.

Improve server response time

You may already know what a server is (hint: it’s where your website lives), but you probably didn’t know the ideal server response time is 200ms. That’s a pretty short time for your server to show a user what they want after clicking a button on your website.

There are a bunch of factors that may be slowing down your server response time, but here are some tips on how to improve it.

Optimize images

Images are great for your website, but if they’re heavy, they can really slow your loading time down. Ask your designer to optimize the images in Photoshop using the “Save for Web” feature before sending them over to you. If you’re doing this solo (all the power to you), use free tools like TinyPNG or the desktop app RIOT to really slim those images down.

For WordPress websites, install the WP Smush plugin to have it all done automatically. Lucky you.

Don’t Rely on HTML to resize images

We know how it is. You have a huge image but it looks great so you upload it to your website as is. Your website then does that cool thing where it scales the image down for you. Neat, right?

Not really.

Your browser is essentially swallowing a watermelon to give you a seed. If you’re going to use a small image, upload the image in the size you need to shave a few seconds off your loading time. Every second counts!

Combine background images into sprites

We mean “sprites” as in a collection of images — not the sodas. Basically, a sprite takes a bunch of separate images and flattens them into just one, so your server only has to get one file instead of five or six (which would take longer). Creating a sprite isn’t hard at all. In fact, you can generate them for free here, here, and here.

Avoid image hotlinking

Hotlinking is actually a pretty common problem. It’s when people link to your files and images but show them on their own website. This means that users can view them on that other website, but your server will be the one loading them up. So not only will your server be handling your own traffic, it’ll be slowed down by their traffic too. Sneaky, right? Good news is that you can protect your server from these fiendish leeches with these awesome tips for preventing hotlinking.

Prioritize above-the-fold content (lazy loading)

Lazy loading is about as good as it sounds. When users first arrive on your website, they’re only going to be looking at the top part (i.e. Above the fold). You can get your website to show that top part a lot faster by telling it to only load the rest of the page when the user starts scrolling down. It’s a “what you see is what you get” kind of approach. This Lazy Load plugin will help you get the job done.

Concatenate files

Remember how we said you should combine images into sprites so the server spends less time getting multiple files? Same goes for a lot of other files. A good rule of thumb is that if you have a bunch of files with similar functions (e.g. image manipulation), then it’s a good idea to concatenate them. The WP Rocket plugin helps you out with this during development.

Reduce website plugins

You may have noticed we’ve been throwing out a lot of WordPress plugins. That’s because they’re a pretty simple way to get things done, but there is also the danger of installing too many of these bad boys.

Every plugin takes up resources that make your website slower and heavier. So try reducing your plugins or replacing a handful of them with an “all-in-one” plugin instead. Pro tip: The recommended number of plugins is actually 20.

Avoid bad requests

Imagine being sent to pick up an order from a restaurant only to find the restaurant doesn’t exist anymore. You’d probably walk around the block to make sure you didn’t just miss it. Then you’d end up going home empty-handed and sulking because that dead-end mission just took a chunk of time out of your busy day.

Your browser feels your pain. Sometimes your website links to files and images that have been deleted or moved elsewhere. Think about those dreaded “Error 404” messages. No-one likes them.

Good guy Google Analytics usually gives you a heads up when something is missing, but you can also run your website through a free broken link checker.

Specify a character set

Long story short: machines don’t understand human-speak. They use character sets which is like a code key for them to know which numbers and letters to show us online.

There are various character sets to choose from but the dominating one is called UTF-8. By declaring this to your browser, you’ll save it from searching around for one before loading a page on your website. You have to specify a character set in HTML, so maybe poke a developer about it to save yourself a headache.

Reduce DNS lookups

DNS stands for Domain Name System, and it’s basically a translator for the World Wide Web. Every website has an IP address (like every person has an ID number), but no one is going to remember all those numbers, so what DNS does is take them and translate them into a friendly name, like “Google.com”.

On the flip side, when you type “Google.com” into your browser, DNS translates it back into its numerical IP address so the Internet can do its thing behind the scenes.

The problem is that it takes time for DNS to lookup who’s who. Before you can do anything about it, you need to know who is taking the longest. Run your website through Pingdom or WebPageTest to pinpoint the culprits.

Enable HTTP Keep-Alive

Okay, first you need to know what HTTP is. It’s essentially the messenger between a browser and the server where all your files and images are kept.

When a user clicks to see a page, HTTP is the loyal steed who goes and asks the server for all the files. Now, every time HTTP goes and requests a file it has to open a connection. When the request is over, the connection closes. Then it has to open it all over again for the next request.

It’s like having to unlock a door and then lock it again over and over. That takes up precious time. What Keep-Alive does is leave the doors unlocked while HTTP asks for a bunch of files in one go. Some websites have this already enabled, so use this tool to check if yours does.

Use HTTP2

Wait, first it was HTTP and now it’s HTTP2? What’s the deal? Don’t panic, this new kid on the block is just a faster and better version of the classic. With this snazzy new version, you no longer have to concatenate files or generate image sprites to speed up your loading time.

The best part is that if your website is already running HTTPS (check the address bar after your website loads), then you can probably start using HTTP2. You might need to have a chat with your hosting provider first though.

Switch to PHP7

Is your trusty website running on WordPress? Well, you’re in for a treat. PHP is the programming language WordPress is built on, and now you can upgrade to the all new and improved PHP7.

It’s light years faster than older versions of PHP and it’s easier for developers to work with too. You can know right now if your website can be upgraded with this PHP7 compatibility checker.

Use a PHP Accelerator

Speaking of PHP, if you find that your website isn’t compatible to upgrade to the latest version then there are still ways you can make it load faster. Check out these free PHP accelerators like ACP, XCache, and eAccelerator. You just can’t beat free.

Activate AMP (Accelerated Mobile Pages)

We sure love accelerating things around here. AMP is a project by Google to help you give your website a speed boost on mobile. It won’t affect your ranking (yet), but it’s worth looking into since big shots like Wired, Gizmodo, and The Washington Post are already using it.

Remove query strings from static resources

That seems like a mouthful, but it’s not as bad as it looks. The important thing here is that query strings on static resources can slow loading times down.

A static resource can be a file or an image (e.g. your logo) which will always stay the same. To remove these pesky query strings you can either be brave and tweak your theme files, or install this handy W3 Total Cache plugin.

Serve resources from a consistent URL

As you may know, every file and image on your website is a resource, and each resource has its own URL. But sometimes you have that one cool video you want to show off in every page, but then that video gets duplicated and each version has a different URL.

This means the browser has to download a “different video” every time instead of just the one. Although plugins and redirects can also be to blame for inconsistent URLs, so check out how to solve every situation right here.

Optimize your database

Just like your laptop, the more information your database has, the slower it’s going to work.

There’s probably a lot of useless data cramping up your website’s database, so it’s a good idea to give it a clean every so often. Of course, there’s a plugin for that. Feel free to install WP-Optimize to give your ol’ database some much-needed maintenance.

Use a Content Distribution Network (CDN)

Think of a CDN as if it were an Apple Store. They have stores all over the world to make it faster and easier for people to buy from them. It would be a royal pain if people in Holland had to travel to the U.S. for an iPhone, right?

Well, the same goes for your website. You’re getting hits from all over the world and you want to make it fast and easy for them to buy what you’re selling. So use CDNs to give users better access to your web content from whichever location they’re in.

If you want a CDN, Cloudflare or MaxCDN are pretty good places to start.

Choose the right hosting plan

Last but not least, there’s your hosting plan. Not everyone catches onto this, but hosting services can actually make your website faster or slower.

Usually, when it comes to choosing a hosting plan, you’re looking out for your budget and not really the speed. So you may want to head back over to those hosting features and check if you’re getting the hottest deal.

Originally published at bilimoria.io on April 29, 2018.