How to effectively reduce web page loading time? _html/css_WEB-ITnose

Netizens don’t like to spend too much time waiting for the web page to open. The longer they wait, the user may close the web page directly, which will lose a lot of traffic! Secondly, the ranking of keywords is also related to the opening speed of web pages. This mainly reflects the user experience of search engines. If the user experience is good, the ranking will be better than other websites. Therefore, I think it is necessary for us to improve the opening speed of web pages. This does not require too much cost investment, just pay more attention to some tips! Below are 20 ways to help you improve website access speed and shorten web page loading time .

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. When we use CSS format control, we often use background to load many graphic files. Each background image generates at least one HTTP request. Generally, we use background extensively in order to make the page lively. To load the background image, to improve this situation, you can use a useful background-position attribute of CSS to load the background image. We combine multiple images that need to be loaded frequently into a single image. When it needs to be loaded, use the following Form loading can reduce the HTTP request for loading this part of the image to 1.

B. Use Image maps. This method is also commonly used, but it is limited to the same area.

C.Inline images, this method is rarely seen, but it is very practical for small and simple images.

2. Use CDN (Content Delivery Network) network acceleration

There are many companies doing CDN acceleration business in China. To put it simply, it means spreading your pictures and videos Go wherever the CDN network can reach, so that users can download these files nearby when they visit, thereby achieving the purpose of speeding up the network. This can also reduce the load on your own website.

3. Add file expiration or cache header

For images, Js script files, etc. that are frequently accessed by the same user, the buffering time can be set in Apache or Nginx, such as setting 24-hour expiration time, so that when the user visits the page again, the same set of images or JS will not be downloaded again, thereby reducing HTTP requests, user access speed will be significantly improved, and the server load will also be reduced. The following is an example of cache control in nginx configuration:

4. The server turns on gzip compression

Everyone knows this well and will need to transmit it soon. The content is compressed and transmitted to the client and then decompressed, so that the amount of data transmitted on the network will be greatly reduced. Usually, Apache and Nginx on the server can directly enable this setting. You can also directly set the transmission file header from the code perspective, add gzip settings, or directly set it from the load balancing device. However, it should be noted that this setting will slightly increase the load on the server.

5. The css format definition is placed in the header of the file

This setting is more advantageous when the client is on a slow network or the web page content is relatively large. You can The web page is gradually rendered while still maintaining the format information, without affecting the beauty of the web page.

6. Put Javascript scripts at the end of the file

Many Javascript scripts have low execution efficiency, or some third-party domain name scripts unexpectedly cannot be loaded. If you put these Placing the script at the front of the page may cause the content loading speed of our own website to decrease or even fail to load normally. Therefore, these scripts are generally placed at the end of the web page file. The scripts that must be placed in the front should be replaced with the so-called The "post-loading" method is used to load the main web page after it is loaded to prevent it from affecting the loading speed of the main web page.

7. Avoid using CSS scripts (CSS Expressions)

Sometimes in order to dynamically change css parameters, you may use css expression, but this is not worth the gain. It will significantly increase the burden on the client browser, so it is not recommended. If changes are needed, Javascript can be used to implement it.

8. css and javascript should be loaded externally

If the content of css and js is relatively large, try not to write them into the same page and load them externally. It is more appropriate to enter because the browser itself will cache css and js files.

9. Compress Javascript and CSS code

Generally, there are a lot of spaces, line breaks, and comments in js and css files, which are easy to read. If they can be compressed, they will It will be very helpful for network transmission. There are many tools in this area. Generally, you can keep the development version and use the tool to generate the production version. Comparing the two files, the compression rate can generally reach more than 50%, and the amount of data reduced is quite considerable.

10. Avoid using 301 and 302 redirects

11. Develop good development and maintenance habits and try to avoid repeated calls of scripts

12. Configure ETags

13. Ajax uses cache call

For the use of this, please refer to the Discuz forum code, which uses a cache call method for a large number of Ajax calls. It is generally implemented using additional feature parameters. Pay attention to the

<script src="xxx.js?{verhash},{verhash}"

is the characteristic parameter. If this parameter does not change, the cache file will be used. If it changes, the new file will be re-downloaded or the information will be updated.

14. Use Flush properly

After the client sends a browsing request, the server generally takes 200-500ms to process these requests. During this period, the client The browser is in a waiting state. If you want to reduce the user's waiting time, you can use flush at the appropriate location to push the ready content to the user. This is easy to implement in PHP. For example:

<!--css,js--></head><?php flush();?><body>...<!--content-->

15. Try to use the GET method for Ajax calls

When actually using XMLHttpRequest, if the POST method is used, two HTTP requests will occur. Using the GET method only one HTTP request will occur. If you use the GET method instead, HTTP requests are reduced by 50%!

16. Reduce DCOM elements as much as possible

This is easy to understand, which is to reduce the number of various elements in the web page as much as possible.

17. Use multiple domain names to load multiple files and pictures in web pages

Remember that there is information that shows that during the web page loading process, IE, at the same time, The maximum number of parallel HTTP requests for the same domain name is 2. If the number of files that a web page needs to load exceeds 2 (usually far more than...), to speed up web page access, it is best to distribute the files to multiple domain names. For example, on the 19th floor, its js files use independent domain names. It is said that Baidu has more than 20 image servers.

18. Reduce the use of iframes. If necessary, try not to use them

Iframes are usually used to load content from different domain names. This may also be caused by the loading of iframe content. Speed ​​affects the loading speed of the main web page. If possible, capture the content that needs to be loaded and embed it locally. If you really need to load iframe, use post-loading method to achieve it.

19. Optimize image files

Optimize image files and reduce their size, especially thumbnails. Be sure to generate thumbnails according to size and then call them. Do not add them to the web page. It is implemented using the resize method. Although the image you see in this way is smaller in appearance, the amount of data loaded has not been reduced at all. I have seen thumbnails loaded in a web page, and their actual size is as huge as 10M...

Ordinary images and icons should also be compressed as much as possible. This can be achieved by saving web images, reducing the number of colors, etc. .

20. When the page content is large enough, it can be displayed in paging, or loaded after page turning like Taobao.