Method and device for optimizing web page loading speed

Abstract

The invention provides a web page loading speed optimization method and device, and the method comprises the steps: carrying out the optimization of a network layer, so as to reduce the network delay and server load; static resources are optimized to reduce the resource volume and the loading time; and browser rendering is optimized, so that the page rendering efficiency and the user experience are improved. The web page loading speed optimization method and device have the advantages that through intelligent network acceleration, refined resource management and user perception oriented rendering optimization, the page loading time can be effectively shortened, and the user access speed is increased; and the access frequency and the update frequency of the resources are intelligently predicted by using a machine learning algorithm, and the cache strategy is dynamically adjusted, so that the cache hit rate can be effectively improved, the network request times are reduced, and the page loading speed is further improved.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and in particular relates to a method and device for optimizing web page loading speed. Background Art

[0002] Currently, users have increasingly higher requirements for web page loading speed. Studies have shown that web page loading speed is one of the key factors affecting user experience.

[0003] Slow loading speed will lead to user dissatisfaction and increased bounce rate, which will ultimately cause a decrease in website visits and revenue. In the highly competitive Internet environment, the quality of website performance directly affects user choice and retention. High-performance websites can bring significant competitive advantages, including improving user experience, increasing user stickiness and improving conversion rates. Summary of the invention

[0004] In view of this, the present invention aims to provide a method and device for optimizing web page loading speed, so as to at least solve one problem in the background technology.

[0005] To achieve the above object, the technical solution of the present invention is achieved as follows:

[0006] A method for optimizing web page loading speed, comprising:

[0007] Optimize the network layer to reduce network latency and server load;

[0008] Optimize static resources to reduce resource size and loading time;

[0009] Optimize browser rendering to improve page rendering efficiency and user experience.

[0010] Furthermore, the network layer optimization is used to reduce network delay and server load, including HTTP request control method:

[0011] Dynamically adjust the number and priority of HTTP requests based on network conditions and device performance, including: loading key resources first and delaying loading non-key resources in a weak network environment; loading more resources sequentially and in parallel on high-performance devices;

[0012] Use machine learning models to predict user behavior and network conditions, preload resources that users may need, predict the link that users may click next based on their browsing history and current page content, and preload the corresponding page resources.

[0013] Furthermore, the network layer optimization is used to reduce network latency and server load, including a server optimization method:

[0014] Migrate image compression and code compression functions in the server to edge nodes to reduce data transmission delay and server load;

[0015] Leverage the computing power of edge nodes to analyze and process user requests in real time, including dynamically adjusting CDN nodes, caching strategies, and Gzip compression levels based on user geographic location, device type, and network conditions.

[0016] Furthermore, the network layer optimization is used to reduce network latency and server load, including: dynamically adjusting the cache strategy by predicting the access frequency and update frequency of resources, and customizing the cache strategy according to user behavior and network environment.

[0017] Furthermore, the access frequency and update frequency of the predicted resource are used to dynamically adjust the cache strategy, including:

[0018] Firstly, LSTM is used to predict the access frequency f and update frequency u of resources. The resource type, historical access frequency, historical update frequency, time characteristics and historical Web server log data are extracted to train the LSTM model to predict the access frequency and update frequency of resources in the future.

[0019] Then, set the cache scoring function F(f,u) to comprehensively evaluate the cache value of the resource. The higher the value of this function, the more suitable the resource is for caching:

[0020] F(f,u)=w1*log(f)-w2*u;

[0021] in,

[0022] F is the access frequency of the resource;

[0023] u is the update frequency of the resource;

[0024] w1 and w2 are weight coefficients, which are used to adjust the influence of access frequency and update frequency on cache score;

[0025] Then, a cache time function T(F) and a cache verification frequency function V(F) are designed to calculate the cache time and cache verification frequency according to the cache score, where:

[0026] T(F)=T_min+(T_max-T_min)*sigmoid(a*(Fb));

[0027] V(F)=V_max-(V_max-V_min)*sigmoid(c*(Fd));

[0028] in,

[0029] T is the cache time in seconds;

[0030] V is the cache verification frequency in seconds;

