JSFoo 2017

JSFoo is a conference about JavaScript and everything related.

Chris Lienert


How to Speed Up Your UX with Skeleton Screens

Submitted May 22, 2017

However well designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Skeleton screens are an effective alternative to progress bars and wait indicators to improve perceived performance.
This talk covers every aspect of skeleton screens from psychology to design to putting them in action with JavaScript.


This talk is an extension of the article How to Speed Up Your UX with Skeleton Screens https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/. The article has proven very popular on SitePoint with over 15,000 views and comes in first on Google when searching the phrase “skeleton screens”.

Beyond the scope of the article, the talk demonstrates how to implement skeleton screens with provided source code. Skeleton screens are an important tool for improve perceived page load.

- Psychology of Waiting
- Skeleton Screens in the Wild
- Making it Happen:
* Design
* Code

Speaker bio

Chris started out as a web developer when Netscape ruled the world and is currently an engineering manager at CXA in Singapore. He has written for Net Magazine and SitePoint, and founded community group Singapore CSS because someone had to.
Aside from musical distractions and accumulating frequent flyer points, Chris and his wife Sarah can be found in the company of their small human.



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}