In modern front-end development, user experience and performance optimization have always been one of the goals pursued by partners. Skeleton Screen (Skeleton Screen) is a method to optimize the loading speed of the user interface and is used in various (App/mini-program/h5) applications. This article will delve into the best practices of skeleton screens and introduce how to implement and optimize skeleton screens based on code examples.
What is a skeleton screen?
Skeleton screen is a technology that displays the structure of the page in the form of placeholders during the page loading process. It increases user satisfaction by displaying simple gray blocks and lines that give users visual feedback while waiting for content to load.
Why do you need a skeleton screen?
On mobile devices and slow network environments, page loading speed becomes particularly critical. Users don't want to wait a long time to see page content. The skeleton screen can quickly display the page structure before the content is fully loaded, allowing users to feel the progress of page loading, thus improving the user experience.
Implement skeleton screen using pure CSS
There are many ways to implement a skeleton screen, you can use pure CSS, you can also use SVG, and you can even use some front-end libraries. Below we take a simple pure CSS implementation as an example.
1. Implement a simple html skeleton page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton Example</title>
</head>
<body>
<div class="skeleton">
<div class="skeleton-header"></div>
<div class="skeleton-body">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
</div>
</body>
</html>
2. Implement skeleton screen style
/* skeleton.css */
.skeleton {
width: 300px;
padding: 20px;
background-color: #f6f7f8;
}
.skeleton-header {
width: 100%;
height: 200px;
background-color: #e0e0e0;
}
.skeleton-body .skeleton-line {
width: 100%;
height: 20px;
margin-top: 20px;
background-color: #e0e0e0;
}
The implementation effect is shown in the figure. Although the skeleton screen is simple, it can be further optimized if it is done well.
3. Skeleton screen optimization
/* CSS */
@keyframes shimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.skeleton-header, .skeleton-body .skeleton-line {
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
position: relative;
}
The above code adds a flowing light and shadow animation effect to the skeleton screen, making the skeleton screen look more dynamic.
Pre-rendered skeleton screen
Pre-rendering-based skeleton screen technology generates the skeleton of the page in advance through server-side rendering (SSR) or static site generation (SSG), and then fills the content when the client loads, thereby improving performance and SEO.
Use react-loading-skeleton to create a skeleton screen
import React from 'react';
import Skeleton from 'react-loading-skeleton';
function UserProfile() {
return (
<div>
<h2>User Profile</h2>
<div className="user-details">
<Skeleton height={
100} width={
100} circle={
true} />
<div className="user-info">
<Skeleton height={
20} width={
200} />
<Skeleton height={
20} width={
200} />
<Skeleton height={
20} width={
200} />
</div>
</div>
</div>
);
}
export default UserProfile;
Best Practices for Skeleton Screens
Keep the skeleton screen consistent with the actual content
To ensure that users do not perceive "jumping" content, the structure and style of the skeleton screen should be consistent with the final loaded content.
Use placeholders
Placeholders can help the page maintain a stable layout and prevent major layout changes before the content is loaded.
Optimize the performance of skeleton screen
To improve performance, you should reduce the size of skeleton screens and ensure they load as quickly as possible.
Summarize
Skeleton screen technology is a key part of improving front-end performance and user experience. By providing visual feedback during the loading process, skeleton screens can reduce user waiting time and increase user retention, thereby improving user satisfaction.
Whether you are developing a single-page application, a multi-page application, or a mobile application, you can consider integrating skeleton screen technology into your project to provide users with a faster and smoother experience.