[0031] T_min and T_max are the minimum and maximum cache times respectively;

[0032] V_min and V_max are the minimum and maximum cache validation frequencies, respectively;

[0033] sigmoid(x) is the sigmoid function used to map cache scores to values ​​between 0 and 1;

[0034] a, b, c, and d are parameters used to adjust the shape and value range of the function;

[0035] Then, use the trained LSTM model to predict the access frequency (f) and update frequency (u) of the resource, calculate the cache score F(f,u) of the resource, and calculate the cache time T(F) and cache verification frequency V(F) based on the cache score. Use the HTTP cache control header to set the cache policy, set the cache verification frequency based on V(F), and use a scheduled task to periodically verify whether the cache is expired:

[0036] Cache-Control: public, max-age=T(F), s-maxage=T(F).

[0037] Furthermore, the optimization of static resources to reduce resource size and loading time includes:

[0038] The image is optimized based on the user's visual perception characteristics, including compressing details that are not sensitive to the human eye and retaining more details in important visual areas.

[0039] Furthermore, the browser rendering optimization is used to improve page rendering efficiency and user experience, including:

[0040] Based on user behavior and page content, predict the user's next possible action and preload related resources;

[0041] Prioritize rendering of content within the user's viewport, delay rendering of content outside the viewport, and adjust rendering priority based on the importance of the content.

[0042] Furthermore, the present solution discloses an electronic device, including a processor and a memory connected to the processor for storing instructions executable by the processor, wherein the processor is used to execute a method for optimizing the loading speed of a web page.

[0043] Furthermore, the present solution discloses a server, comprising at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes a method for optimizing the web page loading speed.

[0044] Furthermore, the present solution discloses a computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor, implements a method for optimizing web page loading speed.

[0045] Compared with the prior art, the method and device for optimizing web page loading speed described in the present invention have the following beneficial effects:

[0046] (1) A web page loading speed optimization method and device described in the present invention can effectively reduce page loading time and improve user access speed through intelligent network acceleration, refined resource management and user perception-oriented rendering optimization;

[0047] (2) The web page loading speed optimization method and device described in the present invention utilizes a machine learning algorithm to intelligently predict the access frequency and update frequency of resources and dynamically adjust the cache strategy, which can effectively improve the cache hit rate, reduce the number of network requests, and further improve the page loading speed;

[0048] (3) The web page loading speed optimization method and device described in the present invention is centered on user perception and optimizes the browser rendering process, such as predictive preloading, rendering priority based on visual perception, smooth interactive experience, etc., which can provide users with a smoother and faster browsing experience;

[0049] (4) The method and device for optimizing the web page loading speed described in the present invention can effectively save bandwidth resources and reduce network transmission costs by reducing the number of HTTP requests, compressing file size, optimizing cache strategies, etc. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0051] Figure 1 A schematic diagram of a strong cache strategy according to an embodiment of the present invention;

[0052] Figure 2 A schematic diagram of a negotiation cache strategy according to an embodiment of the present invention;

[0053] Figure 3-1A schematic diagram of a cache strategy example 1 according to an embodiment of the present invention;

[0054] Figure 3-2 This is a schematic diagram of a second cache strategy example according to an embodiment of the present invention;

[0055] Figure 4 This is a schematic diagram of gzip compression according to an embodiment of the present invention;

[0056] Figure 5 This is a schematic diagram of CDN cache according to an embodiment of the present invention;

[0057] Figure 6 This is a schematic diagram of JS loading optimization described in an embodiment of the present invention. DETAILED DESCRIPTION

[0058] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.

[0059] The present invention will be described in detail below with reference to the accompanying drawings and in conjunction with embodiments.

[0060] This solution discloses a method and device for optimizing web page loading speed. In the first embodiment, the solution is as follows:

[0061] A method for optimizing web page loading speed, comprising:

[0062] Optimize the network layer to reduce network latency and server load;

[0063] Optimize static resources to reduce resource size and loading time;

[0064] Optimize browser rendering to improve page rendering efficiency and user experience.

[0065] Furthermore, the network layer optimization is used to reduce network delay and server load, including HTTP request control method:

