Web page first screen loading acceleration method and system, medium and equipment

Abstract

The invention provides a Web page first screen loading acceleration method and system, a medium and equipment, and relates to the technical field of Web front-end performance optimization and network transmission, the method comprises the following steps: after obtaining a request of a user for accessing a URL (Uniform Resource Locator), analyzing an HTML (Hypertext Markup Language) and constructing a DOM (Document Object Model) tree; marking first screen resources to obtain a first screen resource list; key resources are inserted into the head of the loading queue, and non-key resources are marked as defer; if the weak network is detected, degrading the picture quality; after the CSSOM is ready, text and layout are rendered immediately, and placeholders are replaced after pictures are asynchronously loaded; when the delay is high, switching to an edge CDN node or starting a QUIC protocol; and pre-fetching resources are predicted based on user behaviors, and the pre-fetching resources are stored in a Service Worker cache. According to the method, the first screen loading time can be shortened, the maximum content drawing time is shortened, the network transmission cost is saved, and the cache utilization efficiency is improved.

Description

Technical Field

[0001] This invention relates to the fields of web front-end performance optimization and network transmission technology, and in particular to a method, system, medium, and device for accelerating the first-screen loading of web pages. Background Technology

[0002] As web applications become increasingly complex, page load speed has become a key indicator affecting user experience. Common optimization techniques include: Resource compression and CDN acceleration: Compressing static resources using Gzip / Brotli and distributing them via CDN nodes reduces network transmission time. Lazy loading: Delaying the loading of non-first-screen images, videos, and other resources, prioritizing loading content in the visible area. HTTP / 2 multiplexing: Reducing TCP handshake overhead and improving concurrent request efficiency through single-connection multiplexing. Server-side rendering (SSR): Generating HTML content on the server side, reducing client-side rendering time. Preloading (Preload / Prefetch): ... <link rel="preload"> Tags preload critical resources. Google Lighthouse: Provides first-screen performance metrics (such as LCP, FCP) and optimization suggestions, but relies on developers to implement them manually.

[0003] However, the aforementioned existing technologies have the following problems: 1. Static optimization rules are inflexible: Existing preloading technologies (such as...) <link rel="preload"> 1. **Poor Performance in Weak Network Environments:** Traditional methods still cause initial screen rendering blockage in low-bandwidth (e.g., 3G) or high-latency (RTT>500ms) networks. They lack adaptive degradation strategies (e.g., replacing low-resolution images, delaying non-critical requests). 2. **Strong Coupling Between Rendering and Loading:** Browsers must wait for critical resources (e.g., CSS, JS) to fully load before rendering, resulting in perceived long delays for users. Existing technologies (e.g., SSR) can generate HTML in advance, but cannot solve the rendering efficiency problem of dynamic content on the client side. 3. **Low Cache Utilization:** Traditional caching strategies (e.g., strong caching, conditional caching) struggle to predict user behavior, leading to frequent duplicate requests. Prefetching techniques (e.g., ...) are less effective. <link rel="prefetch"> The lack of intelligence may waste bandwidth by pre-fetching useless resources.

[0004] The root cause of the above problems is that existing optimization solutions are mostly static rules or local optimizations, lacking dynamic adaptability and global dynamic perception of page structure, network status and user behavior. They cannot perform intelligent optimization based on real-time page content and network status, resulting in poor performance in complex scenarios (such as single-page applications, highly dynamic content) or weak network environments. Summary of the Invention

[0005] The purpose of this invention is to provide a method, system, medium, and device for accelerating the first-screen loading of web pages, aiming to shorten the first-screen loading time, shorten the maximum content rendering time, save network transmission costs, and improve cache utilization efficiency. The specific technical solution is as follows:

[0006] A method for accelerating the first-screen loading of a web page, the method comprising the following steps:

[0007] S100, Page Request and Parsing: After obtaining the user's URL request, parse the HTML and build the DOM tree; mark the resources on the first screen to obtain the list of resources on the first screen;

[0008] S200, Dynamic Priority Scheduling: Insert critical resources into the head of the loading queue and mark non-critical resources as defer; if a weak network is detected, downgrade the image quality and then proceed to step S300; if no weak network is detected, proceed directly to step S300.

[0009] S300, Parallel Pre-rendering: Renders text and layout immediately after CSSOM is ready, and replaces placeholders with images after they are loaded asynchronously;

