Web site front-end Web optimization principles (Yahoo 14)

Content again rich site, if slow to inaccessible is meaningless; SEO do a good site, if the search spider can not catch is useless; UE design of the re-humanized site, if the user can not see is also empty talk.

Therefore, the efficiency of the Web page is absolutely the most noteworthy aspect, then, how can we improve the efficiency of a Web page? In this, I today on the Ma Haixiang blog for you to share the Yahoo website optimization of the 14 principles, also known as: Yahoo 14, and these principles are what we as a SEO personnel must understand.

1. Reduce the number of HTTP requests

According to statistics, 80% of the end-user response time is spent on the front-end program, and most of the time spent on a variety of page elements, such as style sheets, scripts and flash downloads, reducing page elements will reduce the number of HTTP requests, which is the key to quickly display the page.

One way to reduce the number of page elements is to simplify page design, but is there any other way to enrich content and get fast response time? Here are some of these techniques:

Image maps combine multiple images into one picture, the total file size changes little, but reduces the number of HTTP requests to speed up the page display speed (see the Ma Haixiang Blog "Improve the speed of the site 6 site front-end optimization method" of the relevant introduction), this method is only suitable for picture continuous situation, At the same time the definition of coordinates is annoying and error-prone work.

CSS sprites is a better way to combine pictures in a page into a single file, and use CSS's Background-image and Background-position properties to make a realistic picture of the desired part.

Inline images uses Data:url scheme to embed images in the page, which will increase the size of the HTML file, and the combination of inline images to your (cache) stylesheet is a way to reduce HTTP requests and increase the size of HTML files.

Combined files reduces the number of HTTP requests by combining multiple script files into a single file, and stylesheets can be handled in a similar way, albeit simply, without being massively used.

According to the data collected by Ma Haixiang Blog, the 10 major foreign sites have an average of 7 script files and 2 style sheets per page, which can be challenging when scripts and stylesheets vary greatly between pages, but if they do, they will speed up response times.

Reducing the number of HTTP requests is the starting point for performance optimization, which is important to maximize the efficiency of first-time access, as described in Tenni Theurer's article Browser Cache usage-exposed, which is the first visit to a regular visit, Therefore, accelerating page access for first time visitors is the key to the user experience.

To this, Ma Haixiang's suggestion is: the first page of the dozens of small icons into one, through the CSS control their display, reduce the number of HTTP requests.

2. Using CDN (Content Delivery Network, contents distribution networks)

The proximity of the user to the Web server also has a significant impact on response times, and from a user perspective, deploying content to multiple geographically dispersed servers will effectively increase the page load speed, but where do you start?

As a first step towards content geographic distribution, do not attempt to refactor the Web application to accommodate the distributed schema, and changing the schema will result in multiple recurring tasks, such as synchronizing session state, replicating database transactions between multiple servers, and thus reducing user-to-content distance attempts may be delayed or blocked by the application schema revision.

We remember that 80-90% 's end-user response time was spent on various elements of the download page, such as files, stylesheets, scripts, and flash, rather than the difficult task of refactoring the system by distributing static content first, which not only greatly reduces response time, but also because of the CDN's presence, Distributing static content is easy to implement.

A CDN is a geographically distributed collection of Web servers that you can use to publish content more efficiently, often based on the proximity of the web to a specific user service.

Some large websites have their own CDN, but services such as Akamai Technologies, Mirror Image Internet, or limelight networks will be cost-effective at Yahoo! Distributing static content to a CDN reduces user impact time by 20% or more, and switching to CDN code modification is easy, but it can speed up the site.

In this, Ma Haixiang's suggestion is: at present, but according to customers, Guangdong, Shandong and other network situation is poor, if you can occupy the main bandwidth of static resources through the CDN release, I believe can greatly alleviate the current website access speed problems.

3. Add Expires Header

Web content is getting richer, meaning more script files, stylesheets, image files, and flash, first-time visitors will have to face multiple HTTP requests, but by using the Expires header, you can cache these elements on the client, This avoids unnecessary HTTP requests in subsequent accesses, and the Expires header is most commonly used in image files, but it should also be used in script files, stylesheets, and Flash.

The browser (and proxy) uses caching to reduce the number and size of HTTP requests, causing the Web page to load faster, and Web server tells the client how long an element can be cached through the expires header.

If the server is Apache, you can use ExpiresDefault to set the expiration date based on the current date, such as: ExpiresDefault "Access plus years", set the expiration time to 10 years from the request time.

