Eight optimization suggestions for Web front-end performance

General website optimization is to optimize the background, such as interface response time, SQL optimization, background code performance optimization, server optimization, etc. High concurrency is also important for front-end Web optimization.

Here are some common optimization measures.

1, HTML CSS JS location

You want to put your CSS at the top of the page, in the HEAD section, and your JS code at the bottom of the page. Because the page needs to be loaded as CSS for rendering, and JS should be placed at the bottom of the page if it is not executed before the page is loaded, so as not to affect the page rendering speed due to excessive LOADING of JS before the page is displayed.

2. Reference file location

Some plug-ins need to reference remote images, CSS, JS, ICONS, etc., if the remote resource connection speed is not good, such as some foreign resources, will cause web blocking, also will cause page display problems, try to reference remote resources can be localized.

Reduce background requests

Each request is resource-intensive and affects system performance, so if you can reduce the number of requests in the background, reduce them. For example, try to combine the same resource (image, JS, CSS, etc.) into a file, as long as the page request once, so as to save a lot of HTTP connection overhead and round-trip time loss.

On the other hand, if it is about the lottery, shake, second kill and other functions, you can limit the frequency sent to the background, such as the front end operation 10 times before the back end of a request, so from the front end to do the flow control of the background, the flow control to access the outermost layer is the best, try not to let the request fall to the bottom.

4, compression transmission

HTTP compression can compress plain text up to 40% of the original content, thus saving up to 60% of the data transfer. GZIP is a common compression encoding. Therefore, enable GZIP compression for text-type resources such as CSS, JS, and HTML to speed up HTTP transmission.

5. Reduce cookie transmission

Cookies are included in each request and response. If there are too many cookies, the HTTP response speed will be affected. Therefore, in the case of high concurrency, try to control the amount of cookie transmission, and Nginx limits cookie transmission by default. In addition, static resources such as CSS, JS and images can be enabled with a separate domain name, and cookies can be disabled for the transmission of static resources, which greatly improves efficiency.

6. Browser cache

In high concurrency cases, something that doesn’t change much can be cached in the browser cache, or some active content can be cached on the client side ahead of time before activity starts flooding the server with requests.

7, the CDN

The previous article mentioned the concept of CDN, which is a static content distribution network. In essence, it is the cache of static resources. Static resources can be put on CDN, so that users can obtain resources in the nearest place to themselves, which greatly improves the access speed of users.

Reverse proxy

Commonly used reverse proxy nginx besides the function of load balancing, it can also be configured cache function to speed up the request and response speed, when it is the first time you access static resource can be cached on the reverse proxy server, so the request of the other users can directly obtained directly from the reverse proxy server returns, it until the static resource cache.

I’ve outlined these, but there are many other ways to optimize, so if you have better suggestions, feel free to leave a comment below.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Eight optimization suggestions for Web front-end performance

Recommended reading

Eight optimization suggestions for Web front-end performance

Recommended reading

Related Posts

Python Programming Tutorial 12: Arguments to functions

Question 122 – The best time to buy and sell stocks II

Grayscale publishing design for services