[0010] S400, Network Optimization: When there is high latency, switch to an edge CDN node or enable the QUIC protocol;

[0011] S500 Predictive caching: Prefetches resources based on user behavior predictions and stores them in the Service Worker cache.

[0012] Furthermore, in step S100, the first screen resource list and dependency graph are obtained based on the HTML document, CSSOM tree and JS execution context by using MutationObserver to listen for DOM changes and combining it with IntersectionObserver to mark the first screen elements.

[0013] Furthermore, in step S200, the browser resource loading queue is dynamically modified by intercepting the fetch() request, inserting the Priority: high header, and using a technique of lazy loading of non-critical resources to prioritize loading critical resources.

[0014] Furthermore, in step S200, when a weak network is detected, a Low-Resolution placeholder map is enabled and non-critical AJAX requests are disabled.

[0015] Furthermore, in step S300, by using asynchronous rendering via requestIdleCallback and displaying low-resolution placeholders before image loading, the first screen content is rendered in chunks after the DOMContentLoaded event is triggered.

[0016] Furthermore, in step S400, the navigator.connection API is monitored in real time, and when there is high latency, the system dynamically switches to an edge CDN node or enables the QUIC protocol.

[0017] Furthermore, in step S500, resources are pre-fetched based on user behavior prediction and stored in the Service Worker cache by analyzing the user click flow and pre-storing resources under the / product / * path.

[0018] This invention also provides a web page first-screen loading acceleration system, comprising:

[0019] The resource analysis module is used to obtain the user's request for the URL, parse the HTML and build the DOM tree; mark the resources on the first screen to obtain the list of resources on the first screen;

[0020] The priority scheduling module is used to insert critical resources at the head of the loading queue and mark non-critical resources as defer.

[0021] A pre-rendering engine is used to render text and layout immediately after CSSOM is ready, and replace placeholders with images after they are loaded asynchronously;

[0022] The network adaptation module is used to degrade image quality when a weak network is detected, and to switch to an edge CDN node or enable the QUIC protocol when there is high latency.

[0023] Cache optimization module: Used to predict and prefetch resources based on user behavior and store them in the Service Worker cache.

[0024] The present invention also provides a computer-readable storage medium having a computer program stored thereon, characterized in that, when the computer program is executed by a processor, it implements the steps of the Web page first-screen loading acceleration method as described above.

[0025] The present invention also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that the processor executes the program to implement the steps of the Web page first-screen loading acceleration method as described above.

[0026] The present invention provides a method, system, medium, and device for accelerating the first-screen loading of web pages, which has the following beneficial effects:

[0027] This invention achieves a significant reduction in first-screen loading time compared to traditional methods, exceeding 40%, and reaching up to 60% in weak network environments. This drastically reduces the time users spend waiting for the first-screen content to appear. Maximum content rendering success is optimized to within 1 second, ensuring users quickly see complete and stable first-screen content and significantly improving the perceived smoothness. From a cost control perspective, CDN bandwidth costs are reduced by 30%, effectively saving network transmission fees. The maximum content rendering success time is optimized to within 1 second, allowing users to quickly see complete and stable first-screen content while browsing the page, significantly improving the perceived smoothness. From a cost control perspective, CDN bandwidth costs are reduced by 30%, effectively saving network transmission fees. If a weak network is detected, image quality is downgraded before proceeding to the next step; if no weak network is detected, the process proceeds directly to the next step. Parallel pre-rendering occurs immediately after CSSOM is ready, rendering text and layout, and replacing placeholders after asynchronous image loading. Network optimization occurs when high latency is detected, switching to edge CDN nodes or enabling the QUIC protocol. Predictive caching occurs based on user behavior predictions, pre-fetching resources and storing them in the Service Worker cache. In terms of caching, the cache hit rate has been improved to 85%, which significantly reduces duplicate requests, improves resource utilization efficiency, and brings users a more efficient and smoother web browsing experience. Attached Figure Description

[0028] Figure 1 This is a flowchart illustrating a method for accelerating the first-screen loading of a web page provided by the present invention;

[0029] Figure 2 This is a general flowchart of an embodiment of the present invention;

[0030] Figure 3 This is a block diagram of a web page first-screen loading acceleration system provided by the present invention;

[0031] Figure 4 This is a structural block diagram of a computer device according to an embodiment of the present invention. Detailed Implementation

