Alibaba Wireless front-end performance optimization guide (Pt.1 load optimization)

preface

In the past year, Alibaba's wireless front-end team has comprehensively optimized the performance of its business. The following is our optimization guide based on practical experience, and we hope it will be helpful to you.

The first part only includes data load period optimization.

Picture control

For web pages, especially e-commerce pages, pictures usually occupy a large amount of visual space, are the most important presentation content in the page, and occupy most of the bytes transmitted by the web page. Therefore, the optimization of images is the focus of our performance optimization

Enable WebP

WebP is a picture file format that supports lossy compression and lossless compression, derived from the video encoding format VP8. According to the official data of Google, the file size of the lossless compressed WebP is 26% less than that of the PNG file, and the file size of the lossy compressed WebP is 25-34% less than that of the JPEG file with the same SSIM index. WebP supports lossless transparency (also called alpha channel) and animation format Animated WebP.

Although only Android system natively supports WebP format at present, because of its great significance for page performance optimization, we will carry out environment detection when the page is loaded. For example, the page rendering environment supports WebP, we will replace the image links in the page with WebP format versions. If the page is dedicated to a controllable client (we can place a dedicated WebP decoder in the client), we will enable WebP even in the iOS environment

Optimize high split screen and weak network adaptation

From Apple's Retina, mobile phone manufacturers began to use more and more high pixel density displays. In the browser, one of our CSS pixels can often correspond to two or more device pixels. In this environment, in order to pursue the best display effect, we will use the image size several times that of the browser's CSS pixel logo It should be noted here that if you use a 2x (double CSS pixel resolution) image, the final image volume will increase by 4 times (the memory occupation will also increase by 4 times) as the horizontal and vertical pixels are doubled Similarly, if you use a 3x image, the transmission volume will eventually increase by 9 times

Users like clear and gorgeous pictures, but they hate pages that cannot be opened In our practice, we use up to 2x (double CSS pixel resolution) pictures. If the page is dedicated to a controllable client, we will replace the image resources used by the page according to the network conditions obtained from the client In the worst network environment (2G mobile network), we will even use 30% quality compressed images to replace the original image links.

Single picture size control

Sometimes, if you don't set limits, no matter how you optimize, bad situations will always occur. In our practice, we have set a limit of no more than 50Kb for a single image. Every time we publish, we will check the page image. If the image still needs to be published beyond this limit, we have to go through a special process

Reasonably use CSS/SVG/ICON Font instead of pictures

In the traditional desktop Web, we often use Sprite (Sprite) technology to combine multiple icons into a large picture to display different parts of the large picture for different icons. However, in the mobile Internet environment, due to the limited memory of the device, every time an icon is displayed using Sprite technology, the browser needs to decode the entire large image into memory once. Considering the multiple CSS pixel resolution mentioned above, the memory occupied and decoding time are often considerable. The improper use of Sprite technology will cause the performance of mobile pages to decline instead of increase.

The more appropriate choice is CSS3, SVG and ICON Font technology. If your icon can be drawn using these techniques, it can provide a clear effect in any resolution and zoom settings and reduce the overhead of transmission and memory

Load pictures on demand

E-commerce type websites use multiple image list pages to display product content. We will load image resources on demand in non WIFI network environments. We only load image resources when they appear on the first screen or when users slide into the visible area The key to this optimization is to abstract the global image presentation for unified control

Network request

The wireless pages we are talking about today are no longer traditional "pages", but "single page applications". With the gradual increase of application complexity, in addition to static data such as pictures, more and more dynamic data will be loaded. If you want to pursue high-quality single page applications, it is imperative to optimize these requests

Domain name convergence

If various resources introduced in your page come from different domain names, note that each additional domain name will increase the domain name resolution cost. In the complex domestic mobile Internet network environment, the resolution speed of different domain names may vary by dozens of times. Therefore, you need to consciously converge the number of domain names to be resolved for page resources, especially CSS, JS, Font resources that will block page rendering. The reason for many poor performance pages may be that the domain name resolution speed of the introduced resource is very slow or cannot be correctly resolved at all. In our practice, the number of domain name resolutions generated by a page cannot exceed 5.

Reduce requests

After optimizing the number of domain names to be resolved, you need to focus on the number of page resource requests If it is a long-term maintenance product page, the static resources introduced into the page need to be consolidated and compressed according to the dependency order in addition to the most common basic database Generally, there is one request for JS and one request for CSS. For the common marketing activity pages of e-commerce manufacturers, we even developed tools to link all CSS and JS resources into the page, so that all resources except pictures can be obtained by One Request

In addition, resource request redirection should also be avoided as far as possible. One less redirect and one less request number

Optimization and compression of text data

The optimization and compression of text data (HTML, CSS, JavaScript) can be divided into three stages: release preparation (removing comments, merging CSS statements, and removing JS code blocks that will not be executed), compilation compression (merging files, removing spaces, and confusion), and transmission compression (GZip) The key to this optimization is to sort out the process to ensure that the compression automation and server GZip instructions are correctly configured.

Data interface optimization and monitoring

With the popularity of the thought of separating front and rear ends of the Web and the development of front-end template technology in the past two years, we are more and more inclined to obtain JSON data through the interface after the page is loaded and render the page on the front end. This method improves the speed of page loading for the first time, but often hides the original performance problems. The data acquisition and final rendering time that needs to be optimized with great effort is often hidden under the appearance of fast rendering of empty pages. A more serious situation occurs when data needs to be obtained from multiple different interfaces, and these interface calls are still interdependent. Once such a situation occurs, page performance tends to decline rather than increase

In our practice, we require the data to be delivered to the front end for rendering after the back-end assembly is completed. The data required for complete rendering in one screen cannot come from more than one interface. All data sources converge to a single interface service layer for statistics and monitoring.