dog yawning at laptop because a website's download speed is slow

One of Google's ranking factor is, and has been for years, your website's download speed.

Jump right to how a website's download speed is affected here.

First we need to put things in context: Google uses many algorithms to determine the worthiness of your website to rank well. In 2020, they'd finalized using the mobile version of your website, not the desktop version, to analyze how well your website is built. Read how the download speed of your website matters.

You might say, "Well, aren't the mobile version and desktop version of my website the same thing?" In most cases, the answer is "Yes, but they shouldn't be." If a web design company knows what they're doing, the mobile version of your homepage should be different from the desktop version. The mobile homepage should be an abbreviated version of the desktop, and use smaller WEBP images instead of .jpeg images. (More on that below.)

See the difference between our desktop homepage and mobile home page here.

Since we're a Columbus web design company, we take these issues seriously. Which is why the mobile version of our site isn't the same as the desktop version. It's abbreviated, for quick loading, because load speed is one of Google's ranking factors.

The difference between our desktop and mobile homepages.

Our desktop homepage has a matrix of 12 images :

screenshot of desktop homepage

Our mobile homepage has only 3 of those images. Note the screen shot below shows the scrollable homepage. In reality, you'd only see the first image under "our projects" when viewing the mobile version of our website.

sevell mobile homepage that helps our website's download speed

What does Google consider a good score for the mobile version of a website?

The average score of a mobile website's rating on Google's PageSpeed Insights in 31.

The Google's PageSpeed rating for our mobile site is 62, twice the average rating.

sevell web design company page speed insights ratingIf the rating of your website's download speed is less than 30, you should have your web design company look into how to improve it. Below are some ways they can do that.

We did own research on what affects Google PageSpeed Insight ratings.

We did this by cloning the website we'd done for a home builder. That builder had a 33 rating for their mobile site, which is the average rating for a mobile website. To do this test, we cloned our client's site to our server so we wouldn't be doing our testing on their live site. Note: this is why the URLs on the website we're testing says "treplus.sevell.2.com." and not TreplusCommunities.com.

This is what we found:

1. Not changing anything

We needed a control in our experiment, so before we started, we checked the PageSpeed Insights score of their mobile site, which was 33. For this experiment, the mobile score was really all we cared about. That's because if the mobile score is high, the desktop score will almost always be higher.

screenshot of Google PageSpeed test for baseline

#2. Removing Accessibe

Adding AccessiBe's code to a website makes it ADA-compliant, helping folks who are visually-impaired to navigate your website. Our website is ADA-compliant and you can see how that works by clicking on the little man in the blue circle in the lower left corner.

We always were slightly suspicious the AccessiBe code  was causing some slow down. However, upon removing it, the score only jumped 3 points. Granted, not a lot, but it is 10% of the total score.

So the PageSpeed Insights score for removing the AccessiBe code brought it up to 36. We knew we couldn’t remove AccessiBe's code in real life. However, the goal was to show this slowdown to AccessiBe, and see if there's anything they can do on their end to speed things up. It’s doubtful they'd take our request seriously (especially if we're the only ones who've said anything), but it never hurts to ask!

screenshotof Google PageSpeed Insights after removing the AccessiBe code

#3. Removing the Chat Widget

Ultimately, we knew removing the chat widget was going to be the biggest jump, because they carry a lot of extra code. However, we didn’t predict this big of a jump! A near 31 point leap! Just like AccessiBe, we can’t just remove the chat widget because it's too important.

However, we've suggested our client put some pressure on the chat widget folks to make it more streamlined code-wise. Thirty one points is a huge difference, so hopefully, like AccessiBe, the chat widget folks can make their code more efficient.

screenshot of Google PageSpeed Insight after removing the chat widget

#4. Remove the "ShareThis" Code

Good news was we could actually remove this code on all but 3 of the website's pages. Doing this helped the Google PageSpeed rating jump another 4 points.

screenshot of Google PageSpeed rating after removing the sharethis code

#5. Removing Google Tagging and Analytics