[0032] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. The advantages and features of the present invention will become clearer from the following description. It should be noted that the drawings are all in a very simplified form and use non-precise proportions, and are only used to facilitate and clearly illustrate the purpose of the embodiments of the present invention.

[0033] Example 1

[0034] This embodiment provides a method for accelerating the first-screen loading of a web page. (See attached document.) Figure 1 ,2 As shown, the method includes the following steps:

[0035] S100, Page Request and Parsing: After obtaining the user's request for the URL, parse the HTML and build the DOM tree; mark the resources on the first screen to obtain the list of resources on the first screen.

[0036] In one embodiment, the first-screen resource list and dependency graph are obtained based on the HTML document, CSSOM tree, and JS execution context by using MutationObserver to listen for DOM changes and combining it with IntersectionObserver to mark the first-screen elements.

[0037] In one embodiment, the first-screen resources include in-viewport images and core CSS.

[0038] S200, Dynamic Priority Scheduling: Insert critical resources into the head of the loading queue, and mark non-critical resources (such as / analytics.js) as defer; if a weak network is detected, downgrade the image quality, and then proceed to step S300; if no weak network is detected, proceed directly to step S300.

[0039] In one embodiment, the browser's resource loading queue is dynamically modified by intercepting fetch() requests and inserting a Priority: high header to delay the loading of non-critical resources, thus prioritizing the loading of critical resources.

[0040] In one embodiment, when a weak network is detected, a Low-Resolution placeholder map is enabled and non-critical AJAX requests are disabled.

[0041] In this embodiment, relying on the IntersectionObserver and DOM deep analysis technology, the system can accurately and automatically identify key resources on the first screen. This process covers images displayed on the first screen, core CSS and JS files that play a crucial role in page style and interaction, etc. Based on resource identification, a resource dependency graph is further constructed. By sorting out the interdependencies between resources, the system can dynamically adjust the loading priority of resources according to the actual situation, ensuring that important resources are loaded first, and guaranteeing that the content on the first screen can be presented to the user quickly and completely.

[0042] S300, Parallel Pre-rendering: Renders text and layout immediately after CSSOM is ready, and replaces placeholders after images are loaded asynchronously.

[0043] In one embodiment, the first screen content is rendered in chunks after the DOMContentLoaded event is triggered by using asynchronous rendering via requestIdleCallback and displaying low-resolution placeholders before the image is loaded.

[0044] In this embodiment, once the DOM and CSSOM are ready, the system immediately begins rendering the initial text and layout. Simultaneously, media resources such as images are loaded asynchronously. During rendering, the `requestIdleCallback` function allows the system to process rendering tasks in chunks. This ensures that rendering tasks are executed when the browser's main thread is idle, effectively avoiding blocking the main thread, guaranteeing smooth page rendering, and allowing users to see the initial content faster.

[0045] S400, Network Optimization: When there is high latency (e.g., RTT>500ms), switch to an edge CDN node or enable the QUIC protocol.

[0046] In one embodiment, the navigator.connection API is monitored in real time, and in case of high latency, the system dynamically switches to an edge CDN node or enables the QUIC protocol.

[0047] In this embodiment, the system has the ability to monitor network status in real time, continuously acquiring key parameters such as network bandwidth, latency, and packet loss rate. Based on this real-time data, the system can intelligently and dynamically adjust loading strategies. Taking a low-bandwidth, high-latency network environment like 3G as an example, the system will automatically reduce the resolution of non-critical images, significantly reducing data transmission while ensuring basic image display quality, thus accelerating page loading speed. Furthermore, for non-critical resources such as advertising scripts that may affect loading speed, the system will choose to delay loading to avoid blocking the initial screen rendering when network conditions are poor.

[0048] S500 Predictive caching: Prefetches resources based on user behavior predictions and stores them in the Service Worker cache.

[0049] In one embodiment, resources are pre-fetched based on user behavior prediction and stored in the Service Worker cache by analyzing the user clickstream and pre-storing resources under the / product / * path.

[0050] In this embodiment, through in-depth analysis of user behavior, such as using click heatmaps to understand user click preferences and high-frequency operation paths, the system can pre-fetch resources on frequently accessed paths. For example, resources related to pages linked by frequently clicked "next page" links are retrieved and stored in advance. Simultaneously, leveraging Service Worker technology, the system implements offline caching, allowing users to quickly access cached page content even offline. Furthermore, Service Worker supports intelligent pre-fetching, accurately pre-fetching potentially needed resources based on user behavior and browsing patterns, further improving page loading speed.

