​​Understanding Your Google PageSpeed Score

By Rodney Laws | Business

Oct 02

​​You’ve got a shiny new website all ready to showcase your store’s products. You’ve invested in great product photos. You’re ready to slip the switch and make some money.​​

​​So, you launch, investing your first few hundred dollars or so into some targeted Facebook ads.​​

​​Crickets. No conversions. No sales.​​

​​You look at your stats and, while the ad got good engagement, most of those clicks didn’t translate into full-fledged page views.​​

​​Especially on mobile.​​

​​“What happened?” you ask yourself.​

We explain what happened. 

​PageSpeed matters

​​Have you ever clicked on an ad, interested to learn some information about a cool new product, service, or company, only for the website to take forever to load?​​

​​What do you do?​​

​​Easy, bounce. ​​

​​You have better things to do than wait several seconds for a page you were only nominally interested in to load.​​

​​So, you leave. ​​

​​The same thing happens to you, when your website is slow. And slow websites are expensive — especially for ecommerce companies — because conversion rates drop by xx as page load time increases by 1 second.​​

​​For an ecommerce company, conversion rates and revenue are closely linked to one another.​

​Testing your website’s PageSpeed

​​Before optimizing your website for speed, you have to get a baseline.​​

​​First, head over to Google’s free PageSpeed Insights Tool. Enter in your website’s name (ex. www.mywebsite.com) and click “Analyze”.

​​You should get something back that looks like this:  

Credit: PageSpeed Insights 

​​Right away, you’ll see a score for this page, based on several factors, discussed in more detail below. As you can tell from the legend underneath the score, a score of 0-49 means your page speed is poor. A score between 50 and 89 is considered competitive. A score above 89 is considered good.​​

​​By default, this test only analyzes one page, on a mobile device. More specifically, a mobile device on a 3G network. The idea is simple: if your page loads fast under those conditions, it should load fast under much better conditions, such as 4G networks, fiber connections, or desktop browsers.​​

​​Because the test only scans one page at a time, you should test a few different pages to get a sense for overall performance. Or request a complete site analysis from your website developer.​​

​​It’s highly likely that pages like your homepage — which may have product sliders, social media feeds, or the like — will run more slowly than pages like your blog, which are largely text. So, run the test a few times on a few pages.​

​Understanding your score

​​Once the test runs, you’ll see a section that looks like this underneath your overall score.   

Credit: PageSpeed Insights

​These metrics can help you start to get a sense for where/how to start improving page speed scores.

​​​​But, first, you should know what they mean.​​

​​First Contentful Paint

​​This refers to what marketers call ‘above the fold’ content — the first thing(s) you see when a website loads. For most people, it’s the banner image & text on your homepage. This metric matters because until this First Contentful Paint occurs, the person on your page doesn’t have anything to look at. During this time, they are left wondering what’s going on on the website and are highly likely to bounce if this exceeds 1-2 seconds.​​

​​Time to Interactive

​​Just because you can see a page, doesn’t mean you can do anything on it. Imagine going to google.com and having to wait 30 seconds before you could use the search bar.​​

​​That would be terrible and you probably wouldn’t use Google anymore.​​

​​Same thing with your website.​​

​​While First Contentful Paint shows how long it takes for a user to see something, Time to Interactive measures how long until the user can do something.​​

​​Total Blocking Time

​​Webpages are made up of a lot of code that the browser deciphers into images and text we can see. ​​

​​But computers don’t see things like we do.​​

​​They parse the code.​​

Top to bottom, until it’s all parsed.​​

​​Except sometimes there are scripts or code snippets that have directions to stop parsing until they finish executing. For example, you might use custom fonts and you (or your developer) set up the website so that it doesn’t load until those fonts are available, so it always ‘looks right’.​​

​​When a browser can’t parse the content it wants to parse because it’s waiting for some other code to finish running, this is called blocking. The code that hasn’t finished running is blocking all the code behind it from running.​​

​​And it’s not a good look.

​​Largest Contentful Paint

​​While First Contentful Paint measures how long it takes for the first few elements to be visible to a user, Largest Contentful Paint measures how long until the lion’s share of the content is visible. Once the Largest Contentful Paint has loaded, the page is generally considered “done loading” and the browser is ‘done’ with most of its work — meaning the user should now be able to consume the contents of the webpage at their leisure.​​

