What elevators can teach us about webpage loading speeds

Or how to make your website appear faster than it actually is.

Sounds strange, but it’s actually doable. And many websites and applications are using this approach (us included). Correct usage of this principle can improve conversions, enhance user experience, reduce bounce rates and ultimately improve your organic search engine ranks.

So, most of you know by now that webpages can be objectively faster from a technical standpoint, but they can also be subjectively faster. This one will focus on relative webpage loading speed, a topic that doesn’t get enough discussions in our opinion.

The beauty in this case is that this is also applicable to other aspects of business, as itis a psychological trait all humans share in one way or the other.

Our sense of time is completely abstract and subjective to what we expect. Your brain mostly asks itself not how long something takes, but how long does it feel it takes. For example – pizza places in your neighborhood usually deliver within 20 minutes, this time you’re hungry and this new joint you decided to try took an extra 5 minutes. These 5 minutes will feel very long and annoying, even though it’s only 5 minutes. You will most likely not take delivery from that place again. Webpage loading speeds act in the same sort of average expectations, which is why slow loading websites contribute to increased bounce rates.

The psychology of speed perception

In the dawn of the previous century riding an elevator served the same function as it does today. But for some reason it was an unpleasant slightly irritating experience. What could be irritating about a technological marvel that physically takes us closer to the sky, while saving us the grueling use of stairs? Well, for starters people stood in a box suspended in mid-air with cables, with nothing but their thoughts of falling to their deaths sprinkled with a bit of claustrophobia. This made riding an elevator seem even slower than it had to be.

Elevator engineers could solve it by making elevators faster, but at the time this was expensive and unpractical. So to solve this problem a simple and much cheaper solution was conceived – placing mirrors in the elevators.

The box was still a box, and the mind was still the same mind. But this time people had something to occupy their time riding the box and also had a better sense of space to reduce that claustrophobia.

After a mirror was placed in one elevator, people were surveyed about the change, and many were pleased how much faster the elevators had become. Absolute speed remained exactly the same, but perceptions of speed had changed.

Fast forward a few decades. An interesting story about the Houston Airport appears in the NY Times. Airport passengers were complaining it took too long to receive their luggage. The airport executives decided to solve the problem by hiring more staff to handle luggage- This effectively reduced the time below 8 minutes, which was within the industry benchmarks.

Houston Airport was finally ready to receive the well-deserved praise on a fast luggage receiving process. But there came a surprise, nothing effectively changed. People were still complaining. Now it was clear that this problem needed to be addressed from a different angle.

A more in-depth analysis discovered that it took people 1 minute to get to baggage claim and another 7-8 minutes of waiting time. This meant 90% of the process was spent in waiting.

Before you continue reading, here’s a little riddle – how would you solve this problem based on the elevator example?

Answer: So, the solution was again cheap and simple – instead of coming up with a high tech teleport device that teleports that luggage instantly to their owner, the walking distance to luggage claim was simply extended to be 6 minutes. Complaints dropped to zero after this. Absolute time remained the same, while the relative time was optimized beyond recognition with a simple approach.

Customer service call centers also use a form of this tactic, letting you know your position in the waiting line. Often these positions jump in several intervals to convey the sense of fast progress to the people waiting on the line.

Disney is famous for absurd waiting lines. To alleviate some of that unpleasant experience they place waiting estimate signs that are exaggerated on purpose. This is to give the feeling that the line is moving faster than it actually is.

Basically, we are like overgrown kids that need to be distracted so we will not have a tantrum.

Optimizing with subjective speed

So now let’s talk about making your website appear faster. Here are a few tips and subjects for you to explore:

Make sure the content above-the-fold loads first

Important content that has the hook needs to appear first and almost instantly. This will give users something to read or interact with while the rest of the content loads. It also beats having a blank page that screams latency. If the content that appears first is engaging and hooks people, they will most likely want to stick around for the rest of the content to load. Also consider that it takes time for people to read – an interesting image with a small well written paragraph, will give the rest of the content the time it needs to load.

