TW202524335A - Web font loading optimization method and system - Google Patents

Abstract

A web font loading optimization method and system are provided. The method involves requesting a webpage and related resources from a web server, downloading a web font script, determining the character set and font information the webpage requires, and using a hash algorithm to generate a hash value based on this information. This hash value is then used to request a corresponding font subset from a web font server. If a font subset is returned, it is applied to the webpage. If not, the web font server generates a new font subset, applies it to the webpage, and stores the hash value for future use. The system includes a web server, a web font script, a web browser, a hash module, and a web font server configured to perform these steps. The patent aims to improve webpage loading speed and overall user experience by reducing redundant font subset generation.

Description

Web page font loading optimization method and system

The present invention relates generally to web page development and, more particularly, to a method and system for optimizing web page font loading in a web browser.

In modern web development, web fonts have become an important part of website design, making the user experience more visually appealing and personalized. However, using web fonts also brings its own set of challenges, especially in terms of loading speed and performance. Traditional web font loading methods may slow down web page rendering, have a negative impact on user experience, and may increase bounce rate. In the patent I427534, the web font loading method disclosed includes the following steps: 1. The user's browser requests web page resources from the target web server. 2. The web server downloads the web page and related resources, including a web font script, to the user's browser. 3. After downloading, the web font script runs and determines the character set required for the web page. 4. The web font script requests the required font subset from the web font server. 5. The web font server generates the required font subset upon receiving the request. 6. The web font server sends the address of the generated font subset to the user's browser. 7. The user's browser applies the font subset to the web page text based on the received address. Although this approach works, it has several disadvantages. For example, the web font server must regenerate the font subset every time the web page is loaded, even if the content has not changed, resulting in unnecessary computational overhead and increased loading time. This approach is particularly inefficient for static websites whose content remains unchanged across multiple visits.

Therefore, one of the purposes of the present invention is to mainly solve the problem of inefficiency and redundancy in the traditional web font loading process. Specifically, the present invention aims to optimize the process by reducing redundant font subset generation, thereby improving web page loading speed and overall user experience. Based on the above and other purposes, the present invention proposes a novel method and system for optimizing web font loading in a web browser, thereby improving the efficiency of web page rendering and improving the overall user experience. The invention solves the limitations of traditional web font loading technology by introducing a hashing mechanism that eliminates the need for redundant font subset generation for static websites (where the content remains unchanged across multiple visits). In the proposed method, when a user requests a web page, a web font script running on the user's browser calculates a hash value based on the character set and font information required by the web page. The hash value is generated using a cryptographic hashing algorithm such as MD5 or SHA-2. The web font script then sends a request to the web font server for a font subset that corresponds to the generated hash value. If the server returns a file, it means that a font subset that matches the hash value already exists, either because it has been loaded previously or because the web page content has not changed. In this case, the server returns the address of the existing font subset, and the browser then applies it to the web page text. If the web font server returns a null value, it means that there is no font subset matching the hash value on the web font server. In this case, the web font server generates a new font subset based on the character set and font information sent by the web font script. Then, this newly generated font subset is stored on the web font server together with its corresponding hash value, making it available for future requests. The web font server then returns the address of the newly generated font subset to the browser, and the browser applies it to the web page text. Among them, the character set is the data after removing duplicate characters. By adopting this hash-based method, the invention significantly reduces the computational overhead associated with web font loading, especially for static websites. The invention is designed to be easily integrated into the existing web development framework and is compatible with various encryption hashing algorithms, providing flexibility and scalability. In order to make the above features and advantages of the invention more obvious and easy to understand, the following is a detailed description of the preferred embodiment with the accompanying drawings.

