When First Impressions Arrive Too Late

Before the Internet was the Internet

I've been online since before the Internet was really "the Internet." No, really.

Back in the 1980s I connected to bulletin board systems (BBS) using a phone modem. There were no web pages, no HTML, and certainly no full-screen photographs. Information arrived one screen of 8-bit, pixelated text at a time.

That information traveled over the telephone lines and arrived at a 300 baud phone modem attached to my computer¹. 300 baud is 30 bytes per second. So it took roughly 33 seconds to fill my television screen with text. And that TV was not big. The computer rendered 25 lines of 40 characters each. That was the 1980s BBS experience.

Back to the Present

Why am I telling you all this? Because I'm still amazed today that I can open a website and, within a second or two, see a beautiful, full-screen image appear almost instantly. But that speed has quietly changed our expectations. As our Internet connections improved, our patience shrank.

Bouncing

I'm pretty sure we have all been there and done this. You click on a link and the website begins to load up, but it is taking too long. So what do you do? You hit the back button and leave. You head back to the search results to try a different site. Website developers call this action a "bounce", and they work very hard to create sites that visitors do not bounce off of.

Today's Internet and the Expectation of Speed

With the modern Internet, we are taking full advantage of the incredible speeds. And why not?

A full-screen hero² image is a powerful way to make a first impression. Before a visitor reads a single word, they've already formed an opinion about your business. But for that impression to land with impact, it has to land quick. And an image that has not been thoughtfully coded can arrive too late.

Google actually measures this expectation with a metric called Largest Contentful Paint, or LCP. On many landing pages, the hero image is the largest thing visitors see, so Google uses it as one of the clearest indicators of how quickly the page feels ready.

What Impression did the Audited Site Leave?

This brings us back to the site that I audited.³

It looked fantastic!

It had a screen-wide image of IT professionals evaluating equipment, and that image had a blue wash over it and text on the top. It got across the essence of a technology-savvy business in one image.

Or it would have...

Had it not loaded slowly.

The Hard Numbers

The audit quickly revealed why the site's strong visual design wasn't making the impact it should have. Its mobile LCP was 6.6 seconds. That was well past Google's threshold for a good user experience. According to Google's research, pages that take around five seconds to load have a 90% higher probability of visitors leaving compared with pages that load in one second. Obviously, this needs to be addressed, but what is causing the lag in the load time?

Interestingly, the image itself wasn't the whole problem. In this particular case, it was how the image was being delivered to the browser.

Delivering the Image

There are many ways an image is handed over to the browser to display. It can be included directly in the html code. It can be a background image in the style sheets (CSS). It can be delivered via JavaScript. Each method has its pros and cons, and should be selected according to need. In this particular case, the hero image wasn't discoverable in the initial HTML. JavaScript had to run before the browser learned where to find it. Until then, the browser couldn't even begin downloading one of the most important visual elements on the page.As a result—along with other coding practices causing delays—the browser could not put the whole page together until after a significant delay.

Imagine having a new dishwasher installed. The installer arrives on time and is ready to work—but the dishwasher has not been delivered yet. The delay is not in the installation. The installer simply cannot begin until the appliance arrives. Essentially, that is what happened here.

The browser was ready to display the hero image, but JavaScript had not yet revealed where to find it. Until that happened, the browser could not even begin downloading the image.

It's Already Too Late

It isn't enough for a hero image to load quickly—it has to start loading quickly.

A customer's first impression doesn't begin when the page finishes loading. It begins the moment your visitor starts waiting. And in this case, the browser didn't even know the first impression existed until it was already busy doing other things.

And what does the customer experience? A page that feels slow.

Professional First Impressions Are Intentional

Professional developers think about when the browser discovers important content—not just how large that content is. Websites that inspire confidence in your business are the result of intentional engineering decisions that visitors never consciously see—but absolutely experience.