Optimize front-end Web page performance

In general, there are several ways to optimize the performance of front-end Web pages:

Web content, servers, images, cookies, css/js file processing and so on.

1. Web content:

By reducing HTTP requests, reducing DNS queries, delaying loading of content that is not urgently needed, loading the content that will be needed in advance, not 404 pages, no iframe, and so on.

Reduce the number of HTTP requests: Bundle the files and merge the pictures.

Reduce DNS queries: DNS records can be purged locally, but this can only speed up local browsing and how to set them on the server.

2. Server:

Setting up the server makes the performance of the Web page not very skilled. There are mainly the following ways:

CDN, Expires/cache-control, Gzip, Etags, Get Ajax, avoid empty src

CDN: Distributed storage, load balancing, redirection of network requests, and content management (that is, the content of the site is published to the closest user to the "edge" of the network, so that users can get the content they need, solve the Internet congestion, improve the response speed of users to visit the site. ）

Expires/cache-control: Static content never expires, dynamic content loads dynamically.

Gzip: It's a good thing to improve efficiency, zip typically reduces the size of 70% of Web pages, including scripts, stylesheets, pictures, and more. You need to configure IIS.

Etags: is to mark the content of the Web page, and then let the server better judge This is God horse dongdong.

Get:get faster than post ...

Of course to avoid the empty src, empty also send a request, and then the browser will return a null value, do not waste to blame ...

3. Pictures:

Optimize the picture (just make it small, smaller, or use media queries on your mobile device to make it smaller ...) ）。

CSS Sprite: A magical collage of pictures, then the idea of cutting pictures.

How to cut? (people are using position positioning, yes, it is so simple and rude.) ）

Why use it? For the small icon is quite suitable, but the company does not seem to use it often, but the egg ...

Do not scale the image in the HTML, if you use a small image, the figure is small ... (Is this artist responsible?) ）

4. Cookies

Since cookies are in the HTTP header, it is forbidden if you do not use cookies, so try to minimize them.

5, Css/js

Put the CSS file in the head, because doing so allows the browser to gradually load the content of the Web page that has been downloaded, and then slowly see what it loaded, without facing a white screen.

Try not to use CSS expressions (this is really not often used, something like the If Else statement (new Date ()). GetHours ()%2? "#B8D4FF": "#F08A00") ugly statement.

JS written in the body, this we know, because it will block loading.

Remove the duplicate script, in the online environment, remove the space comment can also.

Well, so many, finally summed up, in addition to the server settings, the other has been basically clear how the matter, after more contact, more learning, more tinkering.

Optimize front-end Web page performance