Website front-end optimization

Website front-end optimization

First: Reduce HTTP Request

1: Associate a hyperlink to a picture, such as in a navigation bar button. If you are associating multiple pictures with hyperlinks in this form, using a picture map can reduce HTTP requests without changing the look and feel of the page. Picture maps allow multiple URLs to be associated on a single image.

2:css Sprites

Like image maps, CSS Sprites can also combine images, but more flexibly, you can combine multiple images into a single picture.

3 : Merging scripts and style sheets

When we use JavaScript and CSS, is it "inline"( that is, nesting it in an HTML document ) or putting it in an external script and style sheet file. In general, using external scripts and style sheets is more beneficial to performance (as you'll say later). However, splitting the code into too many small files can degrade performance because each file causes an additional HTTP request. For clarity, it is not recommended to merge scripts and style sheets together. But multiple

Scripts should be merged into a single script, and multiple style sheets should also be merged into a single style sheet. How many script files and CSS files should be on the page should take a certain amount of time to parse the page.

Second: Use the Content Publishing network

The web site usually places all its servers in the same place at first. When the user base increases, the company must face the fact that the server place is no longer in use, and it is necessary to deploy the content on multiple geographically different servers.

CDN's popular understanding is the website acceleration, the CPU balanced load, can solve the cross-carrier, the cross-region, the server load ability is too low, the bandwidth too little to bring the website to open the slow and so on the question.

Like what:

1. An enterprise's Web server in Beijing, the operator is telecommunications, in Guangdong Unicom users visit the corporate website, because of cross-regional, cross-operator reasons, the site will open faster than the local telecommunications customers in Beijing, the speed of access to a lot slower, it is easy to cause this enterprise's customer churn

2. A Web site server performance is poor, carrying capacity is limited, sometimes face bursts of traffic, overwhelmed, directly lead to server crashes, Web site can not open, especially the e-commerce site during the festival, because this situation site can not open, sales lost in the proportion of the loss to 60%

3. For example, some small and medium-sized enterprises rented virtual host, because with a number of sites share a server, each site has limited bandwidth, bandwidth is too small often lead to a little more traffic, the site opened slowly, or even open.

More well-known domestic CDN service providers have Blue flood, web-boarding technology, Century interconnection, Dili Lian Technology

Third: Add Expires Head

Today's Web pages contain a large number of components, and their numbers are growing, and the first visitors to the page make many HTTP requests, but through a long expires header, these components can be cached. This time, avoid unnecessary HTTP requests in subsequent page views. The long-expires head is most commonly used in images, but should be used on all components, including scripts, stylesheets, and so on. The Cache-control head was introduced in HTTP1.1 to overcome the limitations of the expires head. Because the expires header uses a specific time, it requires the server and client clocks to be strictly synchronized.

Using Cache-control with Max-age can eliminate expires limitations (I recommend using Cache-control as much as possible). If both appear, HTTP specifies that the MAX-AGE directive overrides the expires header.

You can set cache-control:max-age for static content in IIS Manager.

You can also apply this setting in the Web. config file. As shown below:

<configuration>

..............

<system.webServer>

..........................

<staticContent>

<clientcache cachecontrolmode= "usemaxage" cachecontrolmaxage= ' 365.00:00:00 ' >

</staticContent>

</system.webServer>

</configuration>

The previous <staticContent> section name implies that this approach is only for static content. For dynamic content, you need to set the client cache expiration time, which can be set in the ASPX file.

<%@ Page ......%>

<%@ OutputCache duration= "86400" location= "Client" varybyparam= "None"%>

This instruction tells the runtime to generate an HTTP header that allows the browser to cache the content for 1 days (86,400 seconds).

Fourth: Reduce ViewState the size.

Some controls, such as the GridView, can easily produce a number of K-bytes of viewstate. Because the browser sends viewstate back to the server as part of the HTTP post, it can adversely affect the load time of the page if it is large. So you should close viewstate, the code is as follows

<%@ page title= "" Language= "C #" enableviewstate= "false" autoeventwireup= "true" codebehind= "View.aspx.cs" inherits= "View"%>

V: Compression components

Reduce the response time by reducing the size of the HTTP response. If the response packet produced by the HTTP request is small, the transfer time is reduced because only small packets need to be passed from the server to the client. This effect is especially noticeable for slower bandwidth. The most important way is to compress the HTTP response packet by GZIP encoding, and thus reduce the network response time. This is the simplest technique to reduce the page size, but the impact is the largest. There are many ways to reduce the page size of an HTML document (such as deleting comments and extra spaces, removing unused CSS, removing unused JavaScript, checking for and removing redundant tags, removing labels with no content, removing <meta refresh> Tags: automatic page refresh at first glance, sometimes it's moving, but given the situation, when a user leaves the computer or is looking at another tab in the browser, this only wastes the resources of the client and the server.

The Web client can indicate support for compression through the accept-encoding header in the HTTP request.

Accept-encoding:gzip,deflate

If the Web server sees this header in the request, it compresses the response using one of the methods that the client has listed. The Web server notifies the Web client through the content-encoding header in the response

Content-encoding:gzip

Gzip is currently the most popular and effective compression method, you can see another compression mode for deflate, but the effect is not as good as gzip, and is not very popular, support deflate browser also support gzip, but many browsers support gzip but do not support deflate, Gzip is therefore the ideal compression method. Many websites compress their HTML documents, compressed scripts and CSS stylesheets are also important, pictures should not be compressed, because they can be compressed at the time of uploading, trying to compress them

will only waste CPU resources. Of course, compression is also a cost, the server will spend extra CPU cycles to complete the compression, the client needs to decompress the compressed file. To detect whether the revenue is greater than the cost, you need to consider the size of the response, the bandwidth of the link, and the distance between the client and the server, which is difficult to obtain and typically compresses files larger than 1KB or 2KB based on experience.

You can configure file compression in IIS by referring to Microsoft's MSDN

Http://msdn.microsoft.com/zh-cn/ff695514.aspx

Compression is divided into static compression and dynamic compression, and I recommend that you enable static compression here instead of enabling dynamic compression. For an active website, enabling compression usually increases the CPU usage by about 3%~5%. For most Web sites, this tradeoff is usually worthwhile.

There is a need to consider the proxy cache situation, interested students can check the information.

Sixth: Place the style sheet at the top (using the link label puts the style sheet in the head label)

We want browsers to be able to display content as quickly as possible, which is important for pages with a lot of content and for users with slow internet links. Placing a style sheet at the bottom of the document causes the content to be progressively rendered in the browser. This rule has little effect on the time it takes to load the page. When browsers and users wait for the style sheet at the bottom, the browser will delay displaying any visual content that we call "white screen"

You can test it yourself.

To avoid white screen, place the style sheet in the head at the top of the document. Importing external styles in head can use link, and @import, I prefer to use link, because performance is better, and @import can sometimes lead to white screen, even in the head tag of the document.

Seventh: Put the script at the bottom

When you use a style sheet, page-by-step rendering is blocked until all the stylesheet downloads are complete. That's why it's best to move the stylesheet to the head of the document so that you can download them first without blocking page rendering. With scripting, progressive rendering is blocked for all content that is below the script. Placing the script in the lower part of the page means that more content can be rendered progressively.

The advantages of parallel download components are obvious. However, parallel downloads are actually disabled when downloading script files, one of the reasons is that the script may use document.write to modify the content of the page, so the browser waits to make sure that it is properly laid out.

Another reason is to ensure that scripts are executed in the correct order. So the script blocks the rendering of the content behind it. If you place the script at the top of the page and all the content on the page is behind the script, the entire page renders and downloads are blocked until the script has finished loading. Because the entire page rendering is blocked, there will also be a white screen phenomenon.

Eighth: Use the external CSS and the Javascript

The reason for using external CSS and JavaScript is that these files have the opportunity to be cached by the browser.

If you use the same CSS and JavaScript for every page in your site, using an external file can improve the reuse rate of these components. Using external files is more advantageous in these cases, because JavaScript and CSS components are already in the browser's cache when users navigate between pages. In the opposite case, if no two pages share the same JavaScript and CSS, the reuse rate will be reduced. Of course, there is no good way to solve this problem, I think you can use a compromise approach, is to divide your site's pages into several page types, and then create a separate script and style sheet for each type, In this case, only a few redundant CSS and JavaScript files need to be downloaded for any given interface. Of course, your CSS and JavaScript have a high degree of reusability, so deployment is more advantageous in external files, but if reuse is very low, it is more meaningful to inline.

nineth: Reduce DNS the lookup

The Internet is the IP address to find the server, because the IP address is difficult to remember, usually use the URL containing the host name instead (domain name), but when the browser makes a request, the IP address is still necessary, this requires DNS to map the host name to the IP address, you type on the browser: www.baidu.com, the DNS resolver connected to the browser returns the IP address of the server. DNS is also expensive, usually the browser to find a given hostname IP address takes 20~120 milliseconds, before the DNS lookup is complete, the browser is not downloaded from the host name to anything. The response time depends on the DNS resolver, the pressure it bears on the request, the distance between you and it, and your bandwidth. Of course, DNS can also be cached, but the number of cached DNS records is also limited by the browser, regardless of the time the cache is recorded. If a user accesses many sites with different domain names in a short period of time, older DNS records will be discarded and the domain name must be re-located.

To reduce DNS lookups, my advice is to put CSS, pictures, scripts, and so on at least 2, but not more than 4 host domains. This is a good tradeoff between reducing DNS lookups and allowing highly parallel downloads.

Tenth: Streamlining JavaScript

Refiners remove unnecessary characters from the code to reduce their size, improving load times, and when the code is streamlined, all comments and unnecessary whitespace characters (spaces, line breaks, and so on) are removed. For JavaScript, this improves response time efficiency because the size of the file that needs to be downloaded is reduced. When it comes to streamlining, simply mention the confusion.

Obfuscation is another optimization method that can be applied to the source code, and as with streamlining, it also removes the comment whitespace, and it also overwrites the code. As part of the rewrite, the names of functions and variables will be changed shorter, but also more difficult to read. This is often done primarily to increase the difficulty of reverse engineering the code. Of course, it also helps to improve performance because it reduces the size of the code more than it does with refiners. The downside is that it's more complicated and difficult to read and debug.

Tools that streamline JavaScript code can use Jsmin.

As we said earlier, you can use gzip for JavaScript external files to complete the compression, the current gzip compression is less than the reduction of the size of the file, so if compression is enabled, is it still being streamlined?

is necessary because gzip although compression has a greater impact, but streamlining can further reduce the size of the file.

Simplifying CSS can save less than thin JavaScript, because whitespace and annotations in CSS are generally less common than JavaScript, so the CSS is basically merging the same classes, removing unused classes, and so on.

11: Remove Duplicate scripts

There are two main ways to duplicate script damage performance, unnecessary HTTP requests, and time wasted executing JavaScript. This error may seem simple but often occurs, such as referencing a script file in a master page and referencing it again in a specific content page. It is possible to think that the script file is now cached and no new requests are made, but if you click the Refresh button on the browser, there will still be two HTTP requests (in the case of IE). Also, multiple evaluation of a script can be a waste of time.

12: Attention to picture optimization

1: Reduce the number of pictures on the page

Images are usually more bandwidth-intensive than HTML, so the first step in picture optimization should be to consider whether you need all the pictures on the page.

2: You can use CSS to replace the effect of flipping a picture.

3: Optimize background image

To optimize the background image, be sure to use the browser can be tiled to repeat the function of a single picture. For example, the picture is tiled with a 1-pixel-wide gradient picture.

4: Choose the correct picture format

5: Compress to reduce the size of the picture.

6: Use picture slices

7: If your site has a large number of picture read and write operations, I recommend that you use the picture server

Website front-end optimization