[0066] Dynamically adjust the number and priority of HTTP requests based on network conditions and device performance, including: loading key resources first and delaying loading non-key resources in a weak network environment; loading more resources sequentially and in parallel on high-performance devices;

[0067] Use machine learning models to predict user behavior and network conditions, preload resources that users may need, predict the link that users may click next based on their browsing history and current page content, and preload the corresponding page resources.

[0068] Furthermore, the network layer optimization is used to reduce network latency and server load, including a server optimization method:

[0069] Migrate image compression and code compression functions in the server to edge nodes to reduce data transmission delay and server load;

[0070] Leverage the computing power of edge nodes to analyze and process user requests in real time, including dynamically adjusting CDN nodes, caching strategies, and Gzip compression levels based on user geographic location, device type, and network conditions.

[0071] Furthermore, the network layer optimization is used to reduce network latency and server load, including: dynamically adjusting the cache strategy by predicting the access frequency and update frequency of resources, and customizing the cache strategy according to user behavior and network environment.

[0072] Furthermore, the access frequency and update frequency of the predicted resource are used to dynamically adjust the cache strategy, including:

[0073] Firstly, LSTM is used to predict the access frequency f and update frequency u of resources. The resource type, historical access frequency, historical update frequency, time characteristics and historical Web server log data are extracted to train the LSTM model to predict the access frequency and update frequency of resources in the future.

[0074] Then, set the cache scoring function F(f,u) to comprehensively evaluate the cache value of the resource. The higher the value of this function, the more suitable the resource is for caching:

[0075] F(f,u)=w1*log(f)-w2*u;

[0076] in,

[0077] F is the access frequency of the resource;

[0078] u is the update frequency of the resource;

[0079] w1 and w2 are weight coefficients, which are used to adjust the influence of access frequency and update frequency on cache score;

[0080] Then, a cache time function T(F) and a cache verification frequency function V(F) are designed to calculate the cache time and cache verification frequency according to the cache score, where:

[0081] T(F)=T_min+(T_max-T_min)*sigmoid(a*(Fb));

[0082] V(F)=V_max-(V_max-V_min)*sigmoid(c*(Fd));

[0083] in,

[0084] T is the cache time in seconds;

[0085] V is the cache verification frequency in seconds;

[0086] T_min and T_max are the minimum and maximum cache times respectively;

[0087] V_min and V_max are the minimum and maximum cache validation frequencies, respectively;

[0088] sigmoid(x) is the sigmoid function used to map cache scores to values ​​between 0 and 1;

[0089] a, b, c, and d are parameters used to adjust the shape and value range of the function;

[0090] Then, use the trained LSTM model to predict the access frequency (f) and update frequency (u) of the resource, calculate the cache score F(f,u) of the resource, and calculate the cache time T(F) and cache verification frequency V(F) based on the cache score. Use the HTTP cache control header to set the cache policy, set the cache verification frequency based on V(F), and use a scheduled task to periodically verify whether the cache is expired:

[0091] Cache-Control: public, max-age=T(F), s-maxage=T(F).

[0092] Furthermore, the optimization of static resources to reduce resource size and loading time includes:

[0093] The image is optimized based on the user's visual perception characteristics, including compressing details that are not sensitive to the human eye and retaining more details in important visual areas.

[0094] Furthermore, the browser rendering optimization is used to improve page rendering efficiency and user experience, including:

[0095] Based on user behavior and page content, predict the user's next possible action and preload related resources;

[0096] Prioritize rendering of content within the user's viewport, delay rendering of content outside the viewport, and adjust rendering priority based on the importance of the content.

[0097] In another embodiment, Figures 1 to 6 As shown, in the first aspect, the embodiment of the present application provides an optimization strategy at the network level, including:

[0098] Reduce the number of HTTP requests, merge JavaScript and CSS, and properly embed JavaScript and CSS;

[0099] Reasonably set the server cache to improve the server processing speed, including strong cache strategy and negotiated cache strategy;

[0100] Avoid redirects, which slow down the response of web pages.

[0101] Use dns-prefetch to resolve domain names before requesting resources, helping developers mask DNS resolution delays;

