The user experience of the front end of the website determines whether users want to continue to use the website and other functions of the website. The better user experience of the website can retain more users. In addition, the front-end optimization is good, but also can save costs for enterprises. So how do we optimize the performance of our front-end pages?

Front-end performance optimization can be divided into three aspects: interface access optimization, static resource optimization and page rendering speed optimization.

1. Interface access optimization

1.1. Reduce HTTP requests and set HTTP cache reasonably

HTTP is a stateless application layer protocol. Every TIME an HTTP request is sent, a connection needs to be established, communicated, and disconnected. On the server, each HTTP request needs to be processed by an independent thread. So minimize HTTP requests and maximize access performance.

Methods to reduce HTTP requests:

  1. Combine js, CSS, images, etc. into a single file, and the browser only needs to request it once. Image merge should be appropriate, can’t think of optimization, blindly merge into a picture.
  2. Borrow the browser cache. Proper caching Settings can greatly reduce HTTP requests. If you are not familiar with browser caching, please refer to the browser 9 Ways to cache.
  3. Interface merging. Front-end interaction often requires multiple parallel or serial interfaces. In this case, interface merging can be used to improve interface access speed.
  4. Can use CSS as far as possible do not use JS, can use JS as far as possible do not use tripartite plug-ins, avoid a large number of libraries of tripartite plug-ins.

1.2. Reduce cookie transmission

Cookie exists in the HTTP header and is exchanged between the client and the server. The size of cookie is controlled as much as possible. The smaller the cookie is, the faster the response is, and the cookie transmission is reduced and the response is faster.

1.3 use CDN to provide static files

Use CDN to get your static files worldwide faster and speed up web page loading.

1.4. Enable GZIP compression

GZIP encoding over HTTP is a way to improve Web applications. With GZIP enabled, the server compresses the content of a web page for transmission, typically down to 40 percent of its original size, making web pages faster. GZIP has two major benefits: it reduces storage space and reduces transfer time when transferring files over the network.

1.5. Storage resources by domain

HTTP clients generally have a limit on the number of concurrent connections to the same server. Usually, the maximum number of concurrent connections is four, and the remaining connections are queued until the preceding ones are finished. Therefore, multi-domain hosts are used to store resources, increase the amount of parallel connections and shorten the loading time of resources.

1.6. Reduce page redirection

HTTPS can effectively defend against attacks, ensure that users always access the encrypted connection of the website, protect data security, and save the time of 301/302 redirect, greatly improving website security and user experience.

If a website is set up to force HTTPS to redirect to 301 or 302 when a user accesses a domain name, HTTP is used in this process, so it is easy to be hijacked and attacked by a third party. So use HTTPS for security wherever possible.

1.7. Avoid iframe

Iframe is equivalent to the same page nested a page, consumption of performance, but also to load the resources of the nested page, so more consumption of time.

1.8. Borrow the browser cache

Ajax request data can be cached in the browser, and the next time you use it, you don’t need to fetch it again. This will be done on a project-specific basis. For example, common role types will be cached. Common data obtained will not be cached in order to ensure real-time performance.

Second, static resource optimization

2.1. Compress HTML, CSS, JS and other files

Remove unnecessary Spaces, comments and lines, reduce file size, significantly reduce user download time and speed up page loading. You can use the compression tool directly and automatically remove all unnecessary content.

2.2. Reference CSS before JS

This is a minor detail, js execution will block, if you put in js after loading, it will wait for js execution to complete before loading CSS, rendering the page, and then the layout will be distorted. So CSS files need to be introduced without blocking in case DOM takes longer to render.

2.3. Non-blocking JS

Js prevents the HTML document from parsing properly, and when the parser reaches the script tag, it stops parsing and executes the script. So we often put javascript, which is introduced by Script, at the bottom of the HTML. If you want the script to be at the top of the page, non-blocking properties are recommended. Often defer and Async are used to load JS files asynchronously.

<! -- use defer --> <script defer SRC ="foo.js" ></script> <! <script async SRC ="foo.js"></script>Copy the code

2.4. Image compression

The most common is CSS Sprite, which is to put many, many small ICONS on a picture, called Sprite. Sprite’s biggest advantage is the ability to reduce HTTP requests, as well as the ability to compress image file sizes. Move the image position by setting background-Position. In addition, the site used large picture, also need to ensure the picture quality under the premise of optimization to the minimum.

2.5. Vector map replaces bitmap

Vector images (SVG) tend to be much smaller than images, they can be scaled without distortion, and these images can also be animated and modified using CSS, making them easier to control than bitmaps. Use as many vectors as possible.

2.6 optimization related to JS code

  1. Use closures as little as possible, because the context in which they exist is not released.
  2. Js avoids nested loops and dead loops, which can cause the browser to freeze.
  3. In JS packaging process, try to achieve low coupling and high cohesion. Reduce redundant code on pages.
  4. Minimize recursion and avoid dead recursion.
  5. Try to use Windows. RequestAnimationFrame replace traditional timer.

Third, page rendering speed

3.1 lazy loading

Material class website, page a screen to show a lot of pictures, and pictures can not distortion, picture loading too much, page loading is very slow, so it is lazy to cite loading, loading only the visual area of the picture, avoid loading can not need or unnecessary images. Improve page response time.

3.2. Avoid reactive layouts

Although responsive web sites can be compatible with all terminal devices, but there will be hidden part of useless content, waste bandwidth, loading time is also long, the page rendering time is also long. To learn more about responsive layouts, check out Why Front-end Responsive Layouts are a Pit? .

3.3. Set the size to avoid redrawing

When the IMG tag is encountered, it will immediately send an HTTP request to download the image and continue rendering the page downwards. When the image is successfully loaded, it is found that the width, height and size of the image have changed, affecting the typesetting behind, so the page will draw this part again. So set the image size as much as possible.

3.4. Reduce DOM elements

Parsing HTML content, converting tags to DOM nodes, and then parsing other files, the fewer DOM elements, the fewer tags, the faster the file is converted and the faster it loads.

3.5. Reduce Flash use

Flash files are large and time-consuming to load. In addition, flash plug-ins also need to run to run, the most important thing is that some browser Flash plug-ins will soon be offline, it is recommended not to use Flash.

3.6 file order

CSS files are placed at the top, rendering first. Js is placed at the bottom to avoid blocking.

How to make the web page load faster, there are a lot of details, or to improve their skills ~~~~~~~~~

Click on it! Share more content.