The present invention is best understood with reference to the detailed contents and accompanying drawings set forth herein. Various embodiments will be discussed below with reference to the accompanying drawings. However, it will be readily understood by those skilled in the art that the detailed description given here with respect to the accompanying drawings is for illustrative purposes only, as these methods and systems may extend beyond the described embodiments. For example, the given teachings and the requirements of a particular application may result in a variety of optional and suitable methods to implement the functionality of any detail described herein. Therefore, any method may extend beyond the specific implementation options described and shown in the following embodiments. Please refer to Figures 1A and 2, Figure 1A is a block diagram of one embodiment of the web page font loading optimization system of the present invention, and Figure 2 is a flow chart of the web page font loading optimization method of the present invention. The web font loading optimization system 100 includes multiple components, each of which plays a different role in the process. The web font loading optimization 100 includes a web server 110, a web font script 132, a web browser 130, a hash module 134 and a web font server 150. First, as shown in step S110, the web server 110 is configured to provide a web page and resources related to the web page to the user's web browser 130 when a request is received. These resources may include various elements, such as HTML, CSS, JavaScript files, images and a web font script 132. The web server 110 communicates with the user's web browser 130 to deliver these resources so that the web browser 130 can render the web page for the user. The delivery of resources is usually achieved through standard protocols such as HTTP or HTTPS. Next, as shown in step S132, the web font script 132 is a specific resource downloaded from the web server 110. Once downloaded, as shown in step S130, it runs on the user's web browser 130 and determines the character set and font information required for the web page. The character set and font information are crucial to the visual presentation of the web page, which determines the specific characters and their style representation to be displayed on the web page. In addition, the web browser 130 also interacts with the web font server 150, sends a request for a font subset 152 and applies the received font subset 152 to the web page. The hash module 134 is a component that generates a hash value based on the character set and font information determined by the web font script 132. As shown in step S134, the hash module 134 uses a cryptographic hash algorithm, such as MD5, SHA-2, or SHA-3, to generate a hash value uniquely associated with a specific character set and font information combination. This hash value serves as a unique identifier for the font subset corresponding to the character set and font information. The web font server 150 is configured to receive a request for a font subset based on a hash value generated by the hash module 134. After receiving the request, as shown in step S150, the web font server 150 checks whether there is a font subset 152 corresponding to the requested hash value. If such a font subset 152 exists, as shown in step S136, the web font server 150 returns the font subset 152 to the web browser 130. If no such font subset 152 exists, as shown in step S170, the web font server 150 generates a new font subset 152 according to the character set and font information sent by the web font script 130. Then, the newly generated font subset 152 will be stored together with its corresponding hash value on the web font server 150 for future use. The above is an introduction to the web font loading optimization method and system of the present invention. The following will introduce the elements and steps involved in the method and system in more detail. Please continue to refer to Figures 1A and 2. Among the resources provided by the web server 110, the web font script 132 plays a specific role in the process of optimizing web font loading. Once the web font script 132 is downloaded from the web server 110, it runs on the user's web browser 130. The main function of the web font script 132 is to determine the character set and font information required for the web page. This recognition process involves scanning the web page content and determining the specific characters to be displayed, as well as their stylistic representation as determined by the font information. The character set and font information determined by the web page font script 132 are crucial to the visual presentation of the web page. The character set includes the specific characters to be displayed on the web page, such as letters, numbers, punctuation marks, and special characters. On the other hand, the font information determines the stylistic representation of these characters, including aspects such as font, size, weight, and style. Together, the character set and font information determine the visual appearance of the web page text and contribute to the overall user experience. The hash module 134 is a key component in the web font loading optimization system 100, responsible for generating a hash value based on the character set and font information determined by the web font script 132. The hash value is a unique identifier that is uniquely associated with a specific combination of character set and font information. This identifier plays a key role in the process of requesting and retrieving the corresponding font subset 152 from the web font server 150. The hash module 134 uses a cryptographic hash algorithm to generate a hash value. A cryptographic hash algorithm is a mathematical algorithm that accepts an input and returns a fixed-size byte string, that is, a hash value. The property of these algorithms is that they are deterministic, meaning that the same input will always produce the same hash value. However, small changes in the input can result in significantly different hash values, a phenomenon known as the avalanche effect. This property is advantageous in the context of the web font loading optimization system 100 of the present case because it ensures that different character set and font information combinations will produce different hash values, thereby facilitating accurate retrieval of the corresponding font subset 152. The cryptographic hashing algorithms that can be used by the hash module 134 include MD5, SHA-2, and SHA-3. MD5, or 'Message Digest Algorithm 5', is a widely used cryptographic hash function that produces a 128-bit hash value. It is often used to verify data integrity. On the other hand, SHA-2 is a family of cryptographic hash functions that includes SHA-224, SHA-256, SHA-384, SHA-512, SHA-512/224, and SHA-512/256. The number in the name indicates the length of the hash value produced by the function. Due to their longer hash values, SHA-2 functions are considered more secure than MD5, making them less vulnerable to collision attacks. In addition, SHA-3 is the latest family of cryptographic hash functions that offers a different design from SHA-2, further enhancing security and resistance to collision attacks. The increased security provided by SHA-3 makes it an ideal choice when handling highly sensitive data. In the context of the present web font loading optimization system 100, the hash module 134 applies a selected cryptographic hashing algorithm to the character set and font information determined by the web font script 132. The generated hash value is then used as an identifier to request the corresponding font subset from the web font server 150. The process of generating a hash value based on the character set and font information and using it to request the corresponding font subset 152 is a core part of the system's operation and is an important contribution to optimizing web font loading in the web browser 130. The web font server 150 plays a key role in the process of optimizing web font loading. The web font server 150 is configured to receive requests for font subsets 152 based on hash values generated by the hash module 134. These requests are sent by the web font script 132 running on the user's web browser 130, which generates a hash value based on the character set and font information determined for the web page. After receiving the request, the web font server 150 checks whether there is a font subset 152 corresponding to the requested hash value. This is achieved by comparing the received hash value with the hash values of the font subsets stored on the server. If a font subset 152 matching the hash value is found, then a font subset matching the character set and font information already exists on the web font server 150. This may be because the font subset has been previously loaded for the same or a different web page, or because the web page content has not changed since the last load. In this case, the web font server 150 returns the existing font subset 152 to the web browser 130. If the web font server 150 does not find a font subset 152 matching the hash value, then a font subset corresponding to the character set and font information does not exist on the web font server 150. This may be because the font subset has not been previously loaded, or because the web page content has changed since the last load and a new font subset is needed. In this case, the font generation module 154 in the web font server 150 generates a new font subset 152 according to the character set and font information sent by the web font script 132. In one embodiment, in order to improve the efficiency of data transmission, the character set used is the data after removing duplicate characters. In addition to the method described in the previous paragraph, other methods can also be used to generate new font subsets. Please refer to Figure 1B at the same time. In this embodiment, the web font server 150 stores a common font file 151. When the web font server 150 receives a character set and font information request from the web browser 130, it will first determine whether a matching font subset already exists in its common font file 151. If it exists, the following operations will be performed according to the request: (a) If the common font file 151 completely covers the required character set and font information, the web font server 150 will directly send the URL of the common font file 151 to the web browser 130. This can effectively reduce the font loading time and improve efficiency because there is no need to create a new font subset. (b) On the other hand, if the required character set and font information only account for a small part of the common font file, the font extraction module 153 of the web font server 150 will extract the required specific character set and font information from the common font file 151 and create a new font subset based on this information. This newly created font subset will only contain the specific characters and fonts requested by the web browser 130, thereby improving loading efficiency and reducing unnecessary data transmission. In both of the above cases, the web font server 150 sends the corresponding URL to the web browser 130 so that the corresponding font subset can be applied to the requested web page. This approach ensures that only the necessary font data is loaded, thereby optimizing the overall web page loading process. In this embodiment, the common font file 151 is a key element in the web font server 150, which is intended to store a set of widely used characters and fonts that are believed to appear most frequently in most web page requests. The common font file 151 is designed to contain a sufficiently diverse character set to meet the basic needs of most web pages. Thus, when a web browser 130 requests a specific character set, the web font server 150 can first check the common font file 151 to determine whether there is already a pre-generated font subset containing the required characters. Due to the existence of the common font file 151, the web font server 150 can respond to font requests quickly in many cases without having to generate a new font subset each time. This approach not only saves processing time, but also reduces the load on the web font server 150, while increasing the web page loading speed. The content of the common font file 151 can be regularly updated based on past usage data and trends to ensure that it always reflects the most common web font usage. The process of generating a new font subset 152 involves creating a font subset based on the character set and font information. The font subset 152 includes specific characters to be displayed on the web page and is styled according to the font information. Once the new font subset 152 is generated, it is stored on the web font server 150 along with its corresponding hash value. Storing the hash value enables the web font server 150 to quickly and accurately retrieve the font subset 152 for future requests. This storage process is handled by the mapping module 156, which is a core part of the system operation and plays an important role in optimizing web font loading in the web browser 130. The mapping module 156 plays a key role in recording the mapping between hash values and font subsets 152 on the web font server 150. This mapping is essential for efficient retrieval of font subsets 152 for future requests. The mapping module 156 is a component of the web font server 150 designed to record the association between the hash values generated by the hash module 134 and the corresponding font subsets 152 stored on the web font server 150. This association, or mapping, is a one-to-one correspondence between hash values and font subsets 152, which means that each hash value is uniquely associated with a specific font subset 152 and vice versa. In addition to the role of the mapping module 156 in recording the relationship between the hash value and the font subset 152, the web font server 150 also includes a naming module 158, which is responsible for naming each font subset 152 according to its corresponding hash value. This naming method not only improves the retrieval efficiency, but also increases the identification of the font subset. The name of each font subset is determined according to the unique hash value generated by the hash module 134, which ensures the uniqueness and consistency of the name. In this way, when the web browser 130 issues a request, the web font server 150 can quickly locate and provide the correct font subset, thereby further optimizing the web font loading process. In some embodiments, the naming module 158 and the mapping module 156 may exist simultaneously, while in some embodiments, the naming module 158 and the mapping module 156 may exist selectively. By adopting this process, the web font server 150 effectively manages the storage and retrieval of the font subset 152, optimizing the web font loading in the web browser 130. This process significantly reduces the computational overhead associated with web font loading, especially for static websites whose content remains unchanged over multiple visits. In addition, by storing hash values for future use, the web font server 150 facilitates fast and accurate retrieval of the font subset 152, further improving the efficiency of the system. The following will introduce the process of applying the font subset 152 to a web page, please refer to FIG3. This process involves several steps, each of which contributes to the visual presentation of the web page text, and this process is implemented by the web page display program 136 (as shown in FIG4). The web page display program 136 is also downloaded from the web font server 150, including a URL insertion module 162, a download module 164 and a rendering module 166, which play different roles in the process of applying the font subset 152 to a web page. First, as shown in step S210, the URL insertion module 162 adds the URL corresponding to the font subset 152 to the web page. URL, Uniform Resource Locator (Global Resource Locator, commonly referred to as "URL"), in this embodiment is a reference to a font subset 152 stored on a web font server 150, which provides the location of the font subset 152 on the web font server 150 and a protocol for retrieving it. The URL corresponding to the font subset 152 is added to the web page by a web font script running on the user's web browser 130, which is usually done by inserting the URL into the HTML or CSS of the web page. Once the URL corresponding to the font subset 152 is added to the web page, the next step is for the download module 164 to download the font subset 152 according to the URL (as shown in step S220). This is the download module 164 sending a request to the web font server 150 using the URL, prompting the web font server 150 to transmit the font subset 152 through the network. The web font server 150 responds to the request and sends the font subset 152 to the web browser 130. The file is transmitted through the network and received by the web browser 130, which stores it locally for use when rendering web page text. Next, as shown in step S230, the font subset is rendered in the web browser 130, which can be executed by the rendering module 166. The font subset contains specific characters to be displayed on the web page and is styled according to the font information. The rendering module 166 in the web browser 130 uses this font subset to render the web page text, replacing the default or previously applied font with the font specified by the font subset. This rendering process is performed by the rendering module 166 working with the rendering engine of the web browser 130, which interprets the HTML, CSS and other resources of the web page, including the font subset 150, to generate the visual presentation of the web page. Through these steps, the font subset returned by the web font server 150 is applied to the web page and contributes to the visual presentation of the web page text. This process is an integral part of the operation of the system, enabling the web browser 130 to load web fonts efficiently and improve the overall user experience. The web font loading optimization system 100 has several potential advantages, particularly in terms of computational efficiency and web page loading speed. One major advantage is the reduction of computational overhead associated with web page font loading. By employing a hash-based approach to requesting and retrieving font subsets, the system eliminates redundant font subset generation, particularly for static websites whose content remains unchanged across multiple visits. This significantly reduces the computing resources consumed by the web font server 150, thereby improving the overall efficiency of the web font loading optimization system 100. Another significant advantage of the web font loading optimization system 100 is improved web page loading speed. By storing hash values and corresponding font subsets on the web font server 150, the system 100 facilitates fast and accurate retrieval of the font subset 152 based on the hash value. This eliminates the time-consuming process of searching the font subset 152 on the web font server 150 each time a web page is loaded, thereby reducing web page loading time. This increase in loading speed is particularly beneficial to the user experience because it reduces the user's waiting time and enables them to interact with the web page more quickly. In addition, the efficiency of the web font loading optimization system 100 in handling web font loading is particularly beneficial for static websites, where the content remains unchanged across multiple visits. In this case, the system can retrieve the previously loaded font subset 152 based on the hash value, eliminating the need to generate a new font subset each time a web page is loaded. This not only reduces the computing overhead of the web font server, but also increases the web page loading speed, thereby improving the overall user experience. It is worth noting that these advantages may exist in one or more embodiments of the system. The specific benefits achieved may depend on various factors, such as the specific configuration of the system, the characteristics of the web page, and the nature of the font subset. In any case, the method of systematically optimizing web page font loading provides a promising solution to the challenges of traditional web page font loading technology, providing potential improvements in computing efficiency, web page loading speed, and user experience. Although the present invention has been disclosed as above with preferred embodiments, it is not intended to limit the present invention. Any person with ordinary knowledge in the relevant technical field may make slight changes and modifications without departing from the spirit and scope of the present invention. Therefore, the scope of protection of the present invention shall be defined by the scope of the attached patent application.