​​Speed Index

​​The Speed Index describes (about) how long it takes for the full page to load.

​​Cumulative Layout Shift

​​Have you ever been on a website like Forbes when it shifts up or down, so that an ad can be served?​​

​​Super annoying, right?​​

​​Cumulative Layout Shift measures the degree to which elements on a page move after it’s loaded. The lower the better because users don’t want their experience interrupted unpredictably or without their express consent (e.,g clicking a button).​

​How to Improve PageSpeed

​​Knowing a little bit about how the web works and what the different sections above mean is a great way to start improving your PageSpeed scores, increasing conversion rates, and selling more products.

​​​​In general, you’ll see a section on your report that looks like this:

Credit: PageSpeed Insights

​​Unfortunately, everyone’s report is going to look different, so it’s a bit hard to offer specific advice to you without an assessment of your website, but there are a few culprits we see that, when addressed, can radically help improve PageSpeed.

​​Manage images properly

​​People are visual and so it’s natural to want to have images on your websites. Fortunately for us, our hi-def cameras and phones take beautiful images.

​​​​Unfortunately, though, these images are often massive and bloated, which means they can take a long time to load. Large images at the top of the page will make both your First Contentful Paint time and Largest Contentful Paint times go up.

​​​​Your best bet, when uploading images to your ecommerce store, is to shrink or crop them before uploading them to your store. Generally, you don’t need images wider than 1000px (except maybe for an intro slider), so resize images down small enough to increase speed, but large enough they aren’t grainy.

​​​​If possible, use .jpgs for photos and .pngs more sparingly. JPG files are usually smaller file sizes and don’t need to be as ‘crisp’ as .png images (like logos and icons) need to be. If you have the technical skills, use .webp images — which are both small and hi-resolution — but have a plan for supporting browsers that don’t support .webp (like Safari).

​​​​Finally, ‘lazy load’ images towards the bottom of the page. Lazy loading refers to the practice of not fully loading a resource (image) until the user gets to that part of the page. That prevents the image from being a “Blocking” resource as the page loads.

​​Clean up your Javascript

​​The second thing we see a lot of are code snippets in the ‘head’ tag that increase the First Contentful Paint and Total Blocking Time metrics.

​​​​When a browser gets to a 3rd party script, it very often has to go off-site to where that script is stored, process it, and then come back before it goes on to the next line of code.​​

​​While this might only be a few hundred milliseconds, those milliseconds add up to real seconds. And can destroy your PageSpeed scores.​​

​​If your First Contentful Paint and Total Blocking time are greater than 2 seconds and 1 second respectively, this area merits a look.​​

​​Remove/reduce unnecessary code

​​While being able to add and edit your own website content is really helpful, it can also make getting a fast website really difficult. Page builders and Content Management Systems’ (like WordPress or Shopify) themes can bloat your code. ​​

​​You can easily end up with stylesheets, javascript, and 3rd party resources being loaded on pages where they are not needed. ​​

​​The result is a site that is unnecessarily slow, but ‘easy to use’.​​

​​Fortunately, there are tools your developer has that can allow them to load scripts on certain pages, while excluding them from others. It might take a few days, but they can probably help you load scripts smarter.​

​Small tasks, big wins

​​When working on improving PageSpeed, it’s very common to see poor scores across the board. Part of this is the cascading nature of the report — a long First Contentful Paint will generally cascade to a long Large Contentful Paint (afterall, if the first part hasn’t loaded, how can the largest part load?) and long Speed Index. If code bloat is a problem, Time to Blocking and all the Contentful Paint metrics will be high.​​

​​So, start with factors related to your First Contentful Paint, such as reconfiguring (or eliminating) Javascript and code bloat. These small tasks will cascade through the rest of your metrics.

​​Next, address your images, since it’s manageable without a developer — albeit laborious.

​​Finally, have your developer review the remaining items and work with you to come up with a plan to handle the rest. 

​​By the time you get there, though, you will probably have realized substantial benefits in PageSpeed and should start seeing your conversion rates and sales increase.

​​Nobody likes a slow website and, for ecommerce companies, a slow website impacts negatively on sales. Head over to Google’s PageSpeed Insight tool, evaluate your website, and get started trying to optimize for speed today. 

​​