Deep Dive into Website Speed

Website speed is essential today, but what makes a website fast?

Hello everyone, this article is going to be a little more technical but I will, as always, try to keep it as simple as possible!

Today I want to talk about how to to get your website faster and what is a fast website?

How fast is fast?

So first off let’s clarify, how fast is a fast website?

250-500ms or .25 - .5 seconds is a fast website.

Well, that’s pretty darn fast! Yes…yes it is.

Because we all do not want to wait. If your website is not coming up then it wasn’t worth my time.

Though what is acceptable?

We don’t all have a team of developers behind us custom building your eCommerce or website on headless commerce or headless CMS so you can experience lightning-fast loading times.

2 seconds.

Studies have found that your average user for your average website will stick around for at least 2 seconds before it starts affecting the performance.

Check out Cloudflare’s study on website performance vs conversion rates but to highlight some of that data I put it below.

47% of customers expect a webpage to load in 2 seconds or less.

In testing:
Pages that loaded in 2.4 seconds had a 1.9% conversion rate
At 3.3 seconds, the conversion rate was 1.5%
At 4.2 seconds, the conversion rate was less than 1%
At 5.7+ seconds, the conversion rate was 0.6%

Wow!

At 4.2 seconds, your conversation rate is cut in half!

Some other interesting facts about this speed:

Walmart found that for every 1-second improvement in page load time, conversions increased by 2%

COOK increased conversions by 7% by reducing page load time by 0.85 seconds

Mobify found that each 100ms improvement in their homepage's load time resulted in a 1.11% increase in conversion

Now, are you Walmart? No, but if you have 200 people come to your website a day and you could get 4 instead of 2 orders a day, does that make a difference? (I would hope so!)

Now is page speed the only thing that affects conversion rate? Of course not, if it looks bad then nobody will trust you. I will go into these factors in another post.

So how do I get that fast?

It’s honestly not that hard. As far as improving page speed goes if you are building your website on an open-source solution like WordPress or something like Shopify it just depends on your platform.

I highly recommend if you are going to be using an eCommerce solution and have a budget, stick with Shopify or BigCommerce.

These two platforms provide their own hosting and you don’t have to worry so much about the “will this plugin mess up my site” or “uploading massive images to slow my site” issues because their coding is specifically designed to optimize and do all the heavy lifting on the back end.

Image Optimization

THE MOST COMMON mistake I see users making is uploading full-sized images to WordPress. That’s a big no-no. Most platforms do not auto-optimize your images such as Shopify does for its users.

Let’s factor in that today’s smartphones are taking higher and higher resolution photos. Even my Pixel 2 that is now 2 years old takes 3-5MB photos.

If you upload that directly to your website, you are asking every person who comes to the site to download that image (because that’s how you view stuff on websites, downloading the information to the browser).

With a 3G connection, you can expect a 5MB photo to download in 3-5 seconds, where 4G is not as punishable but 4G connections are typically just near major cities and certain areas. Though this is expanding!

Now that’s just factoring in 1 picture, not multiple pictures or all the other text, content and features on the site.

Optimizing your images can be done with lots of tools but I find almost all of them require some sort of payment, so let me let you in on a little secret. You can pay those very specific services a monthly fee for something you only use for images…or…

Get Photoshop, the best way to optimize your images for the web. You can get the photography package for $9.99/mo and you will certainly use it! I shot a super short tutorial on how to optimize those images using photoshop.

So you have your images optimized? Now what?

Let’s run some tests!

https://gtmetrix.com/ is a great tool to test your website. Here is a quick video going over the details of GTmetrix.

As you see the most important element to look at is Contentful Paint! It does require a free account to look at the “Timings” tab where it is located but that is the data you need to know to see how fast your website is to the user.

Another wonderful tool to use is Google Pagespeed Insights. Although in my opinion a simple tool the score at the top can be disregarded.

Look at that first meaningful paint, that is your goal to get at least 2-3seconds on mobile and of course faster on desktop. Though before you think, “I have 3 seconds, I am slow!” Look at maps.google.com

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmaps.google.com%2F&tab=mobile

This tool is much harsher in this judgements and I look at it differently. Very few websites that are not custom coded for performance do well in Google Pagespeed.

We built an entire website years back completely utilizing AMP (accelerated mobile pages) which shows a .3s contentful paint but a 1.5s on mobile.

This is why file size matters so much because mobile devices don’t have the bandwidth your home internet has.

Cache Setup

Making sure you have a good cache setup for your website is crucial too. Some cache tools actually help improve your website’s speed by 10x to 100x with the proper setup.

This can get a bit technical but there are many plugins that attempt to get this performance. I have never really had good luck with plugins and don’t recommend them.

Find a server or hosting service that has it built-in.

As far as the consistent speed I recommend cloud solutions such as Linode, Google Cloud, or Amazon Web Services. Though going directly to these people is for the tech folks.

There are many companies that resell their services are very affordable rates. My personal favorite is “Kinsta”. They provide Google Cloud hosting on a super easy to use platform that provides unmatched speed and performance.

The next up I recommend is Cloudways, it’s a suite of different cloud providers that you can easily spin up easy to use services and host multiple websites on.

If you have multiple websites this would be a better option, especially if your websites are lower traffic then utilizing Linode through Cloudways would be a good decision!

Below this I have had success with Siteground, having their own Cache system and image optimization system you can set it up to get a pretty fast website. For the cost, they are on the lower site but do offer great performance for the value.

All 3 of the options above have great Cache “plugins” or tools that are built directly into their servers that provide unmatched speed and performance and for the small price increase over other hosting providers, make it well worth it!

Remember, if you have 100 visitors and you could have 2 or 4 leads, which would you prefer?

CDN

CDN or content delivery network can really help to improve your website’s performance. I personally use Cloudflare for all of our websites and it is a huge resource in helping filter bots, improving page load speeds and much more at the high cost of FREE.

Yup, they have a free tier that is super useful and worth every…penny? In addition to that, they do have paid tiers that will auto-optimize and size your photos eliminating the need for optimizing your own images. WoW!

Are there other CDN’s? Yes, there are many and you can even make your own.

Google Cloud has a CDN, AWS, and many others as well provide a CDN to enhance the speed of your content.

A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.

In other words, many different computers all over the world to quickly get your files to you rather than your host server. Regardless of whether you need one or not getting a free CDN is totally worth it.

Blogger Advice(AMP)

If you blog on your website often I would recommend getting the AMP plugin for WordPress. AMP is Accelerated Mobile Pages (https://amp.dev/) and is lightning fast websites.

Most of the news company websites you look at today are AMP websites.

The Washington Post

CNN

Wired

The problem with AMP is unless you are a developer, the plugins have very limited styling. Which is fine for mobile which AMP is used for.

Adding the official AMP plugin for wordpress can be found here: https://amp-wp.org/

Plugins

If you utilize WordPress you must be careful, many plugins that “improve” the speed will class with your website and end up causing you to run slower than you did before it!

To test this, use GTmetrix and Google Pagespeed insight in order to test before and after the plugin so that you know you are making improvements.

Do this will all your plugins if you can, as this will help know if a certain plugin is harming your site or if you can find an alternative!

NOT ALL PLUGINS ARE CREATED EQUALLY! Some are kids or new learners who give their stuff away for free so they can learn more. Makes sense..

It doesn’t mean it will be the best thing in the world but it may be pretty good!

Summary

Having an excellent hosting provider will help worlds but taking the proper extra steps to ensure your cache is setup and images optimized and take advantage of a good CDN will help tons.