Four ways to help you improve the performance of mobile pages

With the development of mobile Internet, we should pay more attention to the performance optimization of mobile page, talk about this matter with you today.

First, why do you want to optimize the most mobile pages?

Looking at the current status of mobile networks:

Mobile page layout More and more complex, the effect is more and more dazzling, directly caused the file is growing, downloading and running faster and lower, and low speed will cause adverse effects, according to statistics:

71% of users want to move the page as fast as the PC page, 74% users can tolerate a response time of 5 seconds, so we must ensure that the mobile end of the page has enough speed.

The speed of the mobile page is related to three factors, namely: mobile network bandwidth speed, device performance (CPU,GPU, browser), the page itself.

The current mainstream mobile network format is 3G:

This year, we also saw the rapid development of the 4g network format, which once again increased the load speed of mobile pages;

And the mobile device itself, up to now, to iphon6/Samsung Note4 and other devices led, smart devices have become larger than the previous screen, CPU, GPU, memory more reliable.

And at the same time, browser manufacturers also to enhance the speed of the page made an indelible effort.

Network system provider, handset manufacturer, browser producer so give us what we can do.

What we can do is to optimize the mobile side of the page itself, which is also our professional value embodiment, so we must do mobile End page performance optimization.

How to do mobile End page optimization?

Before you say this, mention the PC's common optimization methods:

Code optimization (CSS, HTML, JS optimization)

Reduce HTTP requests (Sprite, file merge ...)

Reduce DOM nodes

No blocking (inline css,js after ...)

Cache

...

Most of these tools apply to the mobile end, which are some of the familiar means, here today, interested can refer to the PDI Course "website performance optimization."

Today we are going to talk about some of the best ways to optimize the mobile end, and now it's time to get to the point.

First of all, we have to focus on a page from the beginning to the end of what to go through what stage, there are four main stages:

The main work of each phase is shown in the above illustration, and our optimization objectives are:

Here are some of the best ways to look at the above stages.

First, take a look at what optimizations are available in the load:

　　1. Pre-loading

There are two ways to preload:

　　A. Explicit loading

Like this user can clearly perceive, I call it explicit loading, interactive pages are recommended to add this type of loading, it can increase the interest of the page, on the other hand can make the subsequent page experience smoother.

　　B. Implicit loading

This is loaded in the first picture when the second picture has been preloaded, so that the page experience a smoother way, I call it implicit loading, the advantage of this approach is to save the flow of time and enable the experience to enhance.

　　2. Load on Demand

On-demand loading is an indispensable optimization method, mainly in the following two ways:

For this way, in the first screen load when the first screen of the content to load as far as possible, but the first screen elements are only in the first screen when the load, to a large extent, save the flow, enhance the first load time.

This is called the response to load, meaning that the use of JS or CSS to determine the resolution, so as to select a different size of the picture to introduce, the benefits are obvious, the same can speed up loading speed and save traffic.

　　3. Compress pictures

For compressed pictures, the first thing to mention is a JPG file:

For mobile-end JPG files, there is a conclusion:

JPG with large size lossy compression ratio

Lossless compression using Jpegtran

For PNG, the following conclusions are available:

Colorful pictures using Png24

Low color picture using PNG8

Recommended use of Pngquant

Try to avoid redirection

Why should we try to avoid redirection? As shown in Figure:

This is a test results under the same speed, redirect is slower because it repeats the domain name lookup, TCP link, send request.

5. Use other ways to replace pictures

There are two ways, the first: drawing pictures with CSS 3:

Second: Use Iconfont instead of pictures

But Iconfont is not necessarily better than the picture, and here's an experiment:

For large pictures, Iconfont is no better than Sprite, it is recommended to use Iconfont for small size icons on one side.

Then, for some of the optimizations in script execution, here are just two points:

　　1. Avoid Datauri as far as possible

Datauri is not popular at the mobile end as it is on the PC side because:

After testing, Datauri than simple outside the chain resources 6 times times slower, generated code files relative to the picture file volume has not decreased but increased, and the browser in this base64 decoding process needs to consume memory and CPU, this in the mobile end of the disadvantage is particularly obvious.

　　2. Click event Optimization

On the mobile side, please use events such as Touchstart,touchend,touch instead of delaying the larger click event. Click is slow because of mousedown caused by:

Then, for the optimization in the rendering phase, here are only two points:

　　1. Animation optimization

A) try to use CSS3 animation

Advantages:

Does not occupy the JS main thread

can use hardware acceleration

The browser can be optimized for animations

Disadvantages:

Intermediate state monitoring is not supported

(b) Appropriate use of canvas animations

Advantages:

Can circumvent rendering tree calculation rendering faster

Disadvantages:

The development cost is high, maintenance is more troublesome.

By comparing CSS 3 animations with canvas animations:

Conclusion: 5 Elements using CSS3 animation, more than 5 use canvas animation.

(c) Rational use of RAF (Requestanimationframe)

Advantages:

Can solve the problem caused by the script drop frame, cotton problem

Support for intermediate State monitoring

Disadvantages:

Compatibility issues

Through the RAF animation and settimeout animation contrast:

Get the conclusion: if you don't need a compatible Android 4.3 browser, use RAF to make script animations

　　2. High Frequency event optimization

Events such as Touchmove,scroll can cause multiple rendering, and can be optimized for this event by the following means:

1. Use Requestanimationframe to monitor frame changes, making rendering at the right time

2. Increase the time interval of response change, reduce the number of redraw times.

Finally, one optimization method is proposed for synthesis/drawing:

　　GPU Acceleration

The ways to trigger GPU acceleration are:

CSS3 transitions

CSS3 3D transforms

WebGL 3D Drawing

Video

...

Before using GPU acceleration There are contrast experiments:

GPU acceleration actually drastically reduces the compositing/drawing time, which greatly improves the page speed, but GPU acceleration has its drawbacks:

Excessive GPU layers can incur performance overhead, mainly because using GPU acceleration is actually leveraging the GPU-layer cache to allow rendering resources to be reused, so that if there are more layers, the cache grows, causing other performance problems.

　　Summarize

This paper presents a typical optimization method for the four stages of page presentation, and in the end, it reminds the reader again: In fact, optimization is a double-edged sword.

Load the lifting speed on demand, but may result in a large number of redraw;

Touch response fast, but many scenes do not fit;

GPU accelerates high efficiency, but memory overhead and so on

Loading will make the overall experience fluent, but easily lead to user churn

Picture compression reduces bandwidth costs, but may result in poor visual effects

There are a lot of contradictions like this, please combine the business to optimize according to the actual situation.