What Are Skeleton Screens? (And Do They Work?)

0/5 No votes

Report this app


Your website can ship all the products, however none of that issues in case your pages are sluggish to load. According to look by Portent, conversion charges drop by a mean of 4.42% with every further second of load time. People don’t simply need velocity — they anticipate it.

These days, most of your viewers in all probability interacts with high-performing web sites (your Facebooks, YouTubes, Instagrams, and so forth.) frequently, that means their expectations are simply as lofty for any website they go to.

That could seem scary, however there’s an upside: Besides making your website quicker, there are methods to make customers suppose your website is quicker, even when it’s not.

In this put up, I’ll cowl one such methodology, skeleton screens. We’ll unpack what they’re, why they work, and when to make use of them to maintain customers engaged.

Download Now: Free Intro Guide to HTML & CSS

The time period “skeleton screen” was launched in 2013 by product designer Luke Wroblewski in a blog post about reducing perceived wait time. In the put up, he explains how progressively revealing web page content material turns person consideration to the content material being loaded, and off of the loading time itself. We can see an instance of a skeleton display used on considered one of Wroblewski’s early apps, Polar:

skeleton screen example: polar

Image Source

Viewing these screens from left to proper, we see how the loading course of begins with a skeleton display that previews the fundamental construction of the web page, not not like a wireframe. The skeleton display seems first, then the display progressively populates with content material till the complete web page renders.

Since the unique put up, Wroblewski’s strategy has turn into extensively adopted by main web sites, internet apps, and cellular apps.

Let’s have a look at a pair extra website examples. Here’s one from YouTube: When you entry the house web page, you first see this skeleton display:

skeleton screen example: youtube placeholder loading screen

Shortly after, the ultimate web page content material replaces it:

skeleton screen example: fully rendered youtube page

Here’s one other instance from Facebook. This is what customers first see once they load a web page:

skeleton screen example: hubspot facebook page placeholder loading screen

… and right here’s the totally rendered web page:

skeleton screen example: fully rendered hubspot facebook page

Some skeleton screens add an animation part as effectively. It’s frequent to see skeleton screens with gradients transferring left to proper, like this one:

animated skeleton screen example

Image Source

To code an animated skeleton display your self, there are a number of tutorials you may observe. We advocate this one:


Why do skeleton screens work?

Skeleton screens don’t actually make pages load quicker. Instead, they’re designed to make it really feel like pages are loading quicker.

Skeleton screens serve an analogous perform as spinners and different loading animations: a visible cue that the person should wait a bit for content material to load.

spinning load animation example

Image Source

Unlike spinners, nevertheless, skeleton screens create an phantasm of progress. A spinner animation is unrelated to the content material and tells us nothing about how for much longer we’ll want to attend. With skeleton screens, as if we’re watching the content material become visible. As a end result, users perceive loading times as shorter in duration when shown a skeleton screen than when proven a spinner or a clean display, even when the ready interval is identical.

To put it bluntly, skeleton screens trick us into a greater person expertise with out our realizing it. Think about it: You’ve nearly undoubtedly seen this system used earlier than, however do you know what was occurring?

How to Use Skeleton Screens on Your Site

Skeleton screens are one methodology that may enhance the person expertise in your website by giving the notion of shorter load instances. Still, they’re not the right resolution for each loading state of affairs.

Generally, skeleton screens work greatest on:

  • Resource-intensive pages: For instance, pages that require a number of background scripts will take longer to load. This is frequent in internet functions, which pull information from a number of sources to type a whole web page.
  • Image-heavy internet pages: If you could load a number of photos directly, a skeleton display may make a superb placeholder. For these pages, contemplate implementing lazy loading first, which is an analogous method for reducing perceived load time.

And listed below are some circumstances when it is best to keep away from them:

  • As a substitute for poor efficiency: Skeleton screens don’t work ceaselessly and ultimately lose their impact when load instances drag on for too lengthy. If you may additional optimize your website to truly load content material extra shortly, at all times pursue that first. If you’re new to decreasing load instances, our Ultimate Guide to Website Performance is a good place to begin.
  • On pages that load shortly: For pages that load in lower than 500 milliseconds, skeleton screens possible received’t make a distinction within the expertise.
  • Videos: Users nonetheless affiliate video buffering with spinners. Avoid skeleton screens any time a video is loading in your web page.
  • Longer processes: Uploads, downloads, file conversions, and different processes that take longer to finish ought to use a distinct visible cue, like a progress bar.
  • Skeleton screens that don’t match the rendered content material: Try to make your skeleton screens match the ultimate content material in dimension and placement as intently as attainable. When customers see a skeleton display adopted by content material that doesn’t observe logically, this subverts their expectations and negates any profit.

Finally, as with all UX optimizations, we advocate testing skeleton screens in your guests when you’ve got the means to take action. Even although analysis has discovered them efficient, that doesn’t imply they’re assured to work in your viewers. Skeleton screens could even trigger confusion, however the one option to know is to check it together with your customers.

Skeleton Screens: Less Creepy Than They Sound

Any small UX enchancment you can also make offers you a leg up on opponents, particularly in terms of how briskly your website runs. Alongside different efficiency optimizations, skeleton screens are a worthy tactic to maintain customers invested in your content material.

Oh, and yet one more factor: Despite their identify, you should utilize skeleton screens all 12 months spherical. You don’t want to attend till Halloween. 🎃

New Call-to-action

Leave a Reply

Your email address will not be published.