[0102] CDN technology is used to build a content distribution network, which directs user access to the streaming media server closest to the user and works normally. The streaming media server directly responds to the user's request.

[0103] Use gzip compression optimization to compress the volume of transmitted static files JavaScript, CSS, and HTML;

[0104] Load data priority, pre-request resources needed for the current page, and cache resources used in future pages into the HTTP cache.

[0105] In the second aspect, the embodiment of the present application provides an optimization strategy for static resource files, including: HTML optimization; CSS optimization; JavaScript optimization, the specific scheme is as follows:

[0106] Network level optimization settings steps:

[0107] Figure 2 , Figure 3-2 This is a cache strategy provided in an embodiment of the present invention. As shown in the figure, by setting the Cache-Control: no-cache field value on the server, the browser requests a resource from the server for the first time. When the server returns the resource, it adds Cache-Control to the header of the response. After receiving the resource, the browser will cache the resource together with all response headers. When refreshing the web page again, the resource will be read from the memory cache or the disk cache, so that data can be accessed faster.

[0108] Figure 4 The gzip compression is enabled in the embodiment of the present invention. Figure 3-1 As shown in the figure, by setting gzip compression on the server side, we can see through the Content-Length field that the file size of static resources is reduced, which effectively reduces the pressure of network traffic and shortens the transmission time.

[0109] Figure 5It is the CDN caching technology used in the embodiment of the present invention. The user submits a domain name, the browser resolves the domain name, the CDN domain name server returns the CNAME record of the specified domain name, the cache server obtains the real host address through the internal DNS, sends a request to the real host, and returns the request to the client, re-parses the CNAME record, sends an access request based on the IP address, obtains the address of the CDN cache server, and the client browser obtains the request data and echoes it.

[0110] Additionally, use the DNS pre-resolution dns-prefetch technique and add something like the following to the HTML tag: <link> element: <link rel＝"dns-prefetch"href＝" example.com"> , it can reduce the time of domain name resolution before the browser renders the page and effectively improve the user experience.

[0111] Static resource file optimization points:

[0112] First, we optimize the HTML structure of the page. We use semantic tags to make the code concise and clear, which is beneficial to search engines and convenient for team development. We declare character encoding in advance so that the browser can quickly determine how to render the page content. We reduce the nested relationship of HTML and the number of DOM nodes. We delete extra spaces, blank lines, comments and useless attributes. We reduce the use of iframes. We avoid using table layout.

[0113] Secondly, optimize the CSS for page presentation, reduce pseudo-class selectors, reduce style levels, and reduce the use of wildcards; avoid using CSS expressions, which are frequently evaluated and recalculated when the page is scrolled or the mouse is moved; delete blank lines and comments, reduce meaningless units, and compress CSS; use external CSS to cache CSS; add a media field by setting media="screen and(min-width:1024px)" to only load valid CSS files; reduce the use of @import because @import is loaded serially;

[0114] The third is to optimize JavaScript for behavior, such as Figure 6As shown in the figure, JavaScript files are asynchronously loaded through async and defer to avoid blocking the parsing and rendering of DOM; DOM operations are reduced and visited elements are cached; operations are not applied directly to DOM, but to virtual DOM, and finally applied to DOM at one time; elements in the visible area are displayed by lazy loading to ensure that the loading is fast enough when users need resources, and to avoid users seeing blank pages too early; because each event handler is an object, objects will occupy memory, and the more objects in memory, the worse the performance of the page. In addition, event handlers need to interact with DOM nodes. The more times the DOM is accessed, the more times the browser is redrawn and rearranged, which affects the performance of the page. Therefore, event delegation is used to reduce the number of event bindings, thereby improving the overall performance of the page; try to use canvas animation, CSS animation, etc.

[0115] Those of ordinary skill in the art will appreciate that the units and method steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0116] In the several embodiments provided in the present application, it should be understood that the disclosed methods and systems can be implemented in other ways. For example, the division of the units described above is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. The above-mentioned units may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiments of the present invention.

[0117] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and specification of the present invention.

[0118] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for optimizing web page loading speed, characterized in that: include: Optimize the network layer to reduce network latency and server load; Optimize static resources to reduce resource size and loading time; Optimize browser rendering to improve page rendering efficiency and user experience.

