Mobile html page optimization, terminal html page

Mobile html page optimization, terminal html page

For websites with high traffic volumes, front-end optimization is necessary, even if the size of 1 kb is optimized, next, let's take a look at the HTML5 frontend optimization of the mobile phone platform from ISUX, which may be helpful and enlightening to you.

Overview

1. PC optimization methods are also applicable on the Mobile side
2. on the Mobile side, we propose three-second rendering to complete the first screen indicator.
3. Based on the second point, load the first screen for 3 seconds or use Loading
4. Based on China Unicom's 3G network average 338KB/s (2.71 Mb/s), the first screen resource should not exceed 1014KB
5. The rendering speed on the Mobile side is also the focus of optimization due to the Mobile phone configuration.
6. Based on the fifth point, it is necessary to properly process the code to reduce rendering loss.
7. Based on the second and fifth points, all codes that affect loading and rendering of the first screen should be placed behind the processing logic.
8. Pay attention to the performance during user interaction after loading.

Optimization Guide



[Load Optimization]

The loading process is the most time-consuming process, which may take up 80% of the total time-consuming. Therefore, it is the focus of optimization.

· Reduce HTTP requests
Because the mobile browser responds to four requests at the same time (Android supports four requests, and iOS 5 supports six requests), we should minimize the number of page requests, the number of simultaneous requests for the first loading cannot exceed 4
A) Merge CSS and JavaScript
B) Merge small images and use sprites.

· Cache
Cache can reduce the number of requests sent to the server and Save loading time. Therefore, all static resources must be cached on the server, and use long Cache whenever possible (Timestamp can be used for updating long Cache resources)
A) cache all cacheable Resources
B) use a long Cache (use a timestamp to update the Cache)
C) Reference CSS and JavaScript using external expressions

· Compressing HTML, CSS, and JavaScript
Reducing the resource size can speed up web page display. Therefore, we need to compress Code such as HTML, CSS, and JavaScript, and set GZip on the server side.
A) compression (for example, extra spaces, line breaks, and indentation)
B) enable GZip

· No blocking
JavaScript (non-asynchronous) written in the HTML header, and Style written in the HTML Tag will block page rendering, so CSS is placed in the page header and introduced using Link, avoid writing Style in HTML tags. Place JavaScript at the end of the page or load it asynchronously.

· Loading with the first screen
The quick display of the first screen can greatly improve users' perception of the page speed. Therefore, we should try our best to optimize the quick display of the first screen.

· Load as needed
Loading resources that do not affect the first screen and those that do not need the current screen resources as needed can greatly increase the display speed of important resources and reduce the overall traffic.
PS: loading on demand will lead to a large number of re-painting, affecting rendering performance
A) LazyLoad
B. Scroll screen Loading
C) load data through Media Query

· Pre-loading
You can use the Loading Method to add large resource-heavy pages (such as games). After the resources are loaded, the page is displayed. However, if the Loading takes too long, the user may be lost.
For user behavior analysis, the next page of resources can be loaded on the current page, improving the speed
A) perceptible Loading (for example, Loading for a space game)
B) imperceptible Loading (for example, Loading the next page in advance)

· Compressing Images
Images are the most traffic-consuming resources, so avoid using them whenever possible. select the most appropriate format for use (based on your needs, make a big or small decision, compress the image using the smart graph, and use Srcset in the Code for on-demand display.
PS: over-compression affects Image Display
A) use the mind chart (http://zhitu.tencent.com /)
B) use other methods to replace images (1. Use CSS3 2. Use SVG 3. Use IconFont)
C) use Srcset
D) select an appropriate image (1. webP is better than JPG 2. PNG8 is better than GIF)
E) Select the appropriate size (1. loading for the first time is not greater than 640 KB 2. Not wider than (based on the general width of the mobile phone screen ))

· Reduce Cookie
Cookie will affect the loading speed, so the static resource domain name does not use Cookie

· Avoid redirection
Redirection will affect the loading speed, so correct settings on the server to avoid redirection

· Asynchronously load third-party resources
Uncontrollable third-party resources may affect page loading and display. Therefore, it is necessary to asynchronously load third-party resources.

[Script execution optimization]

Improper script processing will block page loading and rendering, so pay attention to it during use.

· CSS is written in the header, JavaScript is written in the tail or asynchronous

· Avoid empty Src for images and iFrame
Empty Src reloads the current page, affecting the speed and efficiency

· Avoid resetting the image size whenever possible
Resetting the image size is to reset the image size multiple times on pages, CSS, JavaScript, etc. Resetting the image size multiple times will lead to multiple redraws of the image, affecting performance.

· Avoid using DataURL for images
If a DataURL image does not use an image compression algorithm, the file will become larger and need to be decoded before rendering. Loading takes a long time.

[CSS optimization]

· Avoid writing Style attributes in HTML tags whenever possible

· Avoid CSS expressions
CSS expressions must be rendered out of the CSS tree, so avoid CSS expressions.

· Remove empty CSS rules
Empty CSS rules increase the size of CSS files and affect the execution of CSS trees. Therefore, you need to remove empty CSS rules.

· Correctly use the Display attributes
The Display attribute affects page rendering, so use it properly.
A) display: After inline, width, height, margin, padding, and float should not be used.
B) display: float should not be used after inline-block
C) display: Do not use vertical-align after block.
D) display: After table-*, you should not use margin or float.

· Do not abuse Float
Float requires a relatively large amount of computing during rendering and is used as little as possible.

· Do not abuse Web Fonts
The Web font needs to be downloaded, parsed, and re-painted on the current page to minimize usage.

· Do not declare excessive Font-size
Excessive Font-size leads to CSS tree Efficiency

· No unit is required when the value is 0.
For browser compatibility and performance, do not include the unit when the value is 0

· Standardize various browser prefixes
A) No prefix should be placed at the end
B) only use (-webkit-no prefix) for CSS animation.
C) The other prefixes are-webkit--moz---ms-no prefix. (The-o-operabrowser uses the blink kernel instead, so it is eliminated)

· Avoid making the selection operator look like a regular expression
The advanced selector takes a long time to execute and is difficult to understand.

[JavaScript execution optimization]

· Reduce re-painting and Backflow
A) Avoid unnecessary Dom operations
B) try to change the Class instead of the Style. Use classList instead of className.
C) Avoid using document. write
D) Reduce drawImage

· Cache Dom selection and computing
Every time the Dom is selected, it needs to be calculated and cached.

· Cache list. length
Every time length is calculated, this value is saved with a variable.

· Use event proxy whenever possible to avoid batch binding events

· Use the ID selector whenever possible
The ID selector is the fastest

· TOUCH event Optimization
Use touchstart and touchend instead of click, because the speed is fast and the speed is fast. However, you should note that Touch responds too quickly and may cause misoperations.

[Rendering optimization]

· Use Viewport in HTML
Viewport can accelerate page rendering. Use the following code
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">

· Reduce Dom nodes
Too many Dom nodes affect page rendering. Reduce Dom nodes as much as possible.

· Animation Optimization
A) Try to use CSS3 Animation
B) reasonably use the requestAnimationFrame animation instead of setTimeout
C. Use css animation for up to 5 elements of Canvas animation and Canvas animation for over 5 elements (webGL can be used for iOS8)

· High-frequency event Optimization
Touchmove and Scroll events can cause multiple Rendering
A) Use requestAnimationFrame to listen for frame changes so that the rendering can be performed at the right time.
B) increase the response interval and reduce the number of redraws

· GPU Acceleration
The following attributes in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, and Video) are used to trigger GPU rendering.
PS