In the early years, when the front end code was tightly coupled and the back end engineers had to write the front end code, the front end was separated from the back end. This development method greatly improved the maintainability and efficiency of the front end projects, allowing the front end engineers to focus on their main business. However, the first screen rendering time (FCP) has some disadvantages, such as the first screen rendering time (FCP) has more HTTP round-trip time (RTT) than the original, because the first screen needs to request more content, which leads to a white screen. If the white screen time is too long, the user experience will be greatly reduced, and if the user has a poor network speed, the FCP will be longer.

Therefore, a series of optimization methods are derived, and the skeleton screen is proposed.

Interested students can add the end of the wechat group, discuss together ~

1. The FCP optimization

Of the four user-centric page performance metrics that Google proposes, FP/FCP is probably the most familiar to developers:

In order to optimize the first screen rendering time and reduce the white screen time, there are a number of ways to do this:

  • Speed up or reduce HTTP request wear: Use CDN to load the common library, use strong cache and negotiated cache, use domain name convergence, use Base64 instead of small images, use Get request instead of Post request, setAccess-Control-Max-AgeReduce prefetch requests and use the browser prefetch to pre-resolve requests to other domain names.
  • Lazy loading: non-important libraries, non-first screen images are lazy loading, SPA components are lazy loading, etc.
  • Reduce the volume of the requested content: enable Gzip compression of the server, compress and merge JS and CSS files, reduce the size of cookies, SSR directly output rendered HTML, etc.
  • Browser rendering principle: optimize the key rendering path, as much as possible to reduce blocking JS, CSS rendering;
  • Optimize user waiting experience: use loading progress bar, chrysanthemum diagram, skeleton screen instead of white screen;

What is introduced here is the skeleton screen that optimizes the user’s waiting experience. It can be regarded as an upgraded version of the original loading chrysanthemum graph. Combining the traditional first screen optimization method to optimize the application can achieve good results.

2. The frame screen

The skeleton screen can be understood as a blank version of the page before the data is loaded in, a simple critical rendering path. Can take a look at the following Facebook skeleton screen, you can see the page rendering until completely, the user will see a simple style, and describes the current page in the general framework of skeleton screen page, and then skeleton screen completely replace the placeholder in part by the actual resources, the user will feel content is gradually in the process of loading is presented, Reduces user anxiety and makes the loading process subjectively smooth.

If you take a look at the following sample images, the first is a skeleton screen, the second is a chrysanthemum, and the third is no optimization, you can see that the content appears smoother, not more sudden, and the experience is better than the traditional chrysanthemum images.

The technology is now widely used in the products of Facebook, Google, Alipay, Ele. me, Jianshu, Sina Weibo, Zhihu, Meituan, linkedin and other companies. There are also many articles in the forums and community discussing the implementation and usage scenarios of skeleton screens.

3. Method of generating skeleton screen

The main ways to generate skeleton screen are:

  1. Hand-written HTML, CSS for the target page custom skeleton screen approach can refer to<Vue page skeleton screen Injection Practice >, the main idea is to usevue-server-rendererThis plugin, which was originally used for server-side rendering, is used to write the.vueFile processing asHTMLIs inserted into the mount point of the page template to complete the skeleton screen injection. This is uncivilized, and if the page style changes, the skeleton screen has to be changed again, increasing maintenance costs. Skeleton screen style implementation referenceCodePen
  2. Use pictures as skeleton screens; Simple violence, let UI students spend some effort haha; Xiaomi store’s mobile page takes this approach, using a Base64 image as the skeleton screen.
  3. Ele. me’s page-skeleton-webpack-plugin generates skeleton screens based on the different routing pages in the project. However, it should be noted that the plugin currently only supports history routing, not hashing, and currently only supports the skeleton screen of the home page. There is no partial skeleton screen implementation at the component level, which the author said will be implemented in the future (issue9).

There is also a plugin called Vue-skeleton-webpack-plugin that allows you to automatically insert skeleton screens instead of manually. This plugin uses vue’s pre-render function at build time to insert the resulting HTML fragments of skeleton screen components into the mount point of the HTML page template. Inline the style to the head tag. This plugin can set up different skeleton screens for different routes on a single page, or for multiple pages. It is also very thoughtful to write the skeleton screen as a route to the router for debugging purposes.

The vue-skeleton-webpack-plugin can be used with the vue-style-codebase plugin. The plugin can be used with the vue-style-codebase plugin. Set the speed of Network to Gast 3G/Slow 3G in Chrome’s DevTools

Most of the online posts are different in depth, and even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to leave a message to point out ~

Reference:

  1. Understand Skeleton Screen
  2. Add a skeleton screen for the VUE project
  3. Reduce the first screen time, “straight out” is a concept?
  4. Vue Skeleton screen of the page
  5. Small program to build skeleton screen exploration
  6. Ele. me’s PWA upgrade practice
  7. Vue implements the use of a multi-page skeleton screen vue-skeleton-webpack-plugin

PS: Welcome everyone to pay attention to my public number [front afternoon tea], refueling together ~

In addition, you can join the wechat group of “front end afternoon tea Communication Group”. Long press to identify the qr code below to add my friend, note to add group, I pull you into the group ~