2. A method for optimizing web page loading speed according to claim 1, characterized in that: The network layer optimization is used to reduce network latency and server load, including HTTP request control methods: Dynamically adjust the number and priority of HTTP requests based on network conditions and device performance, including: loading key resources first and delaying loading non-key resources in a weak network environment; loading more resources sequentially and in parallel on high-performance devices; Use machine learning models to predict user behavior and network conditions, preload resources that users may need, predict the link that users may click next based on their browsing history and current page content, and preload the corresponding page resources.

3. A method for optimizing web page loading speed according to claim 1, characterized in that: The network layer optimization is used to reduce network latency and server load, including server optimization methods: Migrate image compression and code compression functions in the server to edge nodes to reduce data transmission delay and server load; Leverage the computing power of edge nodes to analyze and process user requests in real time, including dynamically adjusting CDN nodes, caching strategies, and Gzip compression levels based on user geographic location, device type, and network conditions.

4. A method for optimizing web page loading speed according to claim 1, characterized in that: The network layer optimization is used to reduce network latency and server load, including: dynamically adjusting the cache strategy by predicting the access frequency and update frequency of resources, and customizing the cache strategy according to user behavior and network environment.

5. A method for optimizing web page loading speed according to claim 4, characterized in that: The access frequency and update frequency of the predicted resource are used to dynamically adjust the cache strategy, including: Firstly, LSTM is used to predict the access frequency f and update frequency u of resources. The resource type, historical access frequency, historical update frequency, time characteristics and historical Web server log data are extracted to train the LSTM model to predict the access frequency and update frequency of resources in the future. Then, set the cache scoring function F(f,u) to comprehensively evaluate the cache value of the resource. The higher the value of this function, the more suitable the resource is for caching: F(f,u)=w1*log(f)-w2*u; in, F is the access frequency of the resource; u is the update frequency of the resource; w1 and w2 are weight coefficients, which are used to adjust the influence of access frequency and update frequency on cache score; Then, a cache time function T(F) and a cache verification frequency function V(F) are designed to calculate the cache time and cache verification frequency according to the cache score, where: T(F)=T_min+(T_max-T_min)*sigmoid(a*(Fb)); V(F)=V_max-(V_max-V_min)*sigmoid(c*(Fd)); in, T is the cache time in seconds; V is the cache verification frequency in seconds; T_min and T_max are the minimum and maximum cache times respectively; V_min and V_max are the minimum and maximum cache validation frequencies, respectively; sigmoid(x) is the sigmoid function used to map cache scores to values ​​between 0 and 1; a, b, c, and d are parameters used to adjust the shape and value range of the function; Then, use the trained LSTM model to predict the access frequency (f) and update frequency (u) of the resource, calculate the cache score F(f,u) of the resource, and calculate the cache time T(F) and cache verification frequency V(F) based on the cache score. Use the HTTP cache control header to set the cache policy, set the cache verification frequency based on V(F), and use a scheduled task to periodically verify whether the cache is expired: Cache-Control: public, max-age=T(F), s-maxage=T(F).

6. A method for optimizing web page loading speed according to claim 1, characterized in that: The optimization of static resources is used to reduce resource size and loading time, including: Optimize images based on the user's visual perception characteristics, including compressing details that are not sensitive to the human eye and retaining more details in important visual areas.

7. A method for optimizing web page loading speed according to claim 1, characterized in that: The browser rendering optimization is used to improve page rendering efficiency and user experience, including: Based on user behavior and page content, predict the user's next possible action and preload related resources; Prioritize rendering of content within the user's viewport, delay rendering of content outside the viewport, and adjust rendering priority based on the importance of the content.

8. An electronic device, comprising a processor and a memory connected to the processor for storing instructions executable by the processor, characterized in that: The processor is used to execute a method for optimizing web page loading speed as described in any one of claims 1-7 above.

9. A server, characterized in that: It includes at least one processor and a memory that is communicatively connected to the processor, wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes a method for optimizing web page loading speed as described in any one of claims 1-7.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for optimizing the web page loading speed according to any one of claims 1 to 7 is implemented.

Images