Help you optimize mobile page performance from four aspects

With the development of mobile Internet, we need to pay more attention to the performance optimization of mobile pages. Today I would like to talk to you about this.

First of all, why should most pages be optimized for mobile?

Looking at the current status of mobile networks:

Mobile page layouts are becoming more and more complex, and the effects are becoming more and more dazzling, which directly leads to larger and larger files, and lower and lower download and running speeds. The low speed will cause adverse effects. According to statistics:

71% of users expect mobile pages to be as fast as PC pages, and 74% of users can tolerate a response time of 5 seconds, so we must ensure that mobile pages are fast enough.

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

The current mainstream mobile network standard is 3G:

This year, we also saw the rapid development of 4G network standards, which once again improved the loading speed of mobile pages;

As for mobile devices themselves, as of now, led by devices such as iPhone6/Samsung Note4, smart devices have become larger than before in screen size, and their CPU, GPU and memory are more reliable.

At the same time, browser manufacturers have also made indelible efforts to improve the speed of pages.

Network standard providers, mobile phone manufacturers, and browser manufacturers are so powerful, what about us? What can we do?

What we can do is optimize the mobile page itself, which is also a reflection of our professional value, so we must optimize the performance of the mobile page.

How to optimize mobile pages?

Before talking about this, I want to mention the commonly used PC optimization methods:

1. Code optimization (css, html, js optimization)
2. Reduce HTTP requests (Sprites, file merging…)
3. Reduce DOM nodes
4. Non-blocking (inline CSS, JS after…)
5. cache

…

Most of these methods are applicable to mobile devices. These are some familiar methods. I will talk about them here today. If you are interested, you can refer to the PDI course "Website Performance Optimization".

What I want to talk about today is mainly some optimization methods suitable for mobile terminals. Now let’s get to the point.

First of all, we need to pay attention to the stages that a page needs to go through from the beginning to the end of presentation. There are four main stages:

The main work of each stage is shown in the figure above, and our optimization goals are:

Next, let’s take a closer look at the optimization methods for the above stages.

First, let's take a look at the optimization methods in loading:

1. Preloading

There are two ways to preload:

A. Explicit loading

This kind of loading that users can clearly perceive is called explicit loading. It is recommended to add this loading method to interactive pages. On the one hand, it can increase the fun of the page, and on the other hand, it can make the subsequent page experience smoother.

B. Implicit loading

This method of pre-loading the second image when loading the first image, making the page experience smoother, I call it implicit loading. The advantage of this method is that it saves traffic and enhances the experience.

2. Load on demand

On-demand loading is an indispensable optimization method, which mainly includes the following two methods:

In this way, when the first screen is loaded, the content of the first screen is loaded as much as possible, and the elements outside the first screen are loaded only when they appear on the first screen, which saves traffic to a great extent and improves the loading time.

This is called responsive loading, which means using JS or CSS to determine the resolution, and then selecting pictures of different sizes for introduction. The benefits of this are obvious, and it can also speed up loading and save traffic.

3. Compress images

For compressed images, the first thing to mention is jpg files:

For JPG files on mobile devices, we have the following conclusions:

1. Use large size and high lossy compression ratio jpg
2. Lossless compression using jpegtran

The following conclusions are drawn for png:

1. Colorful pictures using png24
2. For low-color images, use png8
3. It is recommended to use pngquant
4. Try to avoid redirects

Why should we try to avoid redirection? Because:

This is a test result under the same network speed. The reason why redirection is slower is that it repeats the domain name lookup, TCP connection, and request sending.

5. Use other methods instead of pictures

There are two ways, the first one is: relying on CSS 3 to draw pictures:

The second method: use iconfont instead of pictures

But iconfont is not necessarily better than pictures. Here is an experiment:

For large images, iconfont is not better than sprite images. It is recommended to use iconfont for small-sized icons on one side.

Then, regarding the optimization methods in script execution, here are just two points:

1. Avoid DataURI

DataUri is not as popular on mobile devices as it is on PCs because:

After testing, DataURI is 6 times slower than simple external link resources. The size of the generated code file does not decrease but increases compared to the image file. In addition, the browser consumes memory and CPU in the process of base64 decoding, which is particularly disadvantageous on mobile devices.

2. Click event optimization

On mobile devices, please use touchstart, touchend, touch and other events instead of the Click event with a large delay. The reason why Click is slow is because of mousedown:

Then, regarding the optimization methods in the rendering stage, here are just two points:

1. Animation optimization

a) Try to use CSS3 animation

advantage:

1. Does not occupy the js main thread
2. Hardware acceleration available
3. Browsers can optimize animations

shortcoming:

Does not support intermediate state monitoring

b) Use canvas animation appropriately

advantage:

Can avoid the calculation of the rendering tree to render faster

shortcoming:

The development cost is high and the maintenance is troublesome.

By comparing CSS 3 animation and Canvas animation:

Conclusion: Use CSS3 animation for less than 5 elements, and use canvas animation for more than 5 elements.

c) Reasonable use of RAF (requestAnimationFrame)

advantage:

1. Can solve frame loss and freeze problems caused by script problems
2. Support intermediate state monitoring

shortcoming:

Compatibility issues

Compare RAF animation with settimeout animation:

Conclusion: If you do not need to be compatible with Android 4.3 browser, please use RAF to create script animations

2. High-frequency event optimization

Events like touchmove and scroll can lead to multiple renderings. For such events, we can optimize them by:

1. Use requestAnimationFrame to monitor frame changes so that rendering can be performed at the correct time

2. Increase the time interval for responding to changes and reduce the number of redraws.

***, only one optimization method is mentioned for synthesis/drawing:

GPU Acceleration

The ways to trigger GPU acceleration are:

1. CSS3 transitions
2. CSS3 3D transforms
3. WebGL 3D drawing
4. Video

…

There are comparative experiments before using GPU acceleration:

GPU acceleration actually greatly reduces the synthesis/drawing time, thereby greatly improving the page speed, but GPU acceleration has its own disadvantages:

Too many GPU layers will bring performance overhead. The main reason is that using GPU acceleration actually utilizes the GPU layer cache, allowing rendering resources to be reused. Therefore, once there are more layers and the cache increases, it will cause other performance problems.

Summarize

This article proposes typical optimization methods for the four stages of page presentation. At the end, I would like to remind readers that optimization is a double-edged sword.

Loading on demand improves speed, but may cause a lot of redrawing;

Touch responds quickly, but is not suitable for many scenarios;

GPU acceleration is efficient, but has high memory overhead, etc.

Loading will make the overall experience smooth, but it is easy to cause user loss

Image compression reduces bandwidth costs, but may result in poor visual quality.

There are many similar contradictions. Please optimize according to the actual situation of the business.