Website front-end performance optimization (NET pick)

1. Reduce the number of HTTP requests
Merge files by placing all the scripts in a script file or putting all the stylesheets in a stylesheet file, reducing the number of HTTP requests.
CSS Sprites is the preferred option for reducing picture requests. Merge all background images into one diagram, using CSS's Background-image and Background-position properties to control the display of the appropriate image area.
Inline images use Data:url scheme to embed image data into a page, but this increases the size of the HTML document.
2. Using the Content Distributed network
Content Distributed Network (CDN) is a set of servers distributed in different regions, which can send information to users more effectively. It selects the server that sends data to a user based on a method that measures the distance of the domain. For example, a server that reaches the user's minimum hop or the fastest corresponding speed will be selected.
3. Add a failure period or cache-control to the head
For static components: set the cache period of the head to a distant future so that it can "never expire".
For dynamic components: Use the appropriate Cache-control header to help the browser perform a specific request.
4.Gzip Compression Components
Accept-encoding the specified compression format in the header of the HTTP request:
Νaccept-encoding:gzip, deflate
Νcontent-encoding:gzip
5. Put the style sheet in front
Moving the stylesheet to the head of the document can make the page load faster. Because putting the style sheet on the head allows the page to be rendered progressively.
6. Put the script at the end
The script may block concurrent downloads. The http/1.1 specification recommends that the browser perform only two concurrent downloads under each domain name.
Set the lazy load script, or you can put it at the bottom of the page
7. Do not use CSS expressions
CSS expressions are a powerful (and also dangerous) way to dynamically set CSS properties.

The problem with CSS expressions is that it is more frequently performed than most people expect. Expressions are performed not only when the page is displayed and resized, but when the page scrolls and even when the user moves the mouse over the page. Adding a counter to a CSS expression keeps track of when and how the CSS executes. Moving the mouse over the page can easily produce more than 10,000 executions.
8. Using external JavaScript and CSS
Using external files in real-world applications often results in faster pages, as browsers cache JavaScript and CSS files. If JavaScript and CSS placed in an external file are cached by the browser, neither the number of HTTP requests nor the volume of the HTML document will be increased.
9. Reduce DNS Queries
DNS finding IP addresses for a given domain name typically takes 20-120 milliseconds. The browser does not download anything from the destination domain until the DNS lookup is complete.  

10. Reduce JavaScript and CSS

Shrinking refers to removing unnecessary letters from your code and reducing the volume of files to increase loading speed.

You need to remove all comments and unnecessary whitespace (spaces, new lines, and tabs) when you reduce your code.

Reduce the size of the JS or CSS file to improve response performance.

Code obfuscation is another optimization scheme that can be used for source code.

Compress the <script> and <style> code embedded in the page.

11. Avoid redirects

REDIRECT Status code: 301 or 302

301 examples of the HTTP headers of the response:

http/1.1 301 Moved permanentlylocation:http://example.com/newuricontent-type:text/html

The browser automatically turns the user to the URL address indicated in the location domain. The HTTP header contains all the information required for redirection. The body of the response is generally empty. The 301 or 302 response is not actually cached unless an additional header is added, such as expires or Cache-control, which should be cached. Meta Refresh tags and javascript can also redirect users to different URLs, but if you have to perform a redirect, the best way is to use the standard 3XX HTTP status code so that the back button works fine.

Redirection affects the user experience, and redirects that are inserted between users and HTML documents delay page rendering and component downloads because they are unlikely to start before the HTML document is obtained.

One of the most wasteful redirects occurs frequently and network developers often do not realize that when there should be a left slash (/) in the address, there is no time. For example, accessing http://astrology.yahoo.com/astrology causes a 301 effect and redirects to http://astrology.yahoo.com/astrology/(note that a left slash is added here). In Apache, this can be patched using mod_rewrite, or using the Directoryslash directive in Apache event handling.

12. Remove Duplicate Scripts

Having two identical script files on the same page degrades performance.

13. Setting Etags

The entity label (ETAGS) is a mechanism that the server and browser use to determine whether the cached components in the browser and the server are corresponding. ("Entity" is another term for a component: Pictures, scripts, stylesheets, and so on) adding etags to distinguish components provides a more flexible mechanism than simply using the "Last Modified Time". An etag is a string that uniquely identifies a specific version of a component. Its unique format specification is that the string must be quoted. The source server uses the ETag response header to set the ETag of a component:

http/1.1 Oklast-modified:tue, Dec 2006 03:03:59 gmtetag: "10c24bc-4ab-457e1c1f" content-length:12195

The problem with ETag is that they are often set to be unique on a server in the Web site.

14. Allow Ajax to cache

One of the benefits of Ajax is that it gives the user an instantaneous response because it requests data asynchronously from the server. But Ajax does not guarantee that users will do nothing while waiting for those asynchronous JavaScript and XML responses to return.

To improve performance, it is important to optimize the AJAX response. The most important way to improve Ajax performance is to make the response cache, which can add an expiration period and a cache control header. The following principles apply equally to Ajax.
* Gzip Components
* Reduce DNS queries
* Compression JavaScript
* Avoid redirects
* Set ETag

15. Earlier flush buffers

When a user requests a page, the server takes 200 to 500 milliseconds to combine the HTML page. During this time, the browser will silently wait for the data to arrive. There is a flush () function in PHP that allows you to send a partially-ready HTML response to the browser so that the browser can retrieve the component while the server is working on the remaining HTML page. The benefits are mainly seen in the busy backstage and the relaxed front desk.
Behind the head is a good place to place the refresh operation, because the HTML code of the header is easier to produce and allows you to place any CSS and JavaScript files so that the browser can start getting the components in parallel while the background work is still in progress.
Example:
... <!–css, Js–>
<?php flush ();?>
<body>
... <!–content–>
Yahoo! Search first researched and conducted a live test to prove the benefits of using this technology.

16. Using the Get method in an AJAX request

Yahoo! Mail team found that when the XMLHttpRequest, the Post method in the browser in two steps: First send the head, and then send the data. So it's best to use a GET method that only sends a TCP packet (unless you have a lot of cookies). The maximum length of URLs in IE is 2000, so you cannot use the Get method if you send more than 2000 of the data.
An interesting phenomenon is that the post method does not actually send data like get (and get is a veritable). Based on the HTTP specification, the Get method means retrieving data, so it is more meaningful to use the Get method when you are simply requesting data (semantically), instead of using post when sending data that needs to be stored on the server side.

17. Post-load components

You can take a closer look at your page and ask yourself: "What is required when the page is initialized?" "Then the rest of the content and components can be placed in the back.
JavaScript is ideal for splitting the OnLoad event before and after the selection. For example, you have JavaScript code and menus that perform drag-and-drop, drop-down, and animations, which can be loaded later because the user drags elements on the page after the initial rendering. Other places that can be loaded later include hidden content (what the user does when they do something) and collapsed pictures .

Website front-end performance optimization (NET pick)