[0051] The web page first-screen loading acceleration method provided by this invention achieves the following through page request and parsing: after obtaining the user's access URL request, the HTML is parsed and a DOM tree is constructed; first-screen resources are marked to obtain a first-screen resource list; dynamic priority scheduling: critical resources are inserted at the head of the loading queue, and non-critical resources are marked as defer; if a weak network is detected, the image quality is downgraded, and then proceeds to the next step; if no weak network is detected, the process proceeds directly to the next step; parallel pre-rendering: text and layout are rendered immediately after CSSOM is ready, and placeholders are replaced after images are loaded asynchronously; network optimization: in case of high latency, switching to edge CDN nodes or enabling the QUIC protocol; predictive caching: resources are pre-fetched based on user behavior prediction and stored in the Service Worker cache; thus, the first-screen loading time (FCP) can be reduced by more than 40% compared to traditional loading methods, and this improvement is as high as 60% in weak network environments, greatly reducing the time users wait for the first-screen content to appear. The maximum content rendering (LCP) is successfully optimized to within 1 second, allowing users to quickly see complete and stable first-screen content when browsing the page, significantly improving the user's perceived smoothness. From a cost control perspective, CDN reduces bandwidth costs by 30%, effectively saving network transmission expenses. Regarding caching, the cache hit rate increases to 85%, significantly reducing duplicate requests, improving resource utilization efficiency, and providing users with a more efficient and smoother web browsing experience.

[0052] Example 2

[0053] This embodiment provides a web page first-screen loading acceleration system, see below. Figure 3 As shown, it includes:

[0054] The resource analysis module is used to obtain the user's URL request, parse the HTML and construct the DOM tree; it also marks the resources on the first screen to obtain a list of resources for that screen. Specifically, the resource analysis module uses MutationObserver to listen for DOM changes and IntersectionObserver to mark the elements on the first screen to obtain the list of resources and dependency graphs for the first screen based on the HTML document, the CSSOM tree, and the JS execution context.

[0055] The priority scheduling module is used to insert critical resources at the head of the loading queue and mark non-critical resources as defer. Specifically, the priority scheduling module dynamically modifies the browser's resource loading queue by intercepting fetch() requests, inserting a Priority: high header, and using a technique of lazy loading of non-critical resources, thus prioritizing the loading of critical resources.

[0056] The pre-rendering engine renders text and layout immediately after CSSOM is ready, replacing placeholders with images loaded asynchronously. Specifically, the pre-rendering engine uses asynchronous rendering via requestIdleCallback and displays low-resolution placeholders before images load to render the initial screen content in chunks after the DOMContentLoaded event is triggered.

[0057] The network adaptation module is used to degrade image quality when weak network conditions are detected, and to switch to an edge CDN node or enable the QUIC protocol when high latency is detected. Specifically, when the network adaptation module detects a weak network, it enables a Low-Resolution placeholder image and disables non-critical AJAX requests; the network adaptation module monitors the navigator.connection API in real time, and dynamically switches to an edge CDN node or enables the QUIC protocol when high latency is detected.

[0058] The cache optimization module is used to predict and prefetch resources based on user behavior and store them in the Service Worker cache. Specifically, the cache optimization module analyzes the user clickstream and uses a technique to predict and prefetch resources under the / product / * path to store them in the Service Worker cache based on user behavior.

[0059] Example 3

[0060] This embodiment provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the Web page first-screen loading acceleration method described above.

[0061] The storage medium may be a magnetic disk, optical disk, read-only memory (ROM), random access memory (RAM), flash memory, hard disk drive (HDD), or solid-state drive (SSD), etc.; the storage medium may also include combinations of the above types of memory.

[0062] Example 4

[0063] This embodiment provides a computer device 70, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the steps of the Web page first-screen loading acceleration method described above.

[0064] like Figure 4 As shown, the computer device may include: at least one processor 71, such as a CPU (Central Processing Unit), at least one communication interface 73, memory 74, and at least one communication bus 72. The communication bus 72 is used to enable communication between these components. The communication interface 73 may include a display screen and a keyboard; optionally, the communication interface 73 may also include a standard wired interface or a wireless interface. The memory 74 may be high-speed RAM (Random Access Memory) or non-volatile memory, such as at least one disk storage device. Optionally, the memory 74 may also be at least one storage device located remotely from the aforementioned processor 71. The memory 74 stores application programs, and the processor 71 calls the program code stored in the memory 74 to execute any of the above-described method steps.