Keep in mind that if you use an extra long expiration time, you must modify the file name when the content changes, and at Yahoo! We often use the rename as a step of release: The version number is embedded in the file name, such as Yahoo_2.0.6.js.

In this case, Ma Haixiang's recommendation is that the Js,css,image cache is configured in Apache, and if a static resource needs to be updated, a scheme that modifies the file version number is used to ensure that the client gets the latest version.

4. Compress page Elements

By compressing the HTTP response content, the page response time is reduced, starting with http/1.1, where the Web client uses the Accept-encoding header in the HTTP request to indicate the supported compression types, such as: Accept-encoding:gzip,deflate.

If the Web server checks to the accept-encoding header, it compresses the HTTP response using a method supported by the client and sets the content-encoding header, such as: Content-encoding:gzip.

Gzip is currently the most popular and effective compression method, other ways such as deflate, but it is less effective and not popular. With gzip, the content generally can be reduced by 70%, and in the case of Apache, the Mod_gzip module is used under version 1.3, and in the 2.x version, the mod_deflate is required.

Web server determines whether compression is based on file type, most Web sites compress HTML files, but it is worthwhile to compress script files and style sheets, in fact, compressing task text information, including XML and JSON, is worthwhile, and image files and PDF files should not be compressed , because they are saved in a compressed format, compressing them not only wastes the CPU, but also increases the size of the file.

Therefore, compressing as many file types as possible is a convenient way to reduce page size and improve the user experience.

In this, Ma Haixiang's suggestion is: more than 600 K of the ext2 package, is that people will think to compress it, the effect of compression is also good, only 150 k, in addition, JS, CSS, HTML as much as possible compression (also recommended a compressed CSS code simple tool:/HTTP) www.mahaixiang.cn/zyxz/zxgj/cssys.html), know that many of our customers are still using 1M ADSL.

5, put the style sheet on the head

Whether HTML or XHTML or CSS are interpreted type of language, and not compiled, so CSS to the top, then the browser parsing structure, you can already render the page, so it does not appear, the page structure is bare first out, and then CSS rendering, the page suddenly gorgeous up, This is a "dramatic" page-browsing experience.

We found that moving the stylesheet to the head section can improve the loading speed of the interface, so that the page elements can be displayed sequentially.

In many browsers, such as IE, put the style sheet at the bottom of the document the problem is that it prohibits the order of the page content display, the browser block display to avoid redrawing the page elements, the user can only see the blank page, Firefox does not block the display, but this means that when the style sheet is downloaded, Some page elements may need to be redrawn, which causes flicker problems.

The HTML specification explicitly requires that the style sheet be defined in the head, so to avoid blank screen or flicker problems, the best way is to follow the HTML specification and place the stylesheet in the head.

In this case, Ma Haixiang's advice is: there is no time to put the style sheet behind the document, right?

6. Put the script file on the bottom

As with the style file, we need to pay attention to the location of the script files, we need to put them at the bottom of the page, so that on the one hand can be displayed sequentially, the other side can achieve the largest parallel download.

The browser blocks the display until the stylesheet has been downloaded, so we need to put the stylesheet in the Head section, and for the script, the sequential display of the content behind the script will be blocked, so putting the script as far as possible at the bottom means more content can be displayed quickly.

The second problem with scripting is that it blocks parallel downloads, and the http/1.1 specification recommends that the browser do not have more than 2 concurrent downloads per host, so you can reach more than 2 concurrent downloads if you distribute the image files to multiple machines, but when the script file is downloaded, The browser does not start other parallel downloads, and even downloads from other hosts do not start.

In some cases, it is not easy to move the script to the bottom, for example, the script uses the Document.Write method to insert the page content, and there may be problems with the domain, but in many cases there are some methods.

One alternative is to use deferred scripting (deferred script), The Defer property indicates that the script does not contain document.write, indicating that the browser engraving continues to display, unfortunately, Firefox does not support the defer property, in IE, the script may be delayed execution, but not necessarily get the long time delay required.

However, from a different perspective, if the foot instinct is delayed, it can be placed at the bottom.

In this regard, Ma Haixiang's suggestion is: we may not be aware of this point, but in our xcube XUI we have implemented this law, we believe that can further improve the page access performance.

7. Avoid CSS expressions

CSS expressions are powerful (and dangerous) ways to dynamically set CSS properties, and IE supports CSS expressions starting with version 5, such as Backgourd-color:expression (New Date ()). GetHours ()%2? " #B8D4FF ":" #F08A00 "), that is, the background color is toggled every hour.

