How to effectively reduce page load time? 20 Ways to improve website access speed

Internet users do not like to use too much time to wait for the opening of the web, the longer the waiting, the user may directly close the page, so it will lose a lot of traffic! Secondly, the ranking of keywords and the opening speed of the Web page also has a relationship, the main embodiment of the search engine on the user experience, the user experience is good, ranking relative to other sites is better. So I think we need to improve the speed of the Web page, this does not require too much cost investment, just need to pay attention to a few small tricks on the line! Here are 20 ways to help you improve your website's access speed and reduce page load times .

1. Reduce the number of page HTTP requests

A more straightforward understanding is to reduce the number of calls to other pages and files.

A. We use the CSS format control, often use background loaded many graphics files, each background image generated at least 1 HTTP requests, generally we want to make the page lively will use a lot of background to load the background map, to improve the situation, you can use CSS 1 useful background-position properties to load the background map, we will need to load multiple images to synthesize into 1 separate pictures, need to load, the following form of loading can be loaded in this part of the image of the HTTP request reduced to 1.

B. Using image maps, this method is more commonly used, and is limited to 1 regions.

C.inline images, this method is seldom seen, but for very small very simple image is very practical, the relevant grammatical standard reference: tools.ietf.org/html/rfc2397.

2. Using CDN (Content Delivery Network) to accelerate

Now the domestic CDN to accelerate the business of many companies, simply speaking, is to be your pictures, video spread to the CDN network can reach, so that users can visit the nearest to download to these files, so as to achieve the purpose of network acceleration, so that, at the same time can alleviate your own site load.

3. Add file expiration or cache header

For the same user frequently accessed pictures, JS script files, etc. can set their buffering time in Apache or nginx, such as setting a 24-hour expiration time, so that the user visited the page after the visit, the same group of pictures or JS will not repeat the download, thereby reducing the HTTP request, The user's access speed is significantly increased, and the server load decreases. Examples of cache control in Nginx configuration are given below:

4. The server opens gzip compression

It is well known that the content that will need to be transferred is compressed and then decompressed to the client, so that the amount of data transferred over the network will be greatly reduced. Usually on the server Apache, Nginx can directly open this setting, you can also directly set the transfer file header from the code angle, increase the gzip settings, can also be set directly from the load balancer device. Note, however, that this setting adds a slight burden to the server.

5, CSS format definition placed in the file header

This setting is more advantageous for users to have a slow network or a large web content, and can still maintain formatting information while the Web page is being progressively rendered, without affecting the aesthetics of the Web page.

6. JavaScript scripts are placed at the end of the file

Many JavaScript script execution inefficient, or some 3rd party domain name script unexpectedly can not be loaded, if you put these scripts in the page compared to the previous location, may cause our own site content loading speed down or not load normally, so the script is usually placed at the end of the page file, Be sure to put in front of the script to use the so-called "post-load" mode to load, after the main page load is completed before loading, to prevent its impact on the main page loading speed.

7. Avoid using CSS scripts (CSS Expressions)

Sometimes in order to change the parameters of the CSS, it may be implemented with CSS expression, but this does not outweigh the cost, will make the user-side browser burden significantly heavier, so it is not recommended to do so, if you need to change, you can use JavaScript script to implement.

8, CSS, JavaScript changed from external call

If the CSS, JS content is relatively large, try not to write to the same 1 pages, changed by the external loading is more appropriate, because the browser itself will be CSS, JS file cache.

9, compressed JavaScript, CSS code

General JS, CSS file There are a large number of spaces, line-wrapping, comments, these are conducive to reading, if it can be compressed, will be very beneficial to network transmission. There are many tools in this area, generally can keep the development version, the use of tools to generate production version, 2 file comparison, the general compression rate can reach more than 50%, reduce the amount of data is still relatively considerable.

I this blog just finished, a variety of code has not been optimized and compressed, the current YSlow rating can only reach D, and so there is time for partial optimization, the C grade should not be a problem.

10, avoid the use of 301, 302 turn

11, develop a good development and maintenance habits, try to avoid repeated calls to the script

12, Configuration Etags

13. AJAX uses cache invocation

The use of this can refer to the Discuz Forum code, which is used in a large number of Ajax calls to use the cache call method, the general use of additional feature parameters to achieve, pay attention to the

Is the feature parameter, this parameter does not change the use of the cache file, if a change occurs, re-download the new file or update information.

14. Use flush properly

After the client sends the browse request, the server side generally spends 200-500ms to process these requests, during which the client browser is waiting, if you want to reduce the user wait time, you can use flush in the appropriate location, push the ready content to the client, This is easy to implement in PHP, for example:

15, Ajax calls as far as possible to use the Get method call

When XMLHttpRequest is actually used, 2 HTTP requests occur when the Post method is used, and only 1 HTTP requests occur with the Get method. If you use the Get method, the HTTP request is reduced by 50%!

16. Minimize DCOM Elements

This is a good understanding, is to minimize the number of <> elements in the page, such as

Redundancy is serious, and we can replace it completely.

17. Use multi-domain load pages in multiple files, pictures

Remember there is information, ie in the Web page loading process, in the same 1 time, the same 1 domain names in parallel with the number of HTTP requests up to 2, if the Web page needs to load more than 2 files (usually far more than ...), to speed up Web Access, it is best to spread the file to multiple domain names, such as 19 floor, Its JS file uses a separate domain name, it is said that the number of pictures of Baidu servers in more than 20.

18, reduce the use of IFRAME, if not necessary, try not to use

The IFRAME is typically used for loading different domain name content, which can also affect the load speed of the main page due to the loading speed of the iframe content, and, if possible, crawl the content that needs to be loaded to local direct embedding. If the IFRAME needs to be loaded, it is implemented in a post-load manner.

19. Optimize picture file

Optimize the picture file, reduce its size, especially the thumbnail, be sure to generate thumbnails by size and then call, do not use the Resize method in the Web page to achieve, although the picture looks like this smile, but its load of data is not reduced. Have seen someone in the Web page loaded thumbnails, the real size of 10M is huge ...

The normal image, icon, as much as possible to compress, can be used to save the web image, reduce the number of colors and other methods to achieve.

20, when the content of the page is large to a certain extent, you can use the way of paging, or the kind of Taobao-page loading mode.

How to effectively reduce page load time? 20 Ways to improve website access speed