Yahoo WEB front-end website optimization -34 Army Regulation

 

Yslow Tools

 

1.Minimize HTTP Requests  reduce HTTP requests

Pictures, css, script, flash, etc. which will increase the number of http requests to reduce the number of these elements can reduce the response time. Multiple JS, CSS into a file where possible, the page where the picture is not good practice to write directly, it should be written into the CSS, use CSS sprites will After the split with a small map to locate the background.


2.Use a Content Delivery Network  using the CDN technology

CDN is indeed a good thing, too 8 server provider of this service in general, should be charged, I used to buy domestic space have this but I did not know what was used, now gone. . .


3.Add an Expires or a Cache-ControlHeader  set expire header files or static cache

The browser will use cache to reduce the number of http requests to speed up page load time, if the page head plus a long expiration time, the browser has cached the page where the elements. But if so, then what pages changes will change the name, otherwise the client will not take the initiative to refresh, to see their own assessment of the ~ this can be achieved by modifying the .htaccess file.


4.Gzip Components Gzip compression

Gzip format is a very common compression technology, almost all browsers have the ability to extract the Gzip format, and it can compress very large proportion of the general compression rate of 85%. No compression compression, you can come here to do the test.


5.Put Stylesheets at the Top  to put the top of the CSS

Let the viewer can see the full style website as soon as possible.


6.Put Scripts at the Bottom  to put the bottom JS

Web presence before you start setting the function, of course, these do not affect the content JS to show your loading process.

7.Avoid CSS Expressions 避免CSSExpressions

CSS expressions are terrible, the only thing to be executed IE support when the operation is very large, you move the mouse it should be re-calculated, but sometimes to do a compatible browser must be used to this ||| IE6 die die! ~


8.Make JavaScript and CSS External  the CSS and JS outer chain

Talked about this thing in front of caching, some of the more common JS and CSS, we can use the form outside the chain, for example, I came to Google from outside the chain Jquery file, if my visitors to browse other use of this document outside the chain has been downloaded and cached files of this site, then visit my website at him when he does not need to be downloaded! ~


9.Reduce DNS Lookups  reduce DNS lookup

Looks like is to reduce the site from external call resources, Google Analytics and my picasa pictures of foreign chains are considered in it.


10.Minify JavaScript and CSS  reduced volume JS and CSS

JS and CSS are all writing skills, with minimal code to achieve the same function, reduce gaps and enhance logic, using abbreviations, etc., of course, there are many tools can help you achieve this.


11. Avoid Redirects  to avoid redirection

When re-write the link, although the "http: //www.today-s-ooxx com." And "http: // www today-s-ooxx com /.." Is only one of the last "/" only a thin, but the results are different, the server needs to take the time to redirect the former to the latter and then jump to their attention that can also be used in or Alias ​​in Apache mod_rewrite or DirectorySlash resolved.


12. Remove Duplicate Scripts  Remove duplicate scripts

Repeated calls to code browser and does not recognize ignored, but will once again operational, which of course is a big waste.


13. Configure ETags 配置ETags

Editor's Note do not know, in short, I was in. Htaccess in it deleted.


14. Make Ajax Cacheable  cached Ajax

Ajax is real-time response, before the new data in the browser received, the old data is cached, so better able to improve efficiency.


15. Flush the Buffer Early  release buffer as soon as possible

When the user makes the page request, the server takes 200 to 500 milliseconds to split HTML, between the write head and the body, to release the buffer, so that files can be sent to the head, and then send the file contents, to improve efficiency.


16. Use GET for AJAX Requests  for a GET method request AJAX

Get method only once and server interaction (sending data), while Post to twice (to send the head and then send the data).


17. Post-load Components  delay loading assembly

The first page is loaded components must be initialized, and then load the other, YUIImage Loader is a good example.


18. Preload components  preload assembly

Probably something used, and does not conflict with lazy loading later loaded in advance, it aims to provide faster response to subsequent requests, see CSS sprites applications on the Google homepage.


19. Reduce the Number of DOM Elements  reduce the number of elements DOM

Complex page structure means a longer download and response times, more rational and more efficient use of tags to structure the page, is a prerequisite for a good front end.


20. Split Components Across Domains  cross-domain separation assembly

Page components from multiple sources can increase your parallel downloads, but be careful not too much, more than 2-4 domains will cause the above mentioned DNS lookup to waste.


21. Minimize the Number of iframes  reduce the number iframe

The need for more efficient use of ifames.
iframe advantages: slow download third-party content in favor of advertising, security sandbox, parallel download script
iframe Disadvantages: Even empty will have greater consumption of resources, will prevent the page onload, non-semantic


22. No 404s  do not appear 404 pages

The site itself in (non-search results) appears 404 page 404 page meaningless affect the user experience and will consume server resources.


23. Reduce Cookie Size 减小Cookie

Cookie exchanged between the server and the browser via the file header, the volume is reduced as Cookie, set a reasonable expiration time, it can be a good efficiency.


24. Use Cookie-free Domains forComponents  using the component name without Cookie

Cookie read the static component of a waste, use another domain name without Cookie to store your static component-a good way, or you can store only the domain name with the www in the Cookie.


25. Minimize DOM Access  to reduce the number of visits to the DOM

JS DOM access is very slow, try not to set the page layout with JS.


26. Develop Smart Event Handlers  development of flexible event handler

Excessive DOM tree elements are added to the event handler, then the reaction efficiency will certainly be lower, YUI event onAvailable tool has a flexible way to help you set up DOM event handlers


27. Choose <link> over @import  using <link> instead @import

Use @import in IE and on the bottom of the page with the <link>, as we said earlier, should <link> placed at the top.


28. Avoid Filters  avoid the use of filters

If you need Alpha transparent, do not use AlphaImageLoader, it is inefficient and only the version for IE6 and below apply, with PNG8 picture. If you have to use, plus _filter so as not to affect IE7 + users.


29. Optimize Images  optimize picture

GIF into your PNG8 would be a good way to reduce the volume, in addition there are many ways to handle your JPG and PNG image in order to achieve optimal results.


30. Optimize CSS Sprites  optimized CSS Sprites

In the CSS Sprites vertically arranged as compact as possible and images, as far as possible similar color image row together, we reduce the image size itself and to improve the speed of page image display.


31. Do not Scale Images in HTML  not zoom images in HTML

Picture how to use it with much, 1000X1000 images are width = "100" height = "100" after the number of KB itself is not reduced.


32. Make favicon. Ico Small andCacheable  narrow favicon. Ico size and cache it

ICO browser site should not always change it, then cache it for a long time, and the best control in 1K less.


33. Keep Components under 25K  to ensure the following components in the 25K

iPhone can not cache more than 25K components, and which still have to be compressed before.

 

34. Pack Components into a Multipart Document packaging components into a multi-part document in

Like add attachments to the message as a HTTP request is enough, but this technology need to make sure your proxy support, iPhone does not support.

 

Guess you like

Origin www.cnblogs.com/HHHAI/p/11334121.html