Original: https://developer.yahoo.com/performance/rules.html
notes:
1. Reduce the number of http requests
Multiple css, javascript packaged into one file
Use CSS Sprites technology to package multiple images into one, and access images cheaply according to location when accessing
Embed images directly into html or css
2. Use a CDN
3. Cache static and dynamic content
http header set cache-control
4. Compress static and dynamic content
5. Put CSS in the head
Can make pages load smoothly instead of blank or unstyled pages at first
6. Put javascript at the bottom of the page
Avoid the page being stuck when loading javascript, but make sure that there is no DOM to be loaded in the javascript at the beginning, such as using document.write to write content directly on the web page
7. Don’t use CSS expressions
The page will evaluate the expression many times, including thousands of times when the mouse is moved
8. Separate css and javascript
HTML will not be cached, and css and script are separated into a single file. Subsequent requests can be cached, but the number of http requests will be increased for the first visit. Some technologies can be used to achieve fusion at the first request and separate subsequent requests.
9. Reduce DNS lookups
Don't use many different domain names in img, css, and script of the page. Each domain name needs a DNS lookup, but generally the browser is configured to send at most 2 requests at the same time under the same domain, so it is not necessarily good to put them all in one domain. 2-4 domains recommended
10. Reduce javascript and css size
Compress javascript and css with dedicated tools JSMin and YUI Compressor .
11. Minimize redirects
The orientation is complete, and the browser can't do anything until the new html is down. If the domain name has changed, you can use CNAME, or Aliasmod_rewrite等技术
需要注意的是 http://astrology.yahoo.com/astrology results in a 301 response containing a redirect to http://astrology.yahoo.com/astrology/
12. Don't refer to the same script repeatedly on the page
13. Configure Etags
Entity tags can quickly compare whether resources have changed, but if the website is deployed on multiple servers, each service network (apache or IIS) will have different etags for the same resource, so if the website is deployed on multiple servers, the most Well don't use etag, if deployed on a server, using etag will speed up the speed
14. Flush content ahead of time
Flush can be configured in the HTML file, and flush can be configured after the head element, so that the head content is sent to the client first, so that the client can initiate multiple resource requests in advance
15. Where ajax uses get, there is no post
When using get, ajax will cache, post will not
16. Lazy Loading Components
Some components that are not needed on the initial page, such as those seen by the user after a click, can be lazy loaded. YUI Image Loader can delay loading images, YUI Get utility can delay loading css and scripts
17. Early loading components
The components of the next page that the user may transfer to can be loaded in advance when the current page is loaded, such as the content of the previous page and the next page
18. Reduce the number of DOM elements and don't abuse DIVs when they are not necessary
19. Minimize iframes
If it is third-party content, such as advertisements, etc., you can use iframes to achieve better isolation, but iframes are heavier.
20. Reduce 404
404 request wastes the number of simultaneous requests, wastes time checking 404 results, and can reduce external resource references when script references
21. Reduce cookies
Reduce unnecessary cookies, because each request will bring cookies in the head
Static resource requests do not require cookies. Consider deploying static resources to a second-level domain separately.
22. Reduce DOM manipulation
Manipulating the DOM in javascript is very time-consuming, try to cache DOM variables when operating
23. Reduce event handlers
Even monitoring consumes a lot of CPU. If there are 10 buttons in a DIV, you can consider setting an event in the DIV layer instead of one per button, because the event will pass the element that initiated the event upwards, so you can find which button initiated the event.
24. Optimize images
If the picture does not use many colors, you can use the 255 color system. For GIF pictures, you can convert them to png pictures, and use tools to optimize png and jpeg pictures.
Don't enlarge image size in html
25. Don’t have empty links
<script src=""> and <link href="">. This wastes the request, and the empty string is treated as a relative path.