What you need to know about speed optimization

Published on: July 17, 2019

Consider an online shopper who goes to a webshop with a clear idea of what she’s going to buy.

This user will most likely look for the search bar or the product menu first.

When the page loads the search bar and the user can immediately type the product name and search for it, she will probably perceive the website as “fast” even if technically, the rest of the page’s elements have not loaded yet.

On the other hand, even if the search bar has loaded in a snap but the user cannot use it until the page content has fully loaded (which took several seconds), she will probably perceive it as a “slow” response on the webshop’s part.

This is the illusion of speed, and the ultimate key to it is understanding user perception.

Often, instant feedback is what makes a page appear “fast” to a user.

When a user navigates from one page to another, say, from a Google search results page to another website, the first signal of speed to the user is whether the navigation started successfully, followed by how fast content appears on the page and whether or not she can start to interact (i.e., click, swipe, type) with the elements.

Google found that retail websites that prioritize the loading of above-the-fold content (the area of the screen first visible to a user without further scrolling) are perceived to be faster than the actual measured page speed, likely because the part immediately visible to the user is already available even while the rest of the page (i.e., the part “below the fold”) is still loading.

But it’s not just how quickly (and easily) the user can interact with the page’s elements.

In the same study, Google also explored other factors affecting a user’s perceived speed or performance of a website. Their research revealed that:

  • Older users tend to be more relaxed and perceive more websites as fast, regardless of the actual speed. On the other hand, younger users (18-24 years old) are more demanding for fast loading times.
  • When users are in an anxious or rushed state, they tend to perceive sites as slower; when they are calm and relaxed, their perceived speed of the site gets faster.
  • Perception also depends on the situation—for users who are on the move, sites are perceived to be slower, but for users who are sat down or at home, sites are perceived to be faster.

So while seconds do matter—a page that painstakingly loads for 30 seconds will probably be perceived as slow no matter the situation—also keep in mind that several other external factors affect the user perception of speed.

Ultimately, it’s how the user experiences the time that your page is loading that should bear more weight when you optimize your site.

Metrics for measuring speed

If speed is more than just a single number, how do you effectively measure it? Different factors in speed and perception need different metrics. Here are some of the most commonly used ones by popular speed testing tools.

(For actual tools you can use for testing the speed of your site/page, go to How to speed up your website.)

Page speedusually refers to either the time it takes for all the content in the page to fully load or the time it takes for the browser to receive the first byte of information from the web server.

DOM ready time – DOM, or Document Object Model, refers to the source of the web page, and includes the page content such as text, images, and other files.

DOM ready time is the amount of time it takes for the complete HTML code to be available to the browser.

DOMContentLoaded – is when all the content from the DOM has been fully loaded by the browser.

Speed index – is the time it takes for content above-the-fold to be displayed.

Different devices have different screen sizes, so the speed index varies depending on the size of the screen where the page is being viewed.

First paint – is when the screen renders anything visually different from the previous screen, like a change in the background color.

First contentful paint – is when the first content appears on the page, like a text, image, or canvas element.

First meaningful paint – is when the first primary useful content is loaded.

Useful could mean different things for different websites—it could be an image if it’s a product page, or a headline and some text for a news article.

First CPU idle – is the point at which the page is minimally interactive, or when the user is first able to engage with the page.

Time to interactive – is the time it takes for content to be visually rendered and usable for the user, like the “search bar” example above.

Time to first byte – is the time it takes for the browser to receive the first “byte” or piece of data from the web server; also what is sometimes referred to when talking about “page speed”.

First input delay – is the time between the first interaction of the user with the page to the time that the browser is able to respond.

It’s quite similar to “time to interactive”, but first input delay measures actual visitor sessions, whereas time to interactive can be measured without any actual users.

 

Some of these metrics are quite technical, while some are more attuned to user experience. In measuring speed, it’s a good practice to get measurements from a mix of both kinds.

Metrics such as the DOM ready time or Speed index are useful for reporting and keeping track of progress in your optimization process, while the more user-centric performance metrics will help in optimizing with your average user in mind.

For instance, the first meaningful paint will guide you to prioritizing which parts or elements on your webpage should be loaded first, depending on which part of the page is most relevant for your user.

To drill down on the specifics of each metric, and to learn more about other metrics that could be useful for your measurement, check out Google’s official guides:

Optimizing for mobile speed

You probably always hear about crafting an omnichannel experience that involves meeting your customer where they are—in 2019, they are on their phones.

Most businesses already recognize this fact and have adapted a mobile strategy in one way or another. However, mobile presence alone is no longer enough to cater to customers’ evolving expectations.

In 2018, the average loading time for a mobile page was 15 seconds.

This was reported in the same research by Google that revealed that 53% of mobile visits leave a page that loads more than 3 seconds.

Considering the large discrepancy, it’s clear that not nearly enough businesses are taking steps to optimize their mobile sites.

But why do you need to optimize specifically for mobile?

For starters, search results ranking is done differently on mobile and desktop.

We previously mentioned that Google officially made page speed a ranking factor for mobile search results last January 2018. This means that Google specifically looks at your page as it loads on mobile and evaluates it independently from the desktop version of your site.

So even if you are on the top result for a certain keyword on desktop, your ranking may still go down significantly in mobile search if your mobile site is too slow. And if you’re not paying attention to your mobile speed, you may be missing out on potential customers who are primarily using their phones.

Are your mobile users converting?

If you have a Google Analytics account, this is fairly easy to find out.

Type in something along the lines of “trends per device category” in the search bar at the top of your Analytics dashboard, and it will show you a line graph representing your users across different devices: desktop, mobile, and tablet.

To see a more detailed breakdown, click on “Go to report”

In the report, you will see various data including:

  • How many users visited your site from each device category (in the time range that you have selected)
  • The bounce rate for each device category
  • The conversion rate for each “goal” you have set in your Analytics account

If you find that you’re getting more (or at least the same number of) visitors from mobile but less conversions than desktop, it may be worth taking a longer look at the mobile version of your website.

Of course, there are probably many different factors at play in how your site visitors are converting.

But if your site is significantly slower on mobile than on desktop, then speed may be playing a more critical role in your conversions than you think.

Google said that “speed equals revenue”, after all.

Secondly, it all goes back to user expectation.

Smartphones represent easy accessibility and on-the-go connections, so if you think about it, it makes sense that users will expect to have a fast experience on their mobile phones.

In fact, according to a 2017 research by Akamai, only 42% of users expect loading times to be either “a bit slower” or “much slower” on their phones than on desktop.

On the other hand, more than half of the participants expect mobile speed to either be the same as, or faster than desktop loading times.

For businesses, the only thing to do is keep up.

Understanding the concepts behind speed optimization—the illusion of a fast loading website, optimizing for more than just a single number, and prioritizing mobile—is important to get the right perspective when actually taking the steps to speed up your site.

So with these in mind, it’s time to dive in to some actionable tips for optimizing your site for speed.

Next: Tools for measuring speed and performance »

Recent Articles

Get a call from Peter within 24 hours and have a conversation about your requirements.