The problem with CSS expressions is that they are executed more than most people expect, not only when the page is displayed and resize, but also when the page scrolls and the expression is recalculated even when the mouse moves on the page.

A way to reduce the number of times a CSS expression executes is a one-time expression, that is, when the first execution takes an explicit value instead of an expression, and if you have to set it dynamically, you can use event handlers instead, and if you have to use CSS expressions, keep in mind that they can be executed thousands of times. This can affect page performance (see the Ma Haixiang blog, "Senior Web front-end development engineers teach you how to optimize the CSS framework").

To this, Ma Haixiang's suggestion is: the current CSS maintenance work is mainly by the UI staff, they have tried to avoid this situation.

8. Put JavaScript and CSS into external files

Many of these performance optimization rules are optimized based on external files, and now we have to ask a question: should JavaScript and CSS be included in an external file or in a paging file?

In the real world, using external files speeds up page display because external files are cached by the browser, and if the built-in JavaScript and CSS in the page reduce the number of HTTP requests, the page size is increased.

On the other hand, using an external file will be cached by the browser, and the page size will be reduced without increasing the number of HTTP requests.

Therefore, in general, external files are a more feasible way, the only exception is the inline way to the home page more effective, such as Yahoo! and my yahoo! are embedded, generally speaking, in a session, the home page access at this time is less, so inline can achieve faster user response time.

To this, Ma Haixiang's suggestion is: Ext2 's code has done very good guidance, at present front-end developer all very attention the Client module encapsulation, the reuse, as far as possible the external JS way to improve the code reuse degree, certainly also should be careful not to introduce too many external resources, because this violates the law 1.

CSS packaging is also good, but mainly for the IE series of solutions, you can consider introducing Yaml, blueprint and other CSS framework, easy to solve the browser compatibility issues.

In addition, Ma Haixiang to remind everyone: the JavaScript and CSS files outside, not embedded in the Web page, but also consider putting the style sheet on the head of the script file to the bottom. It is important to note that as far as possible not to use the CSS expression, he easily let the browser appear suspended animation.

9. Reduce the number of DNS queries

DNS is used to map host names and IP addresses, typically one resolution requires 20~120 milliseconds, for higher performance, DNS resolution is usually cached in multiple levels, such as caching server maintained by an ISP or LAN, caching of Local machine operating systems (such as DNS on Windows Client Service), browser, ie default DNS cache time is 30 minutes, Firefox default buffer time is 1 minutes.

Reducing the host name can reduce the number of DNS queries, but it can reduce the number of concurrent downloads, avoid DNS queries that can reduce response time, and reduce the number of concurrent downloads that may increase response time, and a viable tradeoff is to distribute content to at least 2, up to 4 different hostnames.

For this, Ma Haixiang's advice is: in order to bypass the browser on the number of download threads limit, we have a static resource enabled multi-domain name, but this violates the law, but for Windows IE, the DNS cache can alleviate the problem.

10. Minimizing JavaScript code

Minimizing JavaScript code means removing unnecessary characters in the JS code, which reduces download time, and two popular tools are #jsmin and Yui Compressor.

Confusion is the alternative to minimizing the source code, like minimizing it by deleting comments and spaces to reduce the source size, and it can also confuse the code, as part of the confusion, function names and variable names are replaced with short strings, which makes the code more compact, but also more difficult to read, making it difficult to reverse engineering, Dojo Compressor (Shrinksafe) is the most common obfuscation tool.

