Improving Website Page Speed and Performance: What Really Matters?

March 17, 2020
by
Jon Price

Learn what Google's PageSpeed Insights metrics are most important to pay attention to for improving page load performance, including progressive rendering techniques to provide an even better user experience.

Development
UX & Design

It shouldn’t come as a surprise that people can be astonishingly impatient. Our need for instant gratification is evident by our Amazon Prime shopping habits, on-demand video and music streaming, reliance on amusement park fast passes, convenience services like Shipt and curb-side pick-up, and leaving websites that don’t load fast enough.

Take a look at some fast facts on user engagement when websites take too long to load:

  • Some 40% of visitors abandon sites that haven’t loaded within three seconds

And just a one-second delay in loading time results in:

  • 16% decrease in customer satisfaction
  • 11% fewer page views
  • 7% loss in conversions

Page speed has always been a hot topic for website improvement. It’s one of the most common topics we receive questions around, especially speed has so much potential for defining a positive site experience or preserving leads and increasing conversions. Yet, too often, digital and web teams let page speed slide in order to accommodate better aesthetic design, new functionalities, or higher quality photos.

You’ve heard the overly said phrase “less is more”. The same applies for how long it takes for your website to load. Your visitors initially prioritize a quick to load site over other bells and whistles you add. The page has to load in order to use them anyway, right?

When pages are slow, users tend to bounce or leave after the first page, don’t often re-visit, and fail to convert. Plus, Google penalizes websites that load slowly which means – even if your page is relevant to a user’s search – the page won’t be surfaced as high in search engine results pages since Google knows users don’t tend to stay long.

The bottom line is that for every second of waiting you put visitors through due to slow site speed, the move conversions or sales you potentially lose out on. Thankfully, there are solutions that work for even some of the most content-heavy websites, such as Amazon and YouTube.

Many people get hung up by their Google PageSpeed Insights score, a number between 0-100 that reports on the performance of a page on both mobile and desktop devices. Generally, 0-49 is considered slow, 50-89 is considered average, and 90-100 is considered exceptional.

While it’s possible to receive a 100, it’s not necessary. Don’t waste your time chasing the grade or fixating on an ideal page speed. Rather, use it as one of several indicators to assess the performance of your site.

That’s because when we talk about page speed, there are actually dozens of additional metrics to consider. For instance, factors such as browser, device, and content on the page all contribute to page speed success. So, what really matters?

It’s more important to understand the metrics that factor into your Google PageSpeed Insights score. These include:

  • Speed index: The amount of time — measured in milliseconds or seconds — that it takes for the server to return the first response to a request.
  • First contentful paint (FCP): The first time the browser “paints” — or displays — any text, image, or canvas on a visitor’s screen.
  • First meaningful paint: The moment at which primary elements of a page like images, text, and buttons appear. Time to interactive: The amount of time it takes before a user can start interacting with the page.
  • First CPU idle: Similar to ‘time to interactive’, this is how long a page takes to respond to user interaction within a reasonable amount of time.

These factors are more reliant upon user perception. While users don’t usually define their experience according to these terms, they are the metrics users care most about because they directly affect their experience and ability to engage with the site.

Additionally, these are the metrics most important for SEO improvement. Search engine crawlers care far more about the time to first byte — the first time indexable text starts appearing — than they do about everything else happening in the page rendering process. Search engines want to provide users with a great experience for what they’re looking for by showing content that is relevant and can provide what they’re looking for quickly.

To address these metrics, web developers often use progressive rendering, a collection of techniques to present a webpage to visitors as quickly as possible without making them wait for the whole page to load. This enables sites to still provide the bells and whistles without compromising a great site experience. While we won’t go into detail on how to accomplish each (we’ve covered passing Google’s above-the-fold CSS and removing render-blocking JavaScript already), the following few strategies can help attain stronger scores in the above metric categories:

  • Lazy loading: Content loads as the user scrolls down the page, saving bandwidth but assuming the most relevant content exists above the fold.
  • Placeholders: Shapes appear to show where images or text will be once everything finishes loading, helping users remain patient by indicating what’s to come.
  • Eliminate unnecessary functionality: Ensure that downloadable resources or automatically rotating carousel imagery is worth the overhead, since they lower your page speed score by continually reloading.

Overall, Google’s PageSpeed Insights is a valuable tool for alerting you to growth opportunities, but the most important metric to focus on is the speed of your website’s load time. Focus on progressive rendering tactics to minimize the work your site needs to do to provide a great user experience. By letting the rest of your website load more slowly behind the scenes or only when it’s needed, you can reap benefits such as longer page time averages, more repeat visitors, and increased conversions.