How to realize loading optimization in website construction

        Website construction A very important part of is resource loading optimization. Due to the low bandwidth, high latency, small memory and low processor performance of mobile devices, website construction often has to optimize the performance of front-end pages to meet users' expectations for page loading. Some time ago, I did some related work Website optimization I found that there are few Chinese courses on the Internet, and they are all based on the website step by step to find solutions to problems, so I sorted out and translated some useful pages. The web page loading time is affected by the network speed. Generally, the browser is used to simulate a specific network speed for testing, so that the results before and after optimization can be compared more accurately.

　　 1. Reduce requests

File resource compression: unnecessary bytes such as extra spaces, newlines, indents, and comments are removed to improve download, parsing, and execution speed. There are many online tools of this kind. Merging files: Each CSS and JS file is an HTTP request, and relevant multiple files should be merged into one file to reduce the number of HTTP requests. To solve the problem of loading speed, first of all, reduce the requests for web pages, such as css sprite, js/css compression, caching, and on-demand loading. Another method is to place resources under different sub domain names. For example, separating image resources from static resources can greatly speed up the page loading time, but this method is not applicable to HTTP2 connections.

　　 2. Take full advantage of cache

Using cache can reduce the number of requests to the server and save loading time. Therefore, all static resources should be cached on the server side, and try to use a long cache. Long Cache resources can be updated with different timestamps. Set the expiration time of resources reasonably, especially for some static resources that do not need to be changed, set the cache expiration time longer.

　　 3. Compression

After the website is compressed, it will make the search engine more smooth in crawling the website, improve the user experience, and better browse the website content. Gzip web pages are compressed as a whole, which is supported by many virtual hosts at present, and does not require webmaster operations. The opening speed of web pages is accelerated after Gzip compression; Web page script resources can be compressed with the help of the webmaster tool's js compression tool. It is recommended that the website should not have too many js files, and it is difficult for search engines to read such files; Website image compression, which compresses unimportant images of websites, can greatly reduce the space of the virtual host and speed up the loading of web pages; Reducing the size of resources can not only reduce the storage space, but also reduce the transmission time and speed up the display of web pages when transferring files over the network. Therefore, it is necessary to compress the code of HTML, CSS, JavaScript and other resources.

　　 4. Optimize JavaScript loading performance

The first screen should be controlled within 1 second as far as possible. Resources that are not used by the screen should be loaded when the user needs them (delayed loading, pull-up and scrolling loading); Sensible and imperceptible loads. With more and more applications using JavaScript technology to process on the client side, the performance of JavaScript in the browser has become the most important problem faced by developers. JavaScript performance optimization is complicated by the blocking feature of JavaScript, that is, when the browser executes JavaScript code, it cannot do other things at the same time, that is, other things will be blocked. Whether the current JavaScript code is embedded or in an external link file, the page download and rendering must stop and wait for the script execution to complete. The longer the JavaScript execution process takes, the longer the browser waits to respond to user input.

　　 5. CDN acceleration

Accelerating through CDN is a relatively high cost optimization method, so these optimization methods put it at the end of all optimization methods, but it is a very effective optimization scheme. The full name of CDN is Content Delivery Network, that is, content distribution network. CDN acceleration is mainly used to accelerate static resources, such as pictures and media uploaded on websites, as well as some Js, css and other imported files. CDN acceleration depends on various network nodes. For example, 100 CDN servers are distributed nationwide. When visiting from Shanghai, they will return resources from the nearest node, which is the core. The CDN server stores resources by caching or actively fetching the contents of the main server.

How to optimize website loading is undoubtedly very important for a mobile product, but performance is also an indispensable part of the user experience. When the user can open a mobile page and see the display of information in 1-2 seconds, or can start the next operation, the user will feel that the speed is acceptable; If the page becomes available after 2-5 seconds, the user's patience will gradually lose; If an interface is displayed for more than 5 seconds or more, users can't stand it. Maybe some users will quit and re-enter, but more users will give up using it directly. For website developers, improving the user experience is the core value of a website, and improving the loading speed of the website is the most basic user experience.