Speed Up your Website: Make the First Few Seconds Count

This is a guest post. Opinions and recommendations are the author’s own and not necessarily those of WP Rocket.

The first few seconds users spend on your website are critical. Within that very short timespan, each of them will decide if your page deserves more attention. So you’d better not let a slow loading page eat up this precious time, causing your visitors to run away prematurely.

Should I stay or should I go?

Everything depends on the first few seconds of each page visit.

“The first 10 seconds of the page visit are critical for users’ decision to stay or leave,” confirms Jakob Nielsen in his post dedicated to the time spent on web pages.

“The probability of leaving is very high during these first few seconds because users are extremely skeptical, having suffered countless poorly designed web pages in the past. People know that most web pages are useless, and they behave accordingly to avoid wasting more time than absolutely necessary on bad pages.”

Actually, this article reports a very interesting study about the understanding of users’ page-leaving behaviors (aka dwell time), based on the analysis of more than 2 billion dwell times. Its main result: time spent on a web page follows a “Negative aging Weibull distribution”. A mathematical concept which is quite simple to summarize: the more time users spend on a web page, the more likely they are to stay a bit longer!

The chart above illustrates this distribution and clearly shows how critical the first 10 seconds of the page visit are. You don’t have more time to prove to the user that the content is valuable enough to stay a little longer.

Not to base this post on a single source, here is another one : “According to data by Tony Haile of Chartbeat, I’ve only got 15 seconds to capture your attention,”  says Ginny Mineo in her Hubspot blog post titled “55% of Visitors Spend Fewer Than 15 Seconds on Your Website”. A longer period of time than for Nielsen, which could be explained by the fact that the studied web pages were mostly articles and blog posts, excluding homepages or landing pages for example.

Loading time first impact

So you have 10 to 15 seconds to communicate your value proposition. Quite a narrow window… Even tighter as your visitors have to load your web page first!

In fact, a few studies highlight the impact of loading speed at this early stage:

  • on bounce rate, as explained by Google in a study about mobile page speed : As the loading time of mobile pages increases from 1 to 5 seconds, the probability of bounce increases by 90%. From 1 to 10 seconds this probability increases 123%!
  • on Pre-bounce rate (users who drop off before the first page even loads): for example a survey from Imperva Incapsula found that 62% of shoppers said they would leave after 5 seconds. Mobify have also tried to measure the pre-bounce rate for a “representative sample across 21 ecommerce websites”: as the loading time increases from 3 to 5 seconds, the pre-bounce rate raises from 14,5% to 40,3%.

Keep in mind that the loading time of your web page is the first contact with your users. It is indeed the very first message you send to them. This is especially important for newcomers who are visiting your website for the first time.

Slowness (or speed) makes such an impact that it can become one of the brand values customers associate with a site,” confirms Jakob Nielsen.

Are your web pages fast enough?

You may not feel worried, as your website seems to be fast enough. At least faster than this 10-second limit. Are you really sure? What about your website performance when network conditions are not ideal? Then we invite you to test your web page speed with Dareboost, using a mobile browser over a 3G connection, for example. You may be surprised by the results if you are not yet used to monitoring your web performance in such conditions.

In 2017 Google released the results of a large study about mobile page speed (900,000 ad landing pages across 126 countries) indicating that 70% of the analyzed pages – in a 3G connection context – took nearly 7 seconds to display their visual content above the fold. And more than 10 seconds before fully loading.

Whenever your web pages take less than 10 seconds to be displayed in most of your users’ browsers, you can guess how important it is then to minimize your loading time and preserve most of these critical 10 first seconds of your users’ visits. The faster your pages are, the less you will be affected by high pre-bounce and bounce rates that could significantly reduce your traffic.

Your SEO performance can also be affected at this stage! Because some users leaving a web page before it is loaded may be tempted to return to their initial Google search… Such behavior, called “pogosticking”, can result in penalties from Google.

Measuring the time that counts for users

To improve the speed of your web pages, the first thing to do is to measure your current performance, as precisely as possible, by choosing the most meaningful indicator to collect.

Dareboost’s advice is to consider the metrics below in addition to load time For several reasons:

  • Load time is often used as a general concept and not as one precise indicator;
  • Load time definition may greatly vary regarding the tool you would use to measure it;
  • Your users should not wait until the web page is fully loaded to access the primary content that will help them decide if they want to stay a bit longer (or not).

So, let’s consider – chronologically – 3 metrics you should focus on:

Time To First Byte: your web performance foundation

TTFB is the delay between the request from the browser and the reception of the first piece of data (HTML code). Whereas that technical time can’t be noticed by the user, it heavily impacts the next steps of the page loading. To sum it up: you won’t have fast rendering pages with a high TTFB!

Start Render: the real beginning for users!

The Start Render is measured from the video analysis of the web page’s loading. It indicates the delay before the first display on the user’s screen. Start Render tells you how long users stay in front of a blank page. You have to reduce this delay as much as possible. Before the first render, visitors have no clue if your website is working or not!
Getting a low start render is a must have,  but still not enough. Your page may still be mostly blank at this time. So you need to collect at least one more indicator.

Speed Index: the most synthetic indicator

The Speed Index  is another metric based on the video analysis. Speed index computes the   average speed to render the elements from the above-the-fold part of a web page. It synthesizes the complexity and progressiveness of a web page rendering, as perceived by a visitor. That’s why the Speed Index is considered as one of the most relevant indicator for UX related to performance. Note that Google used the Speed Index for the study mentioned above!

So, what’s a “good” Speed Index? The smallest of course, with one recommendation from Google to keep in mind: try to get lower than 1000ms.

Measure & Optimize

Congratulations! Now you know what to have to measure about your website speed! Take care to do it in the best conditions:

  • Choose the tool that suits you best, with the clearest testing methodology (to gather the most accurate and relevant indicators),
  • Test your web pages the way your users browse them, in terms of connectivity, location, etc.
  • Choose monitoring over one-time testing, as your web performance never stops evolving.

With these guidelines you will be able to accurately evaluate your web performance and how fast your website needs to become to avoid the problems described in this article. The next,  big, step: identify the actions to be carried out that could bring the most important speed gains. Here is another area where Dareboost could be a very helpful tool with its analysis reports. So is WP Rocket, of course, if you use WordPress!

About

Co-founder of Dareboost

0 comments

Comment

Leave a Reply

Your email address will not be published. Required fields are indicated by *