Ali Wireless Front end performance optimization Guide

Preface

The Ali Wireless front-end team has performed a full-scale performance optimization for the business in the past year. The following is a summary of our experience based on the optimization guide, we hope to help.

The first section includes only data-load-period optimizations.

Picture control

For Web pages, especially e-commerce pages, pictures usually occupy a lot of visual space, is the most important content of the page, and occupy the majority of the page transmission bytes. Therefore, the optimization of the image 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 Google's official data, lossless compressed WebP 26% less file size than PNG files, lossy compression WebP less 25-34% file size than JPEG files in the case of an equivalent Ssim index. WebP supports lossless transparency (also known as alpha Channel) and supports animation format animated WebP.

Although only the Android system natively supports the WEBP format, but due to its great significance for page performance optimization, we will be in the page loading environment detection, such as page rendering environment support WEBP We will replace the page image link to the WEBP format version. If the page is dedicated to a controlled client (we can place a dedicated WEBP decoder in the client), we'll enable WEBP even in an iOS environment.

Optimize high-split-screen and weak-Net-fit

Starting with the retina of Apple, handset makers are increasingly using 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 achieve the best display results, we will be several times the browser CSS pixel logo image size. It is important to note that if you use a 2x (twice-fold CSS pixel resolution) image, the final picture will be 4 times times larger (4 times times more memory-intensive) because both the horizontal and vertical pixels are doubled. In the same vein, if you use a 3x image, the resulting increase in the transfer volume will be increased to 9 times times.

Users like clear and beautiful pictures, but users hate the open page more. In our practice, we use up to 2x (twice times the CSS pixel resolution) picture. If the page is dedicated to a controlled client, we replace the picture resource used by the page based on the network situation obtained from the client. In the worst network environment (2G Mobile network), we even use images that are compressed by 30% quality to replace the original image link.

Single Picture size control

Sometimes, if you don't set a limit, no matter how bad you optimize it will always happen. In our practice, we set the limit of the size of a single picture to 50Kb for pictures. Each time we publish, we will check the picture of the page, if the picture exceeds this limit still need to publish, we have to go a special process.

Use Css/svg/icon font instead of pictures properly

In traditional desktop web, for the icons within the page, we often use sprite technology to merge multiple icons into a large picture, showing different parts of the larger image for different icons. But in the mobile Internet environment, due to the limited memory of the device, each use of sprite technology to display an icon, the browser will need to decode the entire large image into memory once, taking into account the above mentioned in the multi-fold CSS pixel resolution situation, the memory and decoding time is often considerable. Unreasonable use of Sprite technology will cause the mobile page performance does not rise and fall.

The more appropriate option is css3,svg and icon font technology. If your icons can be drawn using these techniques, any resolution and zoom settings can provide clear results and reduce the overhead of transport and memory.

Load a picture on demand

E-Commerce type website multi-map list page to show the contents of the product, we will be in the non-WiFi network environment when the image resources on demand loading, only when the picture resources appear on the first screen or as the user swipe the screen into the visible area, we load. The key to this optimization is to take a layer of abstraction of the overall picture presentation for unified control.

Network requests

Today we talk about the wireless page, many times is no longer the traditional "page", but a "single page application." With the increase of application complexity, dynamic Data will be more and more in addition to static data, such as images, which need to be loaded. Optimization of these requests is imperative if you want to pursue high-quality, single-page applications.

Domain Name Convergence

If you introduce a variety of resources in the page from different domain names, note that each additional domain name, will increase the domain name resolution overhead. In the complex domestic mobile Internet network environment, the resolution speed of different domain names may be dozens of times times difference. So you need to consciously converge on the number of domain names that the page resource needs to parse, especially Css,js,font resources that block page rendering. A lot of poor performance page The reason may be the introduction of the resource Domain name resolution is very slow or can not parse correctly. In our practice, a page can produce no more than 5 domain name resolution.

Reduce the number of requests

After optimizing the number of domain names that need to be resolved, you need to focus on the number of page resource requests. In the case of long-term maintenance of the product-type page, the static resources introduced in the page will need to be merged in a dependency order in addition to the most common base libraries. Usually JS and CSS request each one. For the e-commerce vendors to see the marketing activities page, we have even developed a tool to all the CSS and JS resources in the page, so that the other than the picture of the rest of the resource one request can be achieved.

In addition, resource request redirection should be avoided as much as possible, with fewer redirects and a smaller number of requests.

Optimization and compression of text data

The optimization and compression of text data (Html,css,javascript) is divided into three stages, namely release preparation (removal of annotations, merging of CSS declarations, removal of JS blocks that will not be executed), compile-time compression (merging files, removing whitespace, confusion), and transfer phase compression (GZIP). The key to this optimization is that the grooming process ensures that the compression automation and server gzip instructions are properly configured.

Data interface optimization and monitoring

With the development of front-end template technology and the popularity of the separation trend of the web in the past two years, we are more and more inclined to get the JSON data through the interface and render the page on the front page after loading. This approach brings up the first load speed of the page, but often hides the original performance problem. It takes time to optimize the data acquisition and the final rendering times are often hidden beneath the surface of the empty page for quick presentation. A more serious situation occurs when data needs to be fetched from multiple different interfaces, and when these interface calls are interdependent, the performance of the page is often not up-and-down.

In our practice, we require data to be rendered to the front end after the completion of the back-end assembly, and the data required for full rendering in a single screen cannot come from more than one interface. All data sources converge uniformly to a single interface service layer for statistical and monitoring purpose.

Ali Wireless Front end performance optimization Guide