The Website Speed Experiment

This is part two, day two of The Basic SEO Experiment, a mini-series of blog posts where I look at how different types of content posted over a seven day period affect the search engine rankings of my site in order to find out the best way to quickly boost the rank of your site. You're welcome.

In today's episode, I am going to look at a factor that most people don't even realize they need to consider when making an seo strategy: website speed optimization.

What is website speed optimization you ask? Simply put, it's how fast a website loads after a link to it is clicked. There are a lot of factors that can affect website speed optimization, including:

• A visitors internet speed connection.
• The number of images on a page.
• The location of the website's server in relation to the visitor.
• The number of concurrent visitors on the website.
• Third party plugins being used on the site.
• The code on the website.

Google makes an incredibly useful tool to monitor your website speed optimization called Google Page Speed Insights. It is one of the tools in my list of top 10 free seo tools. There are other tools out there that measure website speed optimization, but since this blog-series is primarily focused on Google rank we really only need to look at their metrics.

I will tackle each of the items on the list individually to give you a bit of a step by step guide to fix your website speed optimization if your site is too slow. Following these guide lines will allow you to score a 95 or better on the Google Page Speed Insights tool.

I will be reviewing two websites. The slower one will remain anonymous but I know its a moderately high traffic website with excellent design and a decent  hosting provider. The other one is the very website you are reading on right now. That's right, my own website. I have made sure to check almost every box on Google Pagespeed Insights' recommendations list and my site (and all of the sites I work on) have a website speed optimization rank of 100 on both mobile and desktop.

On that note, I'd like to debunk one common misconception about mobile and desktop design: while it is true that if your website is not optimized for mobile devices you will not rank highly for mobile device searches, but that has nothing do with how you rank on a desktop search. What that means is when someone searches with their mobile device; tablets, smart phones, etc. a website that isn't optimized to display correctly on a mobile device will not show up in the search results. However, if someone searches on their desktop or laptop computer, mobile optimization is not factored into those search results. That being said, mobile searching is becoming more and more popular every day and has been trending up for the last 5 years so you should have a mobile friendly site anyway. Okay, enough of that tangent, let's get that website speed optimization going.

The first factor I listed is a visitors internet speed. This is something that a website owner has absolutely no control over. Fortunately, the visitor usually has a pretty good understanding of their own speed so depending on where they are, they might have a little more forgiveness if a site takes a while to load. The common conception is that a website needs to load in less than 3 seconds or you will lose that visitor. And that is true in most cases until you factor in the visitor's current location or environment. If someone is in a bad reception zone or having bad weather, they are going to understand that its their connection that is causing the website to load slower. On the other hand, if they know their connection is fast and your site loads slowly, they are going to go elsewhere. We will use a slow user connection as a baseline for the website speed optimization tactics we employ.

The next factor is the number of images on a page. Images take a long time to load, especially if they are not sized and formatted to load quickly. Fixing image formats is usually the quickest and most effective way of boosting website speed optimization and there are a lot of ways to do it.

Properly size your images. It's a fact, the bigger the image size, the longer it takes to load. Many website owners will hire a photographer to give them beautiful photos to put on the site. And even if you are using stock photos that you've purchased from an online retailer chances are the photos are going to have a huge resolution, because the higher the resolution, the better the images look. You want to keep the height and width ratios the same, but scale those giant images down to as close to the exact size of the content on screen for a massive reduction in load times. For maximum website speed optimization there should be a different sized image for every type of device. At minimum, five different sizes for large displays, medium displays (like a laptop screen), tablet screen, and phone screens with both vertical and horizontal positions. But the more sizes you account for the better your website speed optimization will be.

There is one more trick that will take your website speed optimization of images to the highest possible level and its called serving your images in "next-gen formats." The term next-gen formats is something Google has been pushing heavily over the last few years. Most people are familiar with images that end with .PNG or .JPG, but there are better formats that can be reduced in size without losing as much detail as the older formats. I'm not going to go too much into it, but basically, every time you reduce an image in size it loses a little bit of detail and clarity. Google recommends converting your images to the .WEBP format for maximum compression and website speed optimization. Here is a link to a free online image converter. And if you are interested in learning more about the website speed optimization benefits of the .WEBP format, Google has some more information on it here.

Here is the difference in size for all of the images I used in this post. The first are .PNG sizes and the second is .WEBP

The next two factors of website speed optimization can get a little expensive and if you follow the guidelines above of image optimization and a little further down about cleaning up your code, newer sites won't have to worry about location or number of concurrent visitors. But let's be thorough and talk about them anyway.

This next part gets a little technical and might not be the most interesting for someone working on their SEO. You'll want to revisit this once we've got your website getting thousands of visits a month. 

If a visitor is in Los Angeles, but your web server is in New York, its going to take a little longer for the website to load, especially if that site has poor website speed optimization. If you are using a shared hosting plan, which is the cheapest form of web hosting you can get, you are out of luck. Your server is going to be slow and there is nothing you can do to compensate for location. 

Better servers are known as VPS, Private Servers, and Cloud Hosting which can get expensive but they have the ability to use different types of load balancers. A load balancer runs multiple versions of your site depending on how many visitors are using it. If it's the middle of the night and a website has little traffic, there isn't a need for more than one site which helps keep the cost lower. A latency based load balancer can also direct user traffic to versions of the site that are closer to where the user is coming from. High powered servers and load balancing really helps website speed optimization when you have a lot of traffic, but until that day the next best step you can take is optimizing the code on your site.

Optimizing your images will go a long way in website speed optimization and could potentially get you into the 70s or even 80s on Pagespeed Insights. But to go that extra step and get into the 90s, or possibly have a rating of 100, there are some simple yet effective tricks you can use to optimize your code.

If you look at the opportunities section of the Pagespeed Insights rating for the slow website you can see an .84 second delay being the biggest delay on the page. It's saying to eliminate render-blocking resources. Google uses a few somewhat ambiguous terms known as "above the fold" and "below the fold". A render blocking resource is anything that loads that isn't part of the initial view of the page. So anything blow the fold should not load until the very end, after everything above the fold and all of the HTML has loaded.

This is a screen shot of Amazon's home page. I zoomed out 200% so we can get a picture of most of the front page. The red line denotes this so called "fold." Anything CSS or images below that red line should not load until all of the HTML has loaded. Its actually pretty simple to implement that CSS change. Just create two separate CSS files. I label mine, abovethefold.css and belowthefold.css, feel free to do the same. My abovethefold.css file is put inbetween the <head> tag of my website while belowthefold.css is put just before the closing </body> tag.

As you can see, Amazon has a lot of images to load but the page is relatively fast. The last piece of advice I will give today is about "lazy loading" images. I will probably create a tutorial for YouTube on lazy loading, but its actaully pretty simple. With a bit of javascript, you can defer the loading of images, videos, and animations until everything else has been loaded. If you want a completed script, I made one and put it up on CodePen. You can check it out here.

Follow these tips and your website speed optimization will not be the reason your site isn't ranking. It might seem challenging, especially if you aren't a developer, but you can do it. If you need any help, please feel free to contact me.