[0065] The communication bus 72 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The communication bus 72 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 4 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0066] The memory 74 may include volatile memory, such as random-access memory (RAM); the memory may also include non-volatile memory, such as flash memory, hard disk drive (HDD) or solid-state drive (SSD); the memory 74 may also include a combination of the above types of memory.

[0067] The processor 71 can be a central processing unit (CPU), a network processor (NP), or a combination of CPU and NP.

[0068] The processor 71 may further include a hardware chip. This hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The PLD may be a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.

[0069] Optionally, the memory 74 is also used to store program instructions. The processor 71 can invoke the program instructions to implement the web page first-screen loading acceleration method of the present invention.

[0070] Those skilled in the art should understand that the present invention can be implemented in many other specific forms without departing from the spirit and scope of the invention. Any changes or modifications made by those skilled in the art based on the embodiments of the present invention and the above disclosure shall fall within the protection scope of the claims.

Claims

1. A method for accelerating the first-screen loading of a web page, characterized in that, The method includes the following steps: S100, Page Request and Parsing: After obtaining the user's URL request, parse the HTML and build the DOM tree; mark the resources on the first screen to obtain the list of resources on the first screen; S200, Dynamic Priority Scheduling: Insert critical resources into the head of the loading queue and mark non-critical resources as defer; if a weak network is detected, downgrade the image quality and then proceed to step S300; if no weak network is detected, proceed directly to step S300. S300, Parallel Pre-rendering: Renders text and layout immediately after CSSOM is ready, and replaces placeholders with images after they are loaded asynchronously; S400, Network Optimization: When there is high latency, switch to an edge CDN node or enable the QUIC protocol; S500 Predictive caching: Prefetches resources based on user behavior predictions and stores them in the Service Worker cache.

2. The method for accelerating the first screen loading of a web page according to claim 1, characterized in that, In step S100, the MutationObserver is used to listen for DOM changes, and the IntersectionObserver is used to mark the first screen elements to obtain the first screen resource list and dependency graph based on the HTML document, CSSOM tree and JS execution context.

3. The method for accelerating the first-screen loading of a web page according to claim 1, characterized in that, In step S200, the browser's resource loading queue is dynamically modified by intercepting the fetch() request, inserting the Priority: high header, and using a technique of lazy loading of non-critical resources, so as to prioritize loading critical resources.

4. The method for accelerating the first screen loading of a web page according to claim 1, characterized in that, In step S200, when a weak network is detected, a Low-Resolution placeholder map is enabled and non-critical AJAX requests are disabled.

5. The method for accelerating the first screen loading of a web page according to claim 1, characterized in that, In step S300, the first screen content is rendered in chunks after the DOMContentLoaded event is triggered by using asynchronous rendering via requestIdleCallback and displaying low-resolution placeholders before the image is loaded.

6. The method for accelerating the first screen loading of a web page according to claim 2, characterized in that, In step S400, the navigator.connection API is monitored in real time, and when there is high latency, the system dynamically switches to an edge CDN node or enables the QUIC protocol.

7. The method for accelerating the first screen loading of a web page according to claim 1, characterized in that, In step S500, resources are pre-fetched based on user behavior prediction and stored in the Service Worker cache by analyzing the user click flow and pre-storing resources under the / product / * path.

8. A web page first-screen loading acceleration system, characterized in that, include: The resource analysis module is used to obtain the user's request for the URL, parse the HTML, and build the DOM tree; Mark the resources on the first screen to get the list of resources on the first screen; The priority scheduling module is used to insert critical resources at the head of the loading queue and mark non-critical resources as defer. A pre-rendering engine is used to render text and layout immediately after CSSOM is ready, and replace placeholders with images after they are loaded asynchronously; The network adaptation module is used to degrade image quality when a weak network is detected, and to switch to an edge CDN node or enable the QUIC protocol when there is high latency. Cache optimization module: Used to predict and prefetch resources based on user behavior and store them in the Service Worker cache.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the Web page first-screen loading acceleration method as described in any one of claims 1-8.

10. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the Web page first-screen loading acceleration method as described in any one of claims 1-8.

Images