Of course, this is something we can’t do in the real world, but we really wanted to know how much these Google tracking codes affect download speed on PageSpeed Insights scores. And, apparently not much—only a jump of a single point. And that's good news, since we really can't remove this code from a live website.

screenshot showing Google PageSpeed score removing google tagging and analytics

#6. Removing all Google Fonts

As with Google tagging and analytics, we can't remove all the Google Fonts because that would make the site look terrible. However, there is a different way to load Google fonts onto a website that does improve the overall PageSpeed Insights score. (More information about this is further down this blog.) The score below is what their site could be if we did away with all the Google fonts… and WOW! We definitely didn’t predict it would be another huge jump of 16 points.

screenshot of Google PageSpeed when removing Google fonts from website

#7. Removing Top Pick Logos, which are these:

Columbus Top Picks logoRemoving the 2 “Top Pick” logos on their website, earned us another 2 full points on the overall PageSpeed Insights score. And this gets us to a 90 score, and we are officially in the GREEN!

For the record, NO websites' mobile version ever makes it ito the green. Most DESKTOP versions don't make it into the green either. The best you can expect, for the desktop version of a website, is to be in the 80s, and as we said earlier, a score of 31 is average for the  mobile version of a website.

screenshot of Google PageSpeed Insghths when removing CBus TopPicks logo

#8. Slideshow Changes

Most websites we design have a slide show at the top of the homepage.

One change we'd done on the cloned version of their website is definitely something we can do in real life:

  • Reducing the slideshow to 3 slides instead of 4. We tell folks there shouldn't be more than 3 slides anyway, because most likely no one is going to stay and see that 4th slide. They'll most likely scroll down the homepage, or click a link in the top level menu, and
  • Make the images WEBP images instead of .jpeg images.

So we reduced the slideshow to just 3 slides, and made smaller WEBP versions of the images. The WEBP images are coded to only load for the mobile version of the website. At the same time, we also loaded some code on the site that checks to see if the browser a visitor is using supports WEBP images. (WEBP images are recommended by PageSpeed Insights whenever possible.)

In conclusion, if the browser does support WEBP images, the browser will pull those, instead of the JPG images used for the desktop version of the website. This is the score we got after those changes… an impressive 97!! Woohoo!

screenshot of Google PageSpeed Insights usingn WebP images

#9. Putting the Google Fonts Back

A couple of questions really lingered though: "What score would we get, if we just loaded the Google fonts back on without doing anything else? Would it drop the overall score a lot? Or, are the Google Fonts something we shouldn’t worry about?"

The answer in short, is "Yes: we should worry about the Google fonts." By removing the Google fonts, the overall PageSpeed Insights score dropped almost 20 points, which prompted us to look into how we could load the fonts differently, without affecting the score so much.

screenshot of Google PageSpeed Insights after putting Google font back on the website

#10. Installing the Google Fonts on the server

After quite a bit of research, we came to the conclusion that the only way to improve the download speed while using Google fonts, is to download the font files and install them directly on the server. Doing this didn’t jump us back to that awesome 97 score, but it did make a dramatic enough jump to get us back into the upper 80’s.

screenshot of Google PageSpeed Insights after installing Google fonts on the server

In summation:

Some of these things we experimented with in our test, like the chat widget, we really don’t have any control over (as far as removing it). However, there were other elements we were able to make some improvements on.

In reality,  we could never get a mobile website rating of 80 on a live site. But it is our goal to hit 60, which is double the average Google's PageSpeed Insights rating most mobile websites get.

At the end of the day, the biggest issue isn’t getting the perfect score on Google PageSpeed Insights: that's just not possible. It’s about making sure your site is loading fast in all types of situations, because not everyone's going to be viewing your site on their desktop at home, or the office (if people ever go BACK to their offices after the pandemic is over).

They might be on a tablet or phone  in their car, in a coffee shop, or at the airport, getting terrible wi-fi. Our goal is to make sure everything is loading as fast and efficient as possible so your website plays well with Google.

You should make sure the web design company you're working with is doing the same.