100: Web font loading optimization system 110: Web server 132: Web font script 130: Web browser 134: Hash module 136: Web display program 150: Web font server 151: Common font files 152: Font subset 153: Font extraction module 154: Font generation module 156: Mapping module 158: Naming module 162: URL insertion module 164: Download module 166: Rendering module S110~S170: Flowchart steps S210~S230: Flowchart steps

Various embodiments will be described below based on the accompanying drawings, which are used for illustration and not to limit the scope in any way, wherein like numbers represent like components, and wherein: FIG. 1A shows a block diagram of one embodiment of the web page font loading optimization system of the present invention. FIG. 1B shows a block diagram of another embodiment of the web page font loading optimization system of the present invention. FIG. 2 shows a flow chart of the web page font loading optimization method of the present invention. FIG. 3 shows a flow chart of the process of applying a font subset to a web page of the present invention. FIG. 4 shows a block diagram of the web page display program of the present invention.

S110~S170: Flowchart steps

Claims (10)

A webpage font loading optimization method comprises the following steps: Requesting a webpage and related resources from a webpage server; Downloading a webpage font script from the webpage server; Determining at least one character set and at least one font information required for the webpage; Using a hash algorithm to generate a unique hash value based on the character set and the font information; Requesting a corresponding font subset from a webpage font server according to the hash value; If the corresponding font subset is returned, applying the corresponding font subset to the webpage; If the corresponding font subset is not returned, the webpage font server generates a new font subset, applies the new font subset to the webpage, and stores the new font subset for future use. The web page font loading optimization method as described in claim 1, wherein the hash value and the corresponding font subset are stored on the web page font server with a retention period or indefinitely. The web font loading optimization method as described in claim 1 further comprises the following steps: Recording a mapping between the hash value and the font subset on the web font server for future retrieval. The webpage font loading optimization method as described in claim 1 or claim 3 further comprises the following steps: Naming the font subset based on the hash value. The web font loading optimization method as described in claim 1, wherein generating a new font subset comprises: The web font server receives the character set and the font information from the web browser; Creates the font subset based on the character set and the font information; Sends at least one URL of the font subset to the web browser for application to the web page. The web font loading optimization method as described in claim 1, wherein the web font server has stored a common font file, and the step of generating a new font subset includes: The web font server receives the character set and the font information from the web browser; Determine whether the common font file already contains the character set and the font information, if so, perform the following step (a) or (b), if not, perform the following step (c); (a) Send the URL of the common font file to the web browser for application to the web page; (b) Extract the required character set and font information from the common font file, create the font subset, and send the URL of the font subset to the web browser; (c) The font subset is created according to the character set and the font information, and at least one URL of the font subset is sent to the web browser to be applied to the web page. A webpage font loading optimization method as described in claim 5 or claim 6, wherein the font subset is applied to the webpage in the following manner: Adding the URL of the font subset to the webpage; Downloading the font subset according to the URL; Rendering the font subset in a web browser. A web page font loading optimization method as described in claim 5 or claim 6, wherein the character set is data after removing duplicate characters. The web page font loading optimization method as described in claim 1, wherein the hashing algorithm is MD5, SHA-2, or SHA-3. A web font loading optimization system, suitable for implementing the method described in any one of request items 1-9, the web font loading optimization system comprising: A web server, configured to provide a web page and related resources; A web font script, configured to be downloaded from the web server; A web browser, configured to determine at least one character set and at least one font information required for the web page; A hash module, configured to generate a unique hash value based on the character set and font information; A web font server, configured to receive a request for a corresponding font subset based on the hash value; Wherein, if a font subset is returned, the font subset is applied to the web page; if a font subset is not returned, a new font subset is generated, the font subset is applied to the web page, and the new font subset is stored for future use; Wherein, the web font server further includes a font generation module, which is configured to receive the character set and the font information from the web browser, create the font subset according to the character set and the font information, and send at least one URL of the font subset to the web browser for application to the web page.