Improved Perceived Performance with Skeleton Screens

When building an app, you’re always making sure that you are doing everything correctly from a technical perspective to ensure great performance. But another, often ignored part of performance is called perceived performance. Perceived performance is how fast an action appears to happen to the user.

Skeleton screens are a great way to improve the perceived performance of your app, when combined with traditional optimizations (lazy loading, code splitting, etc).

Let’s dive a little deeper into what skeleton screens are, why they are better than traditional loading spinners, and how Ionic makes it easy to use them!

Skeleton screens, not a scary movie

You have probably seen skeleton screens before if you have used Facebook, Slack or Medium, but let’s go into detail about what they are. We can think of skeleton screens as rendering the “skeleton” or a “mockup” of content before it has actually loaded. For example, here’s what Medium does:

Pic courtesy: blog.ionicframework.com

As you can see, Medium is rendering some grey bars where content will be once it has loaded and also renders a grey box where the image will be once it has loaded.

Another good example is Facebook. They make heavy use of skeleton screens in their native app and web app. They use a similar implementation to Medium, rendering a Skeleton Screen where content will eventually be:

Pic courtesy: blog.ionicframework.com

That’s coo…but why?

As we mentioned above, skeleton screens can be better at increasing perceived performance than loading spinners, but why?

Let’s consider an app that only uses loading indicators and look at how it could benefit from using skeleton screens.

Loading Indicator

Pic courtesy: blog.ionicframework.com

Skeleton screen

Pic courtesy: blog.ionicframework.com

The page using a skeleton screen has several advantages here that lead to a better experience including:

• It feels faster by giving an indication of what the content is going to look like before it has loaded.We never block the user from interacting with the
• app. The user is free to scroll and interact with the app even while the content is still being loaded.
• The page using a loading indicator is a very jarring experience as it flashes from a loading spinner to the fully loaded page. Whereas the page using skeleton screens provides a much smoother experience when the content loads.

Sweet, can I haz now?

Skeleton screens are pretty simple to make with plain HTML and a little CSS. Here is an example of a simple Skeleton Screen in Ionic-Angular.

In the above StackBlitz example, we hide the real list of users and display the skeleton list until the users have loaded using <code>*ngIf</code>. In our skeleton item we have the same DOM as our real item, an h2, h3 and p element.

<ion-list *ngIf="users">
<ion-item *ngFor="let user of users">
<h2>{{user.name}}</h2>
<h3>Email: {{user.email}}</h3>
<p>Company: {{user.company.name}}</p>
</ion-item>
</ion-list><ion-list *ngIf="!users">
<ion-item *ngFor="let fake of fakeUsers" class="fakeItem">
<h2></h2>
<h3></h3>
<p></p>
</ion-item>
</ion-list>

.fakeItem {
 h2, h3, p {
   background-color: lightgrey;
   opacity: 0.5;
   height: 1em;
   margin-top: 10px;
 }

 h2 {
   width: 35%;
 }

 h3 {
   width: 40%;
 } 

 p {
   width: 60%;
 }
}

<ion-item>
<ion-skeleton-text width="40px"></ion-skeleton-text>
</ion-item>