HTML page optimization

First Step: Load optimization

2. Reduce HTTP requests.

   Because the phone browser responds to requests at the same time 4 requests (Android support 4, IOS 5 can support 6), so to minimize the number of page requests, the first load of simultaneous requests can not exceed 4. A) merge CSS, javascript;b) to merge small images, using sprite (CSS SPRITE);

4. Cache.

   Using caching can reduce the number of requests to the server and save load time, so all static resources are set up on the server side, and as far as possible use long cache (the time stamp is used for updates of long cache resources).

   A) cache all cacheable resources; b) use long cache (update cache with timestamp); c) Use an external reference to CSS, JavaScript;

6. compress HTML, CSS, JavaScript.

   Reducing the size of your resources can speed up the display of your Web pages, so code compression for HTML, CSS, JavaScript, and so on, and set up gzip on the server side. A) compression (for example, extra spaces, line breaks, and indents); b) enable gzip;

8. ensure no blocking .

   JavaScript written on the HTML header (no async), and the style written in the HTML tag block the rendering of the page, so the CSS is placed on the page header and introduced using link, to avoid writing style in HTML tags, JavaScript is placed at the end of the page or loaded asynchronously

10. Use the first screen to load .

    The fast display of the first screen can greatly improve the user's perception of the speed of the page, so it should be optimized for the quick display of the first screen as much as possible.

12. load on Demand .

    The resources that do not affect the first screen and the resources that are not used by the current screen resources are loaded when the user needs them, which can greatly increase the display speed of important resources and reduce the overall traffic (PS: Loading on demand can cause a lot of repainting, affecting rendering performance).

    a) lazyload;b) roll-screen loading; c) loading via media query;

14. pre-load .

    A large heavy resource page, such as a game, can be used to add loading, and the resource is loaded and the page is displayed. But the loading time is too long, will cause the user to churn. For user behavior analysis, you can load the next page of resources on the current page, increase the speed, a) can perceive loading (such as entering the space game loading); b) an imperceptible loading (such as loading the next page in advance);

16. compress the picture .

    Picture is the most traffic resource, so try to avoid using him, when using the most appropriate format (to achieve the premise of the requirements, size judgment), the appropriate size, and then use the smart image compression, and in the code with Srcset to display on demand (PS: Excessive compression of the image size affects the image display effect).

    A) Use of smart maps (sprite chart);

    b) Use a different alternative to the picture (1. Using CSS3 2. Using SVG 3. Using Iconfont);

    c) use of srcset;

    d) Select the appropriate picture (1. WEBP is better than JPG 2. PNG8 better than GIF);

    e) Select the appropriate size (1. The first load is no greater than 1014KB 2. Not wider than 640 (based on the general width of the phone screen));

    reduce cookies, avoid redirects, and load third-party resources asynchronously .

17. Cookies affect loading speed, so static resource domain names do not use cookies. Additionally, redirection affects the load speed, so the server is set up correctly to avoid redirection. Finally, the non-control of third-party resources affects the loading and display of pages, so third-party resources are loaded asynchronously.

    Step two: Script execution optimizations

    Improper script handling can block page loading and rendering, so be aware of it when you use it:

    · CSS is written in the head, JavaScript is written at the tail or asynchronously.

    · avoid empty src such as pictures and IFrame.

    Empty src reloads the current page, affecting speed and efficiency.

    · try to avoid resetting the image size .

    Resetting a picture size means resetting the size of a picture multiple times in a page, CSS, JavaScript, and so on, resetting the size of the picture multiple times can cause multiple redraw of the picture, affecting performance.

    · picture try to avoid using Dataurl.

    Dataurl image compression algorithm files that do not use images will become larger, and will be decoded and then rendered, loading slow and time-consuming.

    Step Three: CSS optimization

    Try to avoid writing the style attribute in the HTML tag.

    · Avoid CSS expression CSS expression execution need to jump out of the CSS tree rendering, so avoid the CSS expression

    · Remove empty CSS rules empty CSS rules increase the size of the CSS file and affect the execution of the CSS tree, so you need to remove the empty CSS rules

    · Proper use of the display properties of the display property will affect the rendering of the page, so use a properly (a) Display:inline should not use the width, height, margin, padding, and FLOATB) display: Inline-block should not be used after FLOATC) Display:block should not be used after vertical-alignd) display:table-* should not use the margin or float

    · Do not abuse float.

    Float is computationally large at render time and minimizes use

    · Web fonts are not abused.

    Web font needs to download, parse, redraw the current page, minimize use

    • Do not declare too many font-size.

    Excessive font-size triggers the efficiency of the CSS tree

    · A value of 0 does not require any units.

    For browser compatibility and performance, do not bring units with a value of 0

    • Standardize various browser prefixes .

    A) No prefix should be placed in the last

    b) CSS animation only use (-webkit-without prefix) two kinds of

    c) Other prefixes are-webkit--moz--ms-prefix four, (-o-opera browser instead of blink kernel, so obsolete)

    • Avoid making selectors look like regular expressions .

    Advanced selector execution takes a long time and is difficult to read and avoids using

    Fourth step: JavaScript execution optimizations

    • Reduce repainting and reflow .

    A) Avoid unnecessary DOM operations

    b) try to change class instead of style and use classlist instead of classname

    c) Avoid using document.write

    d) Reduction of DrawImage

    · Cache Dom selection and calculation.

    Each time the DOM selection is evaluated, it is cached

    · Cache list. length.

    Every. Length is calculated, and a variable is used to save the value

    · Use event proxies as much as possible to avoid bulk binding events

    · Use the ID selector as much as possible.

    The ID selector is the fastest

    · Touch Event Optimization .

    Use Touchstart, Touchend instead of click, because fast impact speed. However, it should be noted that touch response is too fast and easy to cause misoperation

    Fifth Step: Rendering optimization

    HTML uses viewport.

    Viewport can accelerate the rendering of the page, use the following code <meta name= "viewport" content= "Width=device-width, initial-scale=1″>

    · reduce the DOM node .

    DOM node too much affects the rendering of the page, should try to reduce the DOM node

    · Animation optimization .

    A) use CSS3 animation (b) as much as possible using requestanimationframe animations instead of SETTIMEOUTC) use CSS animations appropriately using canvas animations within 5 elements, 5 or more using canvas animations (iOS8 can use WebGL)

    · High-frequency event optimization .

    Touchmove, Scroll events can cause multiple render a) use Requestanimationframe to listen for frame changes to render at the correct time B) increase the time interval for response changes and reduce redraw times

    · GPU acceleration.

    The following properties in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, please use (PS: The use of the transition will cause the phone to increase the power consumption)