Minimization is a safe, straightforward process, and confusion is more complex, and easy to create problems, from the survey of 10 of foreign websites, by minimizing the file can be reduced by 21%, and confusion can be reduced by 25% (specific to see the Ma Haixiang Blog " Recommend a way to test how JavaScript performs performance and performance comparisons).

In addition to minimizing external script files, the embedded script code should also be minimized, even if the script is compressed according to rule 4, minimizing the script engraving reduces the file size by 5% or higher.

To this, Ma Haixiang's suggestion is: we do not directly use JS compression, but we use many components such as ext2, jquery, etc., has been for us to practice the law.

11. Avoid redirection

Redirection is done through the two HTTP status codes of 301 and 302, such as:

http/1.1 301 Moved Permanently
Location:http://mahaixiang.cn/newuri
Content-type:text/html

The main problem with redirection is that the user experience is reduced when the browser automatically redirects the request to the URL specified by location.

One of the most resource-intensive, frequently occurring, and easily overlooked redirects is the last missing of the URL/, such as Access Http://www.mahaixiang.cn/astrology will be redirected to http://www.mahaixiang.cn/ astrology/, under Apache, you can solve this problem by alias,mod_rewrite or Directoryslash.

The experienced SA has considered this issue for us, and Ma Haixiang's advice is: You can look at the Apache configuration file for the online environment: httpd.conf.

12. Delete duplicate script files

Including duplicate JS script files on one page can affect performance, that is, it will create unnecessary HTTP requests and additional JS execution.

Unnecessary HTTP requests occur under IE, and Firefox does not generate extra HTTP requests, and additional JS execution, whether under IE or under Firefox, will occur.

One way to avoid duplicate script files is to use a template system to create a script management module that, in addition to preventing duplicate script files, can also implement dependency checking and increase the version number to the script file name to achieve an extremely long expiration time.

In this, Ma Haixiang's suggestion is: the old version of the Xplatform in the problem is more serious, but believe that the new version of the Xcube will not repeat.

In addition, to remind everyone: some JavaScript framework, JavaScript package must be used with caution, at least to ask: With this JS kit in the end to give us much convenience, improve how much work efficiency, and then with it because of redundant, repetitive code brought negative effects compared.

13, Configuration Etags

ETag entity tags, this tag and you often see on the internet tag cloud kind of tag a little bit different, this etag is not for the user, but for the browser cache.

The etag is a mechanism that the server tells the browser to cache that the content in the cache has changed, and through the ETag, the browser can know that the contents of the cache are not up-to-date and need not be re-downloaded from the server, which is a bit like the concept of "last-modified". It's a pity that as a web developer, he is still a Web server worker.

Etags is a mechanism for determining whether elements in the browser cache match elements in a Web server, which is a more flexible element validation mechanism than Last-modified date.

The ETag is a string used to uniquely represent the version of an element, which needs to be enclosed in quotation marks, and WEB server first specifies the ETag in response:

http/1.1 OK
Last-modified:tue, Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
content-length:12195

Later, if the browser needs to validate an element, it uses the If-none-match header to return the ETag to the Web server, and if the ETag matches, the server returns 304 code, saving the download time:

Get/i/yahoo.gif http/1.1
Host:mahaixiang.cn
If-modified-since:tue, Dec 2006 03:03:59 GMT
If-none-match: "10c24bc-4ab-457e1c1f"
http/1.1 304 Not Modified

The problem with Etags is that they are constructed based on certain attributes of server uniqueness, such as Apache1.3 and 2.x, in the format Inode-size-timestamp, and in IIS5.0 and 6.0, the format is Filetimestamp: ChangeNumber.

So the same element on different Web server, its etag is not the same, in a multi-Web server environment, the browser first request an element from Server1, and later to server2 validation of the element, because the etag is different, so the cache is invalid and must be re-downloaded.

Therefore, if you do not use the flexible authentication mechanism provided by the etags system, it is best to remove the ETag, remove the etag will reduce the HTTP response and subsequent request HTTP header size, Microsoft Support article describes how to delete etags, and under Apache, Just set Fileetag None in the configuration file.

In this respect, Ma Haixiang's recommendation is: custom ETag generation strategy to minimize the number of probe rule generation, because not the server default ETag, there is no problem, if you have not previously paid attention to, please check the configuration in Apache.

14. Cache Ajax

Now Ajax seems a bit of myth, as if the Web page as long as Ajax, then there is no efficiency problem, in fact, this is a misunderstanding, poor use of Ajax will not make your page more efficient, but will reduce your page efficiency.

In Ma Haixiang's view, Ajax is a good thing, but please do not overdo it, when using Ajax also consider the above guidelines.

In addition, the performance optimization law is also applicable to Web 2.0 applications, the most important way to improve the performance of Ajax is to make its response cacheable, as the "Rule 3 added expires Header" discussed, the following other laws also apply to Ajax, of course, Law 3 is the most effective way.

Ma Haixiang Blog Comments:

Web design and SEO technology is the network technology development of Web designers new requirements, 95% of the SEO skills is very simple, and the most important 5% is "experience", "creative" and "people", need to work in accordance with the actual situation constantly make adjustment strategies, and continue to optimize the SEO adhere to.

This article for Ma Haixiang Blog original article, if want to reprint, please indicate the original site from the http://www.mahaixiang.cn/znseo/1056.html, annotated source, otherwise, no reprint; Thank you!

Web site front-end Web optimization principles (Yahoo 14)