Blog

A web developer siting at a desk and working

Why Page Speed Matters

We’ve all heard this before, right? But what does it really mean and does it really matter?

Page speed is an important factor for both your rankings as well as for the user experience. Globally, 52% of all website traffic is mobile while in the US it’s hovering around 43%. So, as you can see, it's important that you have a nimble and fast website for your audience. For rankings, it’s one of the more than 200 factors that Google uses to rank pages for search queries.

So, let’s dig into this page speed thing and what you should know about it.

Minifying Code

We want your website to be big, bold, and visually beautiful , but not your code. The more bloated your code is, and the more of it that you have, greatly slows down your page. Things like extraneous HTML, outdated coding, too many CSS files, and commented out javascript can wreak havoc on how fast your website pages load.

This is what our lead developer says about minifying your code:

“Minification is the process of removing unnecessary content like comments, line breaks, and white space resulting in a much smaller final file size. The smaller file size can be sent to the web browser a little quicker.”

So, now that you know, what can you do about it? Minify your code. That means that your code is compressed down to the smallest size but doesn’t affect the operation of it. There are plenty of tools out there that can help you out with this and Google, of course, has a great tool that takes a look at your syntax, removes dead code, and compiles your JavaScript to be even better JavaScript.

The same goes for your CSS. A lot of times, you can compress lines that could look redundant. This example from Google Developers shows just that.

This is something that you would normally see.

h1 { background-color: #000000; } h2 { background-color: #000000; }

But it can be compressed down to remove bytes and white space.

h1,h2{background-color:#000;}

You’ll also notice that even the hex code was reduced. It’s an old trick used for efficiency and not because some of us are lazy. Promise!

Here is another HTML minifying tool for all of that code that can also get out of hand as well.

Compressing Your Images

Yes, even images can be compressed, but this is beyond just constraining them to a specific size on your web pages or optimizing your images for the web through Photoshop. There are 2 types of image compression techniques that you can use: lossy and lossless.

Lossy compression: Using this format for images can result in retaining only about 80% of the image file’s original quality, but for video file compression, the original quality sounds almost identical. Use this type of compression for bitmaps and simple-looking image files.

Lossless compression: Using lossless compression will result in retaining the original quality of the image, but also greatly reduces the size of the file. Unlike lossy, though, using this for videos tends to result in larger file sizes. The other big point in using lossless compression is that you can revert the file back to its original state. Most experts agree, for image compression, try to always go with lossless.

Compress, Compress, Compress

Yes, we’re talking about more compression. This time, we’re talking about Gzip. By enabling Gzip compression, you can greatly reduce the size of your website files even more thereby speeding up server-to-browser speed. You could see reduced sizes of up to 70% and that’s a good thing since we’re talking about page speed here.

All you need to do is enable Gzip on your server and it does all the work for you. Remember us talking about reducing white space and extra lines? Well, before Gzip sends your files over to the browser, it looks for strings in your code and text files that are similar and temporarily replaces them to make the overall file size even smaller. GTMetrix has a great overview of enabling Gzip compression.

Calling All Files!

Time to first byte. No, we’re not talking about that burger you’re about to enjoy, we’re talking about those little bits and bytes of information that are being called from your server. It’s a measurement of how much time passes between the moment when a user clicks a link to your website and when the first bytes of information are served up in their browser. The first test is to see how long it takes for your website to load on a mobile device as well as your desktop. If it’s looking like it’s dragging, then there might be some work to do. Another great tool to use is Google PageSpeed Insights. This tool measures files being called, how much time it takes for your website to load, and offers up a wealth of knowledge to take to your developer to sift through.

Some tidbits to consider about speed: 200 to 500 milliseconds is considered pretty standard and good quality. 500 milliseconds to a full second isn’t awful but could use some TLC. Anything more than that, you’re looking at some work to do.

Browser Caching

Have you ever noticed how parts of your website look the same as you navigate through it? Or when you’re on another website and it’s almost as if those headers and footers pop up instantly? That’s called browser caching. When it’s enabled (7-30 days is typical) it stores common elements of your website in a user’s cache and it dramatically increases page speed since all the browser has to do now is serve up any unique content to that page. It’s always faster, regardless of of your internet connection, to retrieve files from your hard drive than a remote server.

We definitely recommend that you read up on it and make sure that’s it’s not just a part of your SEO and page speed list of things to do, but a part of every web project for the future.

Avoiding Redirects

There is something to be said to have a crafty SEO professional on your team to work in tandem with your web developers. An issue that our SEO evangelist caught with some of our development projects was finding random 301 redirects in our WordPress websites. The links looked just fine, but they were creating a redirect. After testing out a few ideas, what she found was that we weren’t implementing a strategy to use a trailing slash or no trailing slash when creating links across the website - from blog posts to navigation. What WordPress was doing was creating automatic 301 redirects to go to the precise URL.

To avoid WordPress or other CMSs creating automatic 301 redirects, make sure that you employ a trailing slash or no trailing slash across your website and when creating links. Too many 301 redirects can wreak havoc on your server and give Google pause on the validity of your links.

So, after going through all of this, what are some of your thoughts? What other strategies have you implemented to increase your page speed? We’d love to hear from you!