2. Reduce HTTP requests.

   Because the phone browser responds to requests at the same time 4 requests (Android support 4, IOS 5 can support 6), so to minimize the number of page requests, the first load of simultaneous requests can not exceed 4. A) merge CSS, javascript;b) to merge small images, using sprite (CSS SPRITE);

4. Cache.

   Using caching can reduce the number of requests to the server and save load time, so all static resources are set up on the server side, and as far as possible use long cache (the time stamp is used for updates of long cache resources).

   A) cache all cacheable resources; b) use long cache (update cache with timestamp); c) Use an external reference to CSS, JavaScript;

6. compress HTML, CSS, JavaScript.

   Reducing the size of your resources can speed up the display of your Web pages, so code compression for HTML, CSS, JavaScript, and so on, and set up gzip on the server side. A) compression (for example, extra spaces, line breaks, and indents); b) enable gzip;

8. ensure no blocking .

   JavaScript written on the HTML header (no async), and the style written in the HTML tag block the rendering of the page, so the CSS is placed on the page header and introduced using link, to avoid writing style in HTML tags, JavaScript is placed at the end of the page or loaded asynchronously

10. Use the first screen to load .

    The fast display of the first screen can greatly improve the user's perception of the speed of the page, so it should be optimized for the quick display of the first screen as much as possible.

12. load on Demand .

    The resources that do not affect the first screen and the resources that are not used by the current screen resources are loaded when the user needs them, which can greatly increase the display speed of important resources and reduce the overall traffic (PS: Loading on demand can cause a lot of repainting, affecting rendering performance).

    a) lazyload;b) roll-screen loading; c) loading via media query;

14. pre-load .

    A large heavy resource page, such as a game, can be used to add loading, and the resource is loaded and the page is displayed. But the loading time is too long, will cause the user to churn. For user behavior analysis, you can load the next page of resources on the current page, increase the speed, a) can perceive loading (such as entering the space game loading); b) an imperceptible loading (such as loading the next page in advance);

16.  

    compress Pictures .

    picture is the most traffic resource, so try to avoid using him, when using the most appropriate format (to achieve the premise of the requirements, the size of judgment), the appropriate size, and then use the smart image compression, Also in the code with Srcset to display on demand (PS: Excessive compression of the image size affects the image display effect).

    a) use a smart map (sprite);

    b) use other methods instead of pictures (1. Use Css3 2. Use Svg 3. Use Iconfont),

    c) use Srcset;

    d) Select the appropriate picture (1. WEBP is better than jpg 2. PNG8 is better than GIF);

    e) Select the appropriate size (1. The first load is no larger than 1014kb 2. Not wider than 640 (based on the general width of the phone screen);

18. reduce cookies, avoid redirects, and load third-party resources asynchronously .

    Cookies affect loading speed, so static resource domain names do not use cookies. Additionally, redirection affects the load speed, so the server is set up correctly to avoid redirection. Finally, the non-control of third-party resources affects the loading and display of pages, so third-party resources are loaded asynchronously.

HTML page optimization