01. Minimize HTTP Requests Reduce HTTP requests
Image, CSS, Script, Flash, etc. will increase the number of HTTP requests. Reducing the number of these elements can reduce response time. Write multiple JS and CSS into one file if possible; it is also a bad practice to write images directly into the page. You should write them into CSS, use CSS Sprite to assemble the small images and then use the background to find the position; use " Image Map" (Placing different URLs on the same image, this method can reduce the number of requests for images. After testing, the time to obtain the image map is 56% faster than the time to obtain each individual image. Image Map There are two ways, one is "server-side image map" and the other is "client-side image map". The server-side implementation is to pass the XY coordinates clicked by the user to the server, and then the server-side maps the corresponding operations. Use MAP tags in the foreground. The image map method makes programming maintenance much more difficult).
02. Use a Content Delivery Network using CDN technology
"Content Delivery Network". Its purpose is to publish the content of the website to the network "edge" closest to the user by adding a new layer of network architecture to the existing Internet.
Features of CDN:
1. Local Cache acceleration – improves the access speed of corporate sites (especially sites containing a large number of pictures and static pages), and greatly improves the stability of sites of the above nature.
2. Mirroring service – eliminates the impact of interconnection bottlenecks between different operators, realizes cross-operator network acceleration, and ensures that users in different networks can receive good access quality.
3. Remote acceleration – Remote access users intelligently and automatically select the Cache server based on DNS load balancing technology and select the fastest Cache server to speed up remote access.
4. Bandwidth Optimization – Automatically generate a remote Mirror Cache server for the server, and read data from the Cache server when remote users access it, reducing the bandwidth of remote access, sharing network traffic, and reducing the load on the original site WEB server, etc.
5. Cluster anti-attack – The widely distributed CDN nodes and the intelligent redundancy mechanism between nodes can effectively prevent hacker intrusions and reduce the impact of various DDOS attacks on the website, while ensuring good service quality.
03. Add an Expires or a Cache-Control Header to set "header file expiration" or "static cache"
Browsers use caching to reduce the number of HTTP requests and speed up page loading time. If a long expiration time is added to the header of the page, the browser will always cache the elements in the page. However, if something on the page changes, the name must be changed, otherwise the client will not actively refresh.
(1) Concept
Cache-control is used to control HTTP cache (may not be partially implemented in HTTP/1.0, only Pragma: no-cache is implemented)
Format: Cache-Control: cache-directive
cache-directive can be the following:
Used when requesting:
| "no-cache"
| "no-store"
| “max-age” “=” delta-seconds
| "max-stale" [ "=" delta-seconds ]
| “min-fresh” “=” delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
Used in response:
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| “max-age” “=” delta-seconds
| “s-maxage” “=” delta-seconds
| "cache-extension"
Partial description:
Divided according to whether it can be cached
Public indicates that the response can be cached by any cache.
Private indicates that all or part of the response message for a single user cannot be processed by the shared cache. This allows the server to only describe a partial response from a user that is not valid for other users' requests.
no-cache indicates that the request or response message cannot be cached (HTTP/1.0 is replaced by Pragma's no-cache)
Based on what can be cached
no-store is used to prevent important information from being released unintentionally. Sending it in the request message will cause both the request and response messages to use caching.
Based on cache timeout
max-age indicates that the client can receive responses with a lifetime no greater than the specified time in seconds.
min-fresh indicates that the client can receive responses with a response time less than the current time plus the specified time.
max-stale indicates that the client can receive response messages beyond the timeout period. If a value for max-stale messages is specified, the client can
Receives response messages that are within the specified timeout period.
Expires represents the existence time, allowing the client not to check (send a request) before this time, which is equivalent to max-age.
Effect. But if they exist at the same time, they will be overridden by Cache-Control's max-age.
Format: Expires = "Expires" ":" HTTP-date
For example: Expires: Thu, 01 Dec 1994 16:00:00 GMT (must be in GMT format)
(2) Application
Set expires and cache-control through HTTP META:
<meta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv=”Expires” content=”Mon, 20 Jul 2009 23:00:00 GMT” />
The above settings are only examples, and any one of them can be used in practice. If written like this, it will only be valid for the web page, and will not be used for pictures or other requests in the web page, and will not do any caching. Moreover, there are more requests from the client. Although it is only checking the Last-modified status, the increase in requests must have an impact on the browsing speed.
If you want to add a cache to the file, you can use apache's mod_expire module ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), which is written as
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
</IfModule>
I remember that ExpiresActive is set to On. I didn't set On at first. It seems that YSlow can't find the caching mechanism no matter what. If added in this way, it will be included by default. If you want to target individual MIME types you can:
ExpiresByType image/gif “access plus 5 hours 3 minutes”
In addition, when you click refresh on the browser, the requests sent by the client are all max-age=0, indicating the validate operation. Send a request to the server to check the cache, and then update the cache. Generally, you get 304 Not Modified, which means there is no change.
04. Gzip Components Gzip compression
The Gzip format is a very common compression technology. Almost all browsers have the ability to decompress the Gzip format, and the compression ratio it can compress is very large, with a general compression rate of 85%. Compression or not, you can test it here.
05. Put Stylesheets at the Top Put CSS at the top
Use the LINK tag to place the style sheet in the HEAD of the document so that viewers can see the complete style of the website as early as possible.
HTML pages are rendered step by step. When users open the page, we need to consider the user experience - the speed of opening the web page. The first requirement to display a page is HTML, and HTML is composed of DIVs one by one, and CSS is the basis of everything.
06. Put Scripts at the Bottom Put JS at the bottom
After the website is rendered, you can set the functions. Of course, these JS must not affect the content performance during your loading process.
Because the page is rendered gradually, content below the script will be blocked. Rendering of the page will not continue until the script has finished loading. Correct placement
(1) Worst case scenario: put the script at the top. It will block subsequent content rendering and subsequent component downloading.
(2) Best case scenario: Put the script at the bottom. Does not prevent the page from rendering.
07. Avoid CSS Expressions Avoid CSS Expressions
CSS expressions are terrible. This thing that is only supported by IE requires a very large amount of calculations when executed. It will be recalculated every time you move the mouse, but sometimes this must be used for browser compatibility.
08. Make JavaScript and CSS External
We talked about caching earlier. For some of the more common JS and CSS, we can use external links, such as linking Jquery files from Google.
09. Reduce DNS Lookups Reduce DNS lookups
Reduce the website calling resources from outside.
The Internet finds servers by IP address. DNS also has overhead. Under normal circumstances, the time it takes for a browser to find a given host IP address is 20~120ms. In order to reduce the time spent in the DNS lookup process, some of the following techniques need to be adopted:
(1) DNS cache
DNS lookups can be cached to improve performance. On the user's computer, after a host name is resolved, the corresponding DNS information will be stored in the operating system's DNS cache, which can reduce the time required for subsequent use. Some other browsers also have corresponding DNS caching functions. But the number of cached DNS is limited. Normally the operating system considers the TTL value, and the browser ignores this value and sets its own time.
(2) TTL
DNS caching brings some system consumption, and the server's IP address is not necessarily unchanged. The server can indicate how long the record can be cached, and the DNS record returned by the lookup contains a time-to-live (TTL) value that indicates how long the client can cache the record. Generally, it can be set to 1 day.
10. Minify JavaScript and CSS Reduce the size of JS and CSS
There are skills in writing JS and CSS. Use the least amount of code to achieve the same function, reduce white space, enhance logic, use abbreviations, etc. Of course, there are many tools that can help you achieve this.
11. Avoid Redirects
When writing the link again, although there is only one final "/" difference between "http://xxx.com" and "http://xxx.com/", the results are different. The server needs to spend time to convert the former Redirect to the latter and then jump. You need to pay attention to this. You can also use Alias or mod_rewrite or DirectorySlash in Apache to solve it.
In addition, the uses of redirection include: connecting different websites; tracking website visits; and beautifying URLs.
12. Remove Duplicate Scripts Remove duplicate scripts
The browser will not recognize and ignore the code that is called repeatedly, but will calculate it again, which is of course a huge waste.
13. Configure ETags Configure ETags
I don't know what happened, but I deleted it in . htaccess.
14. Make Ajax Cacheable cache Ajax
Ajax responds in real time. Before the browser receives new data, old data is cached, which can better improve efficiency.
15. Flush the Buffer Early Release the buffer as early as possible
When a user makes a page request, the server needs to spend 200 to 500 milliseconds to assemble the HTML, write it between the head and the body, and release the buffer. This way, the file header can be sent out first, and then the file content can be sent to improve efficiency.
16. Use GET for AJAX Requests Use GET for AJAX requests
The Get method only interacts with the server once (sending data), while Post requires two interactions (sending headers and then data).
17. Post-load Components Lazy loading components
First load the necessary components for page initialization, and then load others. The specific implementation method can be "hidden IFRAME" or javascript. "YUI Image Loader" is a good example.
18. Preload components Preload components
Loading things that may be used later does not conflict with lazy loading. Its purpose is to provide a faster response to subsequent requests. See the CSS sprites application on the Google homepage.
19. Reduce the Number of DOM Elements Reduce the number of DOM elements
Complex page structure means longer download and response times, resulting in slower page rendering. Using tags more reasonably and efficiently to structure pages is a prerequisite for a good front-end.
20. Split Components Across Domains
The main purpose is to improve the parallel downloading ability of page components, but be careful not to use too many. More than 2-4 domain names will cause the waste of DNS searches mentioned above. IE can only have two requests for the same domain at the same time. Implementations can utilize CDN networks or other distributed computing networks.
21. Minimize the Number of iframes Reduce the number of IFrames
IFrame is a taboo for SEO, and IFrame needs to be used more effectively.
IFrame advantages: good for downloading slow third-party content such as ads, security sandbox, parallel download scripts
Disadvantages of IFrame: Even if it is empty, it will consume a lot of resources and prevent the onload of the page, which is not semantic.
22. No 404s Do not appear on the 404 page
404 pages appear on the site itself (not search results). Meaningless 404 pages will affect the user experience and consume server resources.
23. Reduce Cookie Size Reduce Cookie
Cookies are exchanged between the server and the browser through file headers, reducing the cookie size as much as possible and setting a reasonable expiration time, which can greatly improve efficiency.
24. Use Cookie-free Domains for Components Use cookie-free domain names for components
Reading cookies for static components is a waste. It is a good way to use another cookie-free domain name to store your static components, or you can only store the domain name with www in the cookie.
25. Minimize DOM Access Reduce the number of DOM accesses
JS is very slow to access the DOM, so try not to use JS to set the page layout.
26. Develop Smart Event Handlers Develop flexible event handlers
If too many elements in the DOM tree are added to the event handler, the response efficiency will definitely be low. The YUI event tool has an onAvailable method that can help you flexibly set the DOM event handler.
27. Choose <link> over @import Use <link> instead of @import
Using @import in IE is the same as using <link> at the bottom of the page.
28. Avoid Filters Avoid the use of filters
If you need Alpha transparency, do not use AlphaImageLoader. It is inefficient and only applicable to IE6 and below. Use PNG8 images. If you must use it, add _filter to avoid affecting IE7+ users.
29. Optimize Images Optimize images
Converting your GIF to PNG8 is a good way to reduce the size, and there are many ways to process your JPG and PNG images to achieve optimization results.
30. Optimize CSS Sprites Optimize CSS Sprites
Arranging images in CSS Sprites vertically and as compactly as possible, and arranging images with similar colors together as possible will reduce the size of the image itself and increase the page image display speed.
31. Don't Scale Images in HTML Don't scale images in HTML
Use as large a picture as you want, don't be lazy.
32. Make favicon.ico Small and Cacheable Reduce the size of favicon.ico and cache it
The browser ICO of the site should not be changed frequently, so cache it for a long time, and it is best to control it below 1K.
33. Keep Components under 25K
The iPhone cannot cache components above 25K, and that's before being compressed.
34. Pack Components into a Multipart Document Pack components into a multipart document
Just like adding an attachment to an email, an HTTP request is enough, but this technique needs to be supported by your proxy, which the iPhone does not support.
Inline images:
Use "data: URL scheme" to embed image data in the actual page. What we usually see commonly are: http, ftp, mailto and other modes. In fact, the data:URL mode has been proposed as early as 1995. It means that small pieces of data are directly integrated into the link URL. The pattern is as follows: data: [<mediatype>][;base64],<data>
The first parameter indicates the file format, such as image/gif.
Unfortunately, IE currently does not support this mode. In addition, data size is also limited.
Statement: The content comes from the Internet and is based on Yahoo's 34 articles.