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

Your website can deliver all the goods, but none of that matters if your pages are slow to load. According to search by Portent, conversion rates drop by an average of 4.42% with each additional second of load time. People don’t just want speed — they expect it.

These days, most of your audience probably interacts with high-performing websites (your Facebooks, YouTubes, Instagrams, etc.) on a regular basis, meaning their expectations are just as lofty for any website they visit.

That may seem scary, but there’s an upside: Besides making your website faster, there are ways to make users think your website is faster, even if it’s not.

In this post, I’ll cover one such method, skeleton screens. We’ll unpack what they are, why they work, and when to use them to keep users engaged.

What is a skeleton screen?

A skeleton screen is a visual placeholder that appears before the page content renders completely. It provides a low-fidelity preview of the fully rendered page in order to give the impression of a faster load time. A skeleton screen comprises lightly colored shapes, lines, and text that outline the structure of the page before the final content loads in its place.

The term “skeleton screen” was introduced in 2013 by product designer Luke Wroblewski in a blog post about reducing perceived wait time. In the post, he explains how gradually revealing page content turns user attention to the content being loaded, and off of the loading time itself. We can see an example of a skeleton screen used on one of Wroblewski’s early apps, Polar:

Image Source

Viewing these screens from left to right, we see how the loading process begins with a skeleton screen that previews the basic structure of the page, not unlike a wireframe. The skeleton screen appears first, then the screen gradually populates with content until the full page renders.

Since the original post, Wroblewski’s approach has become widely adopted by major websites, web apps, and mobile apps.

Let’s look at a couple more website examples. Here’s one from YouTube: When you access the home page, you first see this skeleton screen:

Shortly after, the final page content replaces it:

Here’s another example from Facebook. This is what users first see when they load a page:

… and here’s the fully rendered page:

Some skeleton screens add an animation component as well. It’s common to see skeleton screens with gradients moving left to right, like this one:

Image Source

To code an animated skeleton screen yourself, there are several tutorials you can follow. We recommend this one:

Why do skeleton screens work?

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

Skeleton screens serve a similar function as spinners and other loading animations: a visual cue that the user must wait a bit for content to load.

Image Source

Unlike spinners, however, skeleton screens create an illusion of progress. A spinner animation is unrelated to the content and tells us nothing about how much longer we’ll need to wait. With skeleton screens, as if we’re watching the content come into view. As a result, users perceive loading times as shorter in duration when shown a skeleton screen than when shown a spinner or a blank screen, even when the waiting period is the same.

To put it bluntly, skeleton screens trick us into a better user experience without our realizing it. Think about it: You’ve almost definitely seen this technique used before, but did you know what was happening?

How to Use Skeleton Screens on Your Site

Skeleton screens are one method that can improve the user experience on your website by giving the perception of shorter load times. Still, they’re not the perfect solution for every loading scenario.

Generally, skeleton screens work best on:

• Resource-intensive pages: For example, pages that require multiple background scripts will take longer to load. This is common in web applications, which pull data from several sources to form a complete page.
• Image-heavy web pages: If you need to load multiple images at once, a skeleton screen might make a good placeholder. For these pages, consider implementing lazy loading first, which is a similar technique for decreasing perceived load time.

And here are some cases when you should avoid them:

• As a replacement for poor performance: Skeleton screens don’t work forever and eventually lose their effect when load times drag on for too long. If you can further optimize your website to actually load content more quickly, always pursue that first. If you’re new to lowering load times, our Ultimate Guide to Website Performance is a great place to start.
• On pages that load quickly: For pages that load in less than 500 milliseconds, skeleton screens likely won’t make a difference in the experience.
• Videos: Users still associate video buffering with spinners. Avoid skeleton screens any time a video is loading on your page.
• Longer processes: Uploads, downloads, file conversions, and other processes that take longer to complete should use a different visual cue, like a progress bar.
• Skeleton screens that don’t match the rendered content: Try to make your skeleton screens match the final content in size and placement as closely as possible. When users see a skeleton screen followed by content that does not follow logically, this subverts their expectations and negates any benefit.

Finally, as with all UX optimizations, we recommend testing skeleton screens on your visitors if you have the means to do so. Even though research has found them effective, that doesn’t mean they’re guaranteed to work on your audience. Skeleton screens may even cause confusion, but the only way to know is to test it with your users.

Skeleton Screens: Less Creepy Than They Sound

Any small UX improvement you can make will give you a leg up on competitors, especially when it comes to how fast your website runs. Alongside other performance optimizations, skeleton screens are a worthy tactic to keep users invested in your content.

Oh, and one more thing: Despite their name, you can use skeleton screens all year round. You don’t need to wait until Halloween. 🎃