One of the ways to do this is by understanding and optimizing the critical rendering path – the first tasks that the browser has to do to show content on the screen, such as interacting with the HTML, CSS and JavaScript files. Here’s a nice guide we found for optimizing the critical rendering path for WordPress.

Another subject to explore here are caching strategies. A good breakdown of the subject can be found in this article, and Google also offers their documentation on the topic.

User progress indicators

If the content you need to load is heavy and will take some time, using progress indicators, such as a spinner or a loading bar, tells the user that the servers are working, and that content is loading. Progress indicators are a form of content on their own and there is a very good reason YouTube is using them. It might not cancel bounce rates entirely, but at the very least reduce them.

They might not be as great as seeing an image or written content, but they are far better than nothing. Plus, people have been accustomed to seeing them and it is the norm for many applications.

And if you want to dive even deeper into the micro level of progress bars themselves, here’s a study from the Human Computer Interaction Institute at Carnegie Mellon University. They found ribbed progress bars are actually superior to standard progress bars in reducing perceived speed.

Progressive content loading and Lazy-loading

This means showing content on demand basically. This is a more advanced strategy and will require some JavaScript expertise.

One of the most common ways this is used today is by loading the content gradually as the user scrolls. Heavier elements such as images and videos will load only once the user gets to them, and often you will see a light blurry placeholder to replace the element until it is loaded.

We implement this in our blog, and if you reached this far, you must’ve noticed that the article didn’t load entirely, but as you scrolled and kept reading, images appeared only once you reached them in the article.

FB understood this principle a long time ago when they started using the abominable dopamine dispenser known as “continuous scrolling”. This keeps users on their site far longer than without that infinite scrolling. Ask yourself, how many times did you continue scrolling impulsively just because more content kept appearing? This method works all too well.

Now implementing infinite scrolling and lazy loading needs to be done correctly so that Google indexes the content correctly for SEO’s sake. Google’s spiders can’t load your content on demand by scrolling like your visitors would, so you need to implement it with that in mind. Make a mistake in this case and the majority of your content may remain hidden to search engines, which is the last thing we need.

Google supports the Lazy-Loading method and actually released several documentations on implementing it correctly in your websites:

How to make sure Lazy Loading doesn’t interfere with crawling

Lazy loading images and video using IntersectionObserver

Technical challenges in implementing continuous scrolling

We also found this nice and detailed guide that explains Google’s documentation in even more detail and depth.

Preloading content in advance

Relating to the first point about loading content above the fold first and the critical rendering path, this simple principle may give a slight performance boost in some cases. For example, fetching content that will be required later in advance, such as a CSS and JavaScript files.

The beauty here is that it’s supported in all the latest browser versions. Here is Mozilla’s documentation on the subject.

There are 5 <link rel> tags dedicated to this:

<link rel=”preload” href=”/style.css” as=”style” /> – Tells browsers to download and cache a resource as a first priority.
<link rel=”prefetch” href=”/style.css” as=”style” /> – Tells browsers to download and cache a resource in the background. Lower priority.
<link rel=”preconnect” href=”https://example.com” /> – Tells the browser to connect to a domain in advance.
<link rel=”dns-prefetch” href=”https://example.com” /> – Tells the browser to perform a DNS resolution of a domain in advance.
<link rel=”prerender” href=”https://example.com/about.html” /> Tells the browser to load a URL and render it in advance. This URL is not visible to the user until he clicks the relevant link, and then the content will appear almost instantly for that user.

The gist here, as you may have already figured is to load things in a certain priority, even before the main content rendering begins.

This can be used strategically in many ways to improve perceived and actual performance. For example – load a light and fast landing page while telling the browser to pretender a heavier URL in the background. If you structure the landing page as a sales funnel, the next most probable clickable link will be loaded virtually instantly for the user.

Since we want to make sure you have your bases covered, here is a cool and detailed guide we found on preloading content, that explains all of the above in much more detail.

The SEO ranking value of speed according to Google

Having said all that, focusing on perceptions only and abandoning the actual objective loading speeds will be unwise. Google still monitors and benchmarks industry webpage loading speeds and decides how to rank websites accordingly.

Speed is an official acknowledged ranking factor according to Google since July, 2018. It all falls in line with the general expectations of speed and latency in tech. Loading speed and performance is considered an integral part of general user experience, and Google attempts to rank websites that provide a high quality user experience high in their SERP.

We actually made a little guide for our readers on webpage loading speeds by Google’s official standards, which you can check out right here:

Webpage Loading Speed Insights from Google

This is especially critical for eCommerce websites where people are flaky and every hindrance can impact your sales funnel, costing you money and hindering growth.

Bounce rates are also a ranking factor. If people bounce quickly from your website because it doesn’t employ any perceived speed strategies, or just generally suffers from slow and poor performance compared to you niche industry standards, your ranks will suffer the consequences.

How thin is patience these days till a bounce happens you wonder? The quick answer is it’s only 3 seconds thick! Some stats released by Google:

1-3 seconds loading time increases the chances of a bounce by 32%
1-5 seconds – by 90%
1-6 seconds – by 106%
1-10 seconds – by 123%

Here’s an article we made all about bounce rates that have to do with speed and patience:

The 3 Second Bounce: How Webpage Loading Speed Impacts SEO and Revenue

2 ways to check your webpage speed today and FOR FREE

The first and most common way is using Google’s own PageSpeed Insights tool. This tool will generate a report with a performance summary score of your website, on both mobile and desktop devices. You will also get a few basic suggestions on how to improve performance.

The second one is using an SEO Audit tool. Now usually these tools require you to pay for a monthly plan to use them. But this is your lucky day because here is a tool that will do a detailed SEO Audit to your website FOR FREE!

We of course mean Pro Rank Tracker, our very own SEO tracking tool:

You will get a detailed report with a general score as well as many suggestions and pointers on how to improve the performance of your website (not just speed-wise, but also improving overall SEO infrastructure!)

Is it truly free? YES! We don’t ask for credit card details to set you up with a free 7-day premium trial.

No auto-renewal traps here, so you don’t have to concern yourself with forgetting and suddenly getting charged out of the blue, like all the other SEO tools are doing.

We take this approach because we simply have full faith in our tech. We know that once you try us out, you will want to sign up for a monthly plan out of your own desire and not because you were ‘tricked’ into it!

More details about our SEO Audit Tool and how to use it:

FREE detailed SEO site audit – Find out if your websites are properly optimized for Google

Conclusion

So, we learned today that actual technical speed is a real ranking influencer, while relative speed perception is an indirect ranking factor. Speed perception also has a very direct impact on user experience and eventually your sales funnel.

The principle of perceived speed is very interesting, and other than its value for marketing and keeping people on your website, it can also teach you about our psychological operating system, and how automatic our perceptions can get.

Make sure your website’s absolute speed is up to Google’s industry standards. If it has to be heavy with content, be sure to explore the tactics and methods we talked about in this article.

Finally, if you enjoyed this article, please subscribe to our blog!

You might be interested to know about the fascinating race to decrease latency in tech and how it’s applied in websites:

The Need For Speed and the Decline of Patience

How to get on board with the fastest and most accurate SERP tracker on the market

Yes, we are the fastest.

We get your ranks within a few minutes instead of hours.

We generate your SEO ranking reports within SECONDS.

Our SEO audit tool, that we mentioned in the story, takes just a few hours to crawl your website and generate a detailed report instead of days.

Finally, the most important aspect of our SERP tracker – we use DEEP Google rank tracking, that includes all the needed ranking layers for 2019 and beyond:

All geo-targeted location ranks (including airport and neighborhood zoomed-in ranks)
Desktop vs. Mobile ranks
Mobile ranks by OS type (exclusive)
Mobile ranks by device type – tablet or phone (exclusive)
All ranks by UI language
Track specific Google SERP elements – Top 3 Local Pack results (Snack Pack), Google MyBusiness map results from any location (Local Finder), Video Carousel (the outer and inner positions)
Track the entire Top 100 search results for any keyword

And much, much more!

START YOUR 7-DAY PREMIUM TRAIL HERE

As we said, it doesn’t require any credit card details to activate!