High Performance website Building guide

Rules to reduce HTTP requests

Only 10% to 20% of the end-user response time is spent on receiving the requested HTML document. The remaining 80% to 90% of the time is spent on HTTP requests for all components referenced by the HTML document (pictures, scripts, flash, style sheets, etc.). Therefore, the simplest way to improve the response is to reduce the number of components, thereby reducing the number of HTTP requests.

Image map

Use the map label for coordinate positioning to reduce the number of images. You can use multiple pictures in the navigation bar when you use them.

A lot of Disadvantages: manual method is difficult to coordinate positioning, and error-prone. Other shapes are difficult to define in addition to rectangles, and images defined by DHTML do not work in IE. It is not recommended.

CSS Sprites (Sprite chart/Sprite chart)

By merging multiple images into one image and then using background-position to locate them, it is 50% faster than using a detached picture. Images in the image map must be contiguous, and CSS sprites does not have this limitation. Some people think that the merged picture is bigger than the separated picture, and the merged picture contains the additional blank space. The actual is smaller, sprite chart reduces the cost of the picture itself. (color table, format information, etc.)

If the page background, buttons, navigation bar, links need to use a lot of pictures, can be used. Advantages-Clean labels, very few pictures and very short response times.

Disadvantages: Late revision trouble, difficult to maintain, lead a whole body, not before changing a picture on the easy

Sprite Chart Making method:

1. Baidu Search CSS Sprites can find the corresponding production software software

2. Automation tools such as Gulp, automatic synthesis

3. PS own production

Inline picture

Use the Data:url mode to include pictures in a Web page, but without any additional HTTP requests. We are all familiar with the http: schema URL. Other similar patterns include Ftp:,file: and Maito:

Data:url mode

Proposed in 1995: Allow small chunks of data to be inline as an immediate number, and the data is in the URL itself.

What is inline picture

The inline picture is a new type of image format (in my opinion this is not understood to be true), officially known as: Data URI scheme. Usually the pictures we store need to be written on the page:

And the inline picture will be

Inline picture syntax

1. Data-The contract name of the acquisition

2. Image/png-Data type name

3. Base64-Encoding method of data

4. IUANR.-encoded data

5. : , ; -delimited symbol specified by the data URI scheme

This image format does not require additional HTTP requests, but there is an important point that the browser does not cache this image. The data URL saves the HTTP request, but if the image is displayed in multiple places on the page, it will increase the content of the page and prolong the download time. There is a little IE8 the following do not support the image, so the IE6 users are more sad. And more than 100KB images using Base64 encoding will also increase the image size. Causes the overall download volume of the page to increase. (BASE64 encoded images cause Web site browsing to crash http://blog.xmaoseo.com/125.html) but a lot of smart people do it by using the background tile as an inline image, which works well. Also reduces the HTTP request to speed up the website. Then you may ask how to get the base64 encoding of the image. There are many free base encoding and decoding tools on the Web, but the simplest way is to write a PHP file. Encode using Base64_encode (): For example:

Echo Base64_encode (file_get_contents (' 211-11.jpg '));

How to troubleshoot Web page download latency issues. The simplest way to do this is to call the class name in a CSS context. For example, let's use the example above:

. Blogxmao{background:url (Data:image/png;base64, Ivagrw0kgdcfgnsuheugacbbqavgadcaiatyj7ljmrggaagelevqqiw2p4dwcmdaxafbvmaheqmygcacehg8elxtbpaccctelftevbqmga ")}

<div>, .... Content ... </div><div> Content ...</div>

Merging scripts and style sheets

Depending on the modularity principle, we should put the code in multiple small files, but this will degrade performance because each file will result in an additional HTTP request. Ideally, a page should not use an extra script and style sheet. The world's top ten web site scripts and style sheets typically do not exceed 2.

Use modular tools such as Seajs,requirejs for optimization. Otherwise, manual merging will be cumbersome as the file grows.

Rule 2--Using Content distribution network CDN

Content distribution Networks (Conten delivery Network) are a set of Web servers that are distributed across multiple geographically diverse locations. You can use a CDN service provider.

CDN Benefits:

Reduce time, backup extended storage capacity and cache, ease web traffic spikes (get weather, entertainment sports news, etc.)

CDN Disadvantages:

Your response time can be affected by traffic from other sites-even competitors. There is no control over the special hassles of component servers. For example, modifying the HHTP header must be done by the service provider.

If CDN service performance drops, your work will be affected. Of course you can use two CDN service providers.

CDN is used to publish static images (transfer all static components to CDN), images, script stylesheets, Flash, static files are easier to store and have fewer dependencies.

Rule 3--Add Expires header

Web pages contain a large number of components, first time access is not the only thing to consider, the page's initial visitors will make a lot of HTTP requests, but can use a long expires header, so that these components are cached.

Expires head

Long-term expires are often used for pictures, but can be used for all components, and many top-level sites do not do this because adding long ecpires headers can lead to additional development costs.

expires:mon,15 APR 2025 00:00:00 GMT

It tells the browser that the validity of the response lasts until 2025.

Max-age and Mod_expires

Because expires uses a specific time, the client and server side clocks are required to be strictly synchronized, the expiration date needs to be checked, and the new date is configured, so use trouble. HTTP1.1 introduced the Cache-control head to overcome its limitations. Cache-control uses the max-age directive to specify how long the component is cached. An update window is defined in seconds.

For browsers that do not support HTTP1.1, you can specify two response headers--expires and max-age at the same time. If both appear, the latter will override the former. If you're doing your duty, you'll still be worried about the expires expiration and clock sync issues.

Fortunately, Mod_expires allows you to set the date in a relative manner through the Expirsdefault directive.

Expirsdefault ' Access plus ten years '

The time can be set to the day of the month and seconds. It sends both the Expires header and the Max-age header to the response. The actual expiration date is changed based on when the request was received, but Max-age has priority. Clock synchronization issues and fixed date updates don't worry.

The best way to improve caching across browsers is to use the expires set by Expirsdefault.

Null cache vs Full Cache

The first time a user accesses your site it will not have any effect on the number of HTTP requests. The browser's cache is empty at this time. Performance improvements depend on whether there is a full cache.

In those sites that are updated once a day, the percentage of page views with full cache is small.

Travel website, email site each user session may produce multiple page views, the percentage is high.

Full cache is useful as long as users visit at least once a month, or multiple page views per session, and it is necessary to use long-term expires.

More than just pictures

Scripts, stylesheets, and Flash can all be cached, but HTML documents should not be used because they contain dynamic content and are updated every time.

Large sites, pictures, stylesheets, scripts are mostly cached for more than 30 days. But often need to change the news pictures and so on, should not be used. We can look at the values in last-modifed to see the change in time and frequency.

Revision file name

The disadvantage of using long expires is that the browser does not check for any updates until the expiration date expires. Even if the component is updated on the server, the browser cannot get the latest components because of the cache.

To ensure that users have updated components, you need to modify the file name of the component in all HTML pages.

The most effective solution is to modify all of its links so. The new request will download the latest content from the original server.

Generating HTML pages using dynamic languages such as PHP would be simple, using variables for the file names of all components, and using this method, updating the file names in a page simply needs to modify the variables somewhere. Yahoo often takes this step as part of the build process-the version number is embedded in the component's file name (for example, Yahoo_2.0.6.js), and the modified file name is automatically updated in the global map. The embedded version number can not only change the file name, but also make it easier to find accurate source code files in debugging.

Rule 4--Compression component

The rule 1--3 is to limit the amount of unnecessary HTTP requests to reduce the response time, and now we reduce the response time by reducing the response size.

How compression works

File compression used to reduce file volume has been used in email apps and FTP sites for ten years, and the same technology can be used to publish compressed Web pages to a browser.

Starting with HTTP1.1, Web clients can express support for file compression through the accept-encoding header in the request.

———— >

Accept-encoding:gzip

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

< ————

Content-ecoding:gzip

Gzip is currently the most effective, most popular compression method, free mode, and is standardized for RFC 1952. (90% use)

Compress what

Many websites compress HTML documents, and compression scripts and style sheets are also worthwhile, and include any text responses, including XML and JSON. Pictures and PDFs should not be decompressed because they are already compressed. Re-compression only wastes CPU resources and may increase file size.

Cost of compression: The server will spend additional CPU cycles to complete the compression, and the client will decompress the compressed file. To detect whether the benefit is greater than the cost, you need to consider the size of the response, the bandwidth of the connection, and the Internet distance from the client server.

As a rule of thumb, files larger than 1KB or 2KB are typically compressed. The mod_gzip_minimum_file_size directive controls the minimum value of the file you want to compress, and the default value is 500B.

9 of the top ten popular websites in the United States compress HTML, seven compress most scripts and style sheets, as long as five compress all scripts and style sheets. This can reduce the page by 70%.

Save

Reduces overall response by up to about 60% after compression

Configuration

The module used to configure gzip depends on the version of Apache (the most popular Web server on Intert, with a share of more than 70%). Apache1.3 use Mod_deflate with mod_gzip,2.3.

Detailed configuration details how to compress, compress which files, compress the degree, type (can use regular match) can search Mod_gzip's website reference.

Rule 5--to place the style sheet at the top

Use the link tag to place the style sheet in the document head

White screen

Put CSS at the bottom of the time (there is a view that DHTML features things at the end of the show, so will put CSS at the bottom feel more optimized. In fact, this is not easy to happen white screen and no style content flicker.

DHTML is not a standard

DHTML refers to Dynamic HTML (dynamically HTML).

DHTML is a marketing term that is used by Netscape (Netscape) and Microsoft to describe the new technologies that 4.x-generation browsers should support.

DHTML is a technical composition used to create dynamic sites.

For most people, DHTML means HTML 4.0, style sheets, and JavaScript binding.

"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets, and scripts that can make the document more dynamic," the company said. ”

For example, some typewriter effect text, flashing text, masking filters and so on.

white screen easily generated places , especially in IE:

1. When opened in a new window

2. When reloading

3. As the home page (opens a new browser window)

Flicker Fouc with no style content

Fouc Flash of unstyles content is caused by not having a stylesheet placed at the top of the head, or using a @import import (even if placed in front, the stylesheet will be downloaded last)

So the best way to avoid flicker-free content is to use the link tag to place it on top of the head

Rule 6--put the script at the bottom

Placing the script at the top blocks the rendering of the later content and the download of the component. And then produce white screen phenomenon.

Placing at the bottom will have minimal impact and best effects.

Rule 7--Avoid CSS expressions

CSS expression expression method is ignored by other browsers, IE support, this method is powerful but very dangerous.

The frequency of expression is much higher than people's expectations, not only in the page rendering and size changes in the evaluation, mouse drag, page scrolling will be evaluated. So to avoid CSS expressions, use event handlers to provide the desired dynamic behavior for a particular event.

Rule 8--using external JS and CSS

* * Inline vs External * *

In simple comparison, the inline is a little faster on the first load because inline has only one HTTP request.

However, many considerations or external use.

Inline cannot be cached, external can be cached, and when your page uses the same JS and CSS, you can reuse the component, the cache advantage is more obvious.

Most importantly, the external can reduce the coupling degree, debugging more convenient ~ ~ ~

Rule 9--Reduce DNS lookups

The internet looks for servers by IP address, and it takes 20-120 milliseconds for the browser to find an IP address for a given hostname, which is the DNS (domain Name System) that acts as the role.

How to reduce DNS lookups

With fewer domain names, Google has only one, because only two components can be downloaded in parallel at a time, two hosts are the best, balancing parallel downloads and DNS queries.

Use connection:keep-alive in an HTTP request to maintain a persistent connection. In an earlier HTTP request. Each request opens a socket connection because many requests in the page are packed to the same server, so this is inefficient. The introduction of persistent connections allows the browser to make multiple requests on a single connection.

Pipelines defined in HTTP1.1 can send multiple requests on a single socket without waiting for a response, and performance is better than persistent connections.

Rule 10--Thin JavaScript

Streamline

Refinement is the removal of unnecessary characters from the code to reduce their size. And then improve the load time practice.

After the code is streamlined, all comments and unnecessary whitespace characters (spaces, line breaks, tabs) can be reduced by 20%.

Confuse

Obfuscation is another way of optimizing that can be applied to the source code, as well as streamlining, removing annotations and whitespace, and as part of the rewrite, the names of functions and variables will be converted to shorter strings.

Such code is more refined, but more difficult to read. This is often done to increase the difficulty of reverse engineering your code, but it also helps to improve performance.

Three disadvantages of confusing JS

1. Flaws: Confusion is more complex and the obfuscation process itself is likely to introduce errors.

2. Maintenance: Because confusion changes the JS symbol, it is necessary to mark any symbols that cannot be changed (such as API functions) to prevent confusion and modify them.

3. Debugging: Difficult to read, debugging more difficult.

Streamlining never leads to problems, but confusion can lead to many problems and pitfalls. Maintaining a large JS proposal uses simplification rather than confusion.

After the actual gzip compression, the difference between simplification and obfuscation is minimal.

Thin CSS

The savings from thin CSS are usually less than JS because there is less comment and whitespace. The biggest potential savings come from optimizing css--merging the same classes, removing unused classes, and so on. The nature of the CSS dependency order (the reason for cascading style sheets) determines that this is a complex issue. Further research and tool development are needed in this area.

Usually the solution uses a color abbreviation, replacing 0px with 0.

Rule 11--Avoid redirection

High Performance website Building guide