Web front-end performance analysis method and device, equipment and storage medium
By deploying data acquisition mechanism and funnel analysis in the web front-end page, the lack of systematic and real-time problems in the existing technology is solved, and comprehensive monitoring of user behavior and performance indicators is achieved, helping to identify performance bottlenecks and provide optimization suggestions. Improves the performance and user experience of web front-end pages.
Patent Information
- Application Number
- CN202411202466.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-29
- Publication Date
- 2024-12-13
AI Technical Summary
The existing front-end performance analysis methods of web front-end lack systematicity and real-timeness, and cannot fully capture user behavior data and performance indicators, resulting in inaccurate analysis results, and a single optimization method is difficult to meet the needs of complex web applications, and lack of cross-platform support, resulting in performance problems. Difficulty in positioning and inefficient optimization.
Deploy a data acquisition mechanism in the web front-end page, obtain performance indicator data and user behavior data, perform funnel analysis, generate performance analysis reports based on funnel diagrams, realize comprehensive monitoring and analysis of page performance and user behavior, identify performance bottlenecks and provide performance bottlenecks Optimization suggestions.
Through comprehensive monitoring and analysis, we help identify performance bottlenecks, improve the performance and user experience of web front-end pages, provide targeted optimization suggestions, improve page loading speed and response speed, and improve user satisfaction.
Smart Images

Figure CN119127646A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of Web technology, and in particular to a Web front-end performance analysis method, device, equipment and storage medium. Background Art
[0002] With the rapid development of Internet technology, Web applications have become an important part of people's daily life and work. Users have higher and higher expectations for the response speed and performance of Web applications. Good Web front-end performance can not only improve user experience, but also directly affect user retention and satisfaction. However, the existing Web front-end performance analysis methods have the following shortcomings:
[0003] Lack of systematicity and real-time performance: Traditional methods mostly rely on manual data collection and offline analysis, which are inefficient and unable to detect and solve performance problems in a timely manner.
[0004] Incomplete data collection: Existing technologies are usually unable to fully capture user behavior data and performance indicators, resulting in inaccurate analysis results.
[0005] Single optimization method: As the complexity of Web applications increases, a single performance optimization method is difficult to meet the needs, and a comprehensive method is needed to comprehensively improve Web front-end performance.
[0006] Difficulty in locating performance issues: Due to the lack of systematic analysis methods, it is difficult for developers to accurately locate performance bottlenecks, resulting in a time-consuming and labor-intensive optimization process.
[0007] Lack of cross-platform support: Existing technologies have poor consistency in performance analysis on different platforms and devices, making it difficult to uniformly manage and optimize.
[0008] In practical applications, such as e-commerce, social media, and online education, users have particularly stringent requirements on the performance of Web applications. Any performance deficiency will directly lead to user loss and business loss. Summary of the invention
[0009] The main purpose of the present invention is to provide a Web front-end performance analysis method, device, equipment and storage medium, aiming to solve the technical problem that the existing Web front-end performance analysis method lacks systematicity and real-time performance.
[0010] To achieve the above object, the present invention provides a Web front-end performance analysis method, which comprises the following steps:
[0011] Deploy a collection mechanism in the Web front-end page, obtain performance indicator data of the Web front-end page and count user behavior data through the collection mechanism;
[0012] Uploading the performance indicator data and the user behavior data to a database, performing funnel analysis on the user behavior data, and obtaining a user behavior funnel diagram;
[0013] The user behavior funnel chart is integrated with the performance indicator data to generate a performance analysis report based on the funnel chart.
[0014] Optionally, the step of deploying the collection mechanism in the Web front-end page includes:
[0015] The collection mechanism is deployed at key user interaction points in the Web front-end page, and the key user interaction points refer to important interactive operations performed by users on the Web front-end page.
[0016] Optionally, the step of performing funnel analysis on the user behavior data to obtain a user behavior funnel graph includes:
[0017] Identify key steps involved in the user's use of the Web front-end page based on the user behavior data, perform statistical analysis on each key step, and calculate the user conversion rate between adjacent key steps, wherein the key step refers to the interactive operation that the user must go through to complete a specific goal on the Web front-end page;
[0018] The key steps with the most user loss are determined according to the user conversion rates between the adjacent key steps, and a user behavior funnel diagram is formed to display the user conversion status and user loss status of each key step.
[0019] Optionally, after the step of generating a performance analysis report based on the funnel chart, the method further includes:
[0020] Deploy a monitoring mechanism in the Web front-end page, and monitor the user behavior data and the performance indicator data in real time through the monitoring mechanism;
[0021] Analyze the user behavior data and the performance indicator data using real-time data processing technology to identify abnormal performance indicator data;
[0022] Set alarm rules, and when the abnormal performance indicator data meets the alarm rules, an alarm is automatically triggered.
[0023] Optionally, before the step of performing funnel analysis on the user behavior data, the step further includes:
[0024] The user behavior data is subjected to data cleaning and data preprocessing operations, wherein the data cleaning operation includes deleting duplicate data and outliers, and the data preprocessing operation includes normalizing or standardizing the data.
[0025] Optionally, the step of uploading the performance indicator data and the user behavior data to a database includes:
[0026] The performance indicator data and the user behavior data are uploaded to the database using batch uploading and data compression technology, and SSL / TLS encryption technology is used during the data uploading process to ensure the security of the data during uploading.
[0027] Optionally, after the step of generating a performance analysis report based on the funnel chart, the method further includes:
[0028] A performance optimization suggestion is generated according to the funnel chart-based performance analysis report, and the performance optimization suggestion is used to improve the performance and / or user experience of the Web front-end page.
[0029] Furthermore, to achieve the above object, the present invention also provides a Web front-end performance analysis device, the Web front-end performance analysis device comprising:
[0030] A collection mechanism deployment module deploys a collection mechanism in a Web front-end page, obtains performance indicator data of the Web front-end page through the collection mechanism, and collects statistics on user behavior data;
[0031] A funnel analysis module uploads the performance indicator data and the user behavior data to a database, performs a funnel analysis on the user behavior data, and obtains a user behavior funnel diagram;
[0032] The performance analysis module integrates the user behavior funnel diagram with the performance indicator data to generate a performance analysis report based on the funnel diagram.
[0033] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a Web front-end performance analysis device, which includes a memory, a processor, and a Web front-end performance analysis program stored in the memory and executable on the processor, and the Web front-end performance analysis program, when executed by the processor, implements the steps of the Web front-end performance analysis method described above.
[0034] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a computer storage medium, on which a Web front-end performance analysis program is stored, and when the Web front-end performance analysis program is executed by a processor, the steps of the Web front-end performance analysis method as described above are implemented.
[0035] The present invention relates to a Web front-end performance analysis method, which aims to solve the problem that the existing Web front-end performance analysis method lacks systematicity and real-time performance. The present invention deploys a data collection mechanism in a Web front-end page to obtain performance indicator data and user behavior data, uploads these data to a database, performs funnel analysis to generate a user behavior funnel chart, and integrates the user behavior funnel chart with the performance indicator data, and finally generates a performance analysis report based on the funnel chart. The present invention deploys a data collection mechanism in a Web front-end page to comprehensively obtain performance indicator data and user behavior data, realize comprehensive monitoring and analysis of page performance and user behavior, help identify performance bottlenecks and optimization directions, and improve the performance and user experience of the Web front-end page. BRIEF DESCRIPTION OF THE DRAWINGS
[0036] Figure 1 A schematic diagram of the structure of the device hardware operating environment involved in the embodiment of the Web front-end performance analysis device of the present invention;
[0037] Figure 2 This is a flow chart of the first embodiment of the Web front-end performance analysis method of the present invention;
[0038] Figure 3 It is a schematic diagram of the functional modules of a preferred embodiment of the Web front-end performance analysis device of the present invention.
[0039] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0040] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.
[0041] It should be noted that with the rapid development of Internet technology, Web applications have become an important part of people's daily life and work. Users have higher and higher expectations for the response speed and performance of Web applications. Good Web front-end performance can not only improve user experience, but also directly affect user retention and satisfaction. However, the existing Web front-end performance analysis methods have the following shortcomings:
[0042] Lack of systematicity and real-time performance: Traditional methods mostly rely on manual data collection and offline analysis, which are inefficient and unable to detect and solve performance problems in a timely manner.
[0043] Incomplete data collection: Existing technologies are usually unable to fully capture user behavior data and performance indicators, resulting in inaccurate analysis results.
[0044] Single optimization method: As the complexity of Web applications increases, a single performance optimization method is difficult to meet the needs, and a comprehensive method is needed to comprehensively improve Web front-end performance.
[0045] Difficulty in locating performance issues: Due to the lack of systematic analysis methods, it is difficult for developers to accurately locate performance bottlenecks, resulting in a time-consuming and labor-intensive optimization process.
[0046] Lack of cross-platform support: Existing technologies have poor consistency in performance analysis on different platforms and devices, making it difficult to uniformly manage and optimize.
[0047] In practical applications, such as e-commerce, social media, and online education, users have particularly stringent requirements on the performance of Web applications. Any performance deficiency will directly lead to user loss and business loss.
[0048] Based on the above defects, the present invention provides a Web front-end performance analysis device, referring to Figure 1 , Figure 1 It is a structural schematic diagram of the device hardware operating environment involved in the embodiment of the Web front-end performance analysis device of the present invention.
[0049] like Figure 1 As shown, the Web front-end performance analysis device may include: a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory, or a stable memory (non-volatile memory), such as a disk memory. The memory 1005 may also be a storage device independent of the aforementioned processor 1001.
[0050] Those skilled in the art will understand that Figure 1 The hardware structure of the Web front-end performance analysis device shown in the figure does not constitute a limitation on the Web front-end performance analysis device, and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.
[0051] like Figure 1As shown, the memory 1005 as a storage medium may include an operating system, a network communication module, a user interface module, and a Web front-end performance analysis program. The operating system is a program for managing and controlling the Web front-end performance analysis device and software resources, and supports the operation of the network communication module, the user interface module, the Web front-end performance analysis program, and other programs or software; the network communication module is used to manage and control the network interface 1004; and the user interface module is used to manage and control the user interface 1003.
[0052] exist Figure 1 In the hardware structure of the Web front-end performance analysis device shown, the network interface 1004 is mainly used to connect to the back-end server and perform data communication with the back-end server; the user interface 1003 is mainly used to connect to the client and perform data communication with the client; the processor 1001 can call the Web front-end performance analysis program stored in the memory 1005 and perform the following operations:
[0053] Deploy a collection mechanism in the Web front-end page, obtain performance indicator data of the Web front-end page and count user behavior data through the collection mechanism;
[0054] Uploading the performance indicator data and the user behavior data to a database, performing funnel analysis on the user behavior data, and obtaining a user behavior funnel diagram;
[0055] The user behavior funnel chart is integrated with the performance indicator data to generate a performance analysis report based on the funnel chart.
[0056] Furthermore, the step of deploying the collection mechanism in the Web front-end page includes:
[0057] The collection mechanism is deployed at key user interaction points in the Web front-end page, and the key user interaction points refer to important interactive operations performed by users on the Web front-end page.
[0058] Furthermore, the step of performing funnel analysis on the user behavior data to obtain a user behavior funnel diagram includes:
[0059] Identify key steps involved in the user's use of the Web front-end page based on the user behavior data, perform statistical analysis on each key step, and calculate the user conversion rate between adjacent key steps, wherein the key step refers to the interactive operation that the user must go through to complete a specific goal on the Web front-end page;
[0060] The key steps with the most user loss are determined according to the user conversion rates between the adjacent key steps, and a user behavior funnel diagram is formed to display the user conversion status and user loss status of each key step.
[0061] Furthermore, after the step of generating a performance analysis report based on the funnel chart, the method further includes:
[0062] Deploy a monitoring mechanism in the Web front-end page, and monitor the user behavior data and the performance indicator data in real time through the monitoring mechanism;
[0063] Analyze the user behavior data and the performance indicator data using real-time data processing technology to identify abnormal performance indicator data;
[0064] Set alarm rules, and when the abnormal performance indicator data meets the alarm rules, an alarm is automatically triggered.
[0065] Furthermore, before the step of performing funnel analysis on the user behavior data, the step further includes:
[0066] The user behavior data is subjected to data cleaning and data preprocessing operations, wherein the data cleaning operation includes deleting duplicate data and outliers, and the data preprocessing operation includes normalizing or standardizing the data.
[0067] Furthermore, the step of uploading the performance indicator data and the user behavior data to a database includes:
[0068] The performance indicator data and the user behavior data are uploaded to the database using batch uploading and data compression technology, and SSL / TLS encryption technology is used during the data uploading process to ensure the security of the data during uploading.
[0069] Furthermore, after the step of generating a performance analysis report based on the funnel chart, the method further includes:
[0070] A performance optimization suggestion is generated according to the funnel chart-based performance analysis report, and the performance optimization suggestion is used to improve the performance and / or user experience of the Web front-end page.
[0071] The specific implementation of the Web front-end performance analysis device of the present invention is basically the same as the various embodiments of the Web front-end performance analysis method described below, and will not be repeated here.
[0072] The present invention also provides a Web front-end performance analysis method based on the above-mentioned Web front-end performance analysis device.
[0073] Reference Figure 2 , Figure 2 It is a flowchart of the first embodiment of the Web front-end performance analysis method of the present invention.
[0074] The embodiment of the present invention provides an embodiment of a Web front-end performance analysis method. It should be noted that although a logical order is shown in the flow chart, in some cases, the steps shown or described may be executed in an order different from that shown here.
[0075] In various embodiments of the Web front-end performance analysis method, the execution subject is a Web front-end performance analysis device.
[0076] The Web front-end performance analysis method is applied to a Web front-end performance analysis device, and the Web front-end performance analysis method includes:
[0077] Step S10, deploying a collection mechanism in the Web front-end page, obtaining performance indicator data of the Web front-end page and collecting user behavior data through the collection mechanism;
[0078] With the rapid development of Internet technology, Web applications have become an important part of people's daily life and work. Users have higher and higher expectations for the response speed and performance of Web applications. Good Web front-end performance can not only improve user experience, but also directly affect user retention and satisfaction. However, the existing Web front-end performance analysis methods have the following shortcomings:
[0079] Lack of systematicity and real-time performance: Traditional methods mostly rely on manual data collection and offline analysis, which are inefficient and unable to detect and solve performance problems in a timely manner.
[0080] Incomplete data collection: Existing technologies are usually unable to fully capture user behavior data and performance indicators, resulting in inaccurate analysis results.
[0081] Single optimization method: As the complexity of Web applications increases, a single performance optimization method is difficult to meet the needs, and a comprehensive method is needed to comprehensively improve Web front-end performance.
[0082] Difficulty in locating performance issues: Due to the lack of systematic analysis methods, it is difficult for developers to accurately locate performance bottlenecks, resulting in a time-consuming and labor-intensive optimization process.
[0083] Lack of cross-platform support: Existing technologies have poor consistency in performance analysis on different platforms and devices, making it difficult to uniformly manage and optimize.
[0084] In practical applications, such as e-commerce, social media, and online education, users have particularly stringent requirements on the performance of Web applications. Any performance deficiency will directly lead to user loss and business loss.
[0085] In this embodiment, deploying a data collection mechanism in a Web front-end page refers to automatically collecting and counting page performance indicators and user behavior data by embedding scripts in the page or using third-party tools. These data can help analyze and optimize Web front-end performance.
[0086] Among them, performance indicator data is a key indicator used to evaluate the performance of web pages, reflecting the efficiency of page loading and response. It may include but is not limited to:
[0087] Page load time: The time it takes from when a user requests a page to when the page is fully loaded. Page load time is an important factor in user experience, and longer load times can lead to user loss.
[0088] Resource loading time: The loading time of each resource (such as images, scripts, style sheets). Resource loading time affects the overall page loading speed. Optimizing resource loading can improve page performance.
[0089] Page response time: The response time after the user interacts with the page (such as clicking, inputting). The response time reflects the interactive performance of the page, and a shorter response time can improve the user experience.
[0090] Network latency: The time between a request and a server response. Network latency affects the efficiency of page loading and data transmission. Optimizing network latency can increase page loading speed.
[0091] User behavior data refers to the user's operations and interactions on the web page, reflecting the user's usage habits and preferences. It may include but is not limited to:
[0092] Clicks: Records the number and location of user clicks on the page. Clicks reflect the user's interest and focus on the page content, which helps optimize the page layout and content.
[0093] Visits: Records the number of times a user visits a page. Visits are an indicator of page popularity and can help analyze user traffic and page visits.
[0094] Page dwell time: records the time users spend on each page. Dwell time reflects the user's interest in the page content. A longer dwell time indicates that the user pays more attention to the content.
[0095] Jump path: Record the jump path of users between pages. Jump path helps analyze users' browsing behavior and habits, and can optimize page navigation and user experience.
[0096] Form submission: records the data and time when the user submits the form. Form submission data helps analyze user interaction behaviors and needs, and optimize form design and user processes.
[0097] Scrolling behavior: Records the user's scrolling behavior and position on the page. Scrolling behavior reflects the user's reading habits of page content and helps optimize content layout and page design.
[0098] Example description:
[0099] In an online shopping website, performance indicator data and statistical user behavior data can be obtained by embedding data collection mechanisms in the pages.
[0100] Performance index data:
[0101] Page loading time: When a user visits the homepage of an online shopping website, the page loading time refers to the time it takes from the user entering the website URL to the homepage being fully displayed. When the user enters the shopping website URL in the browser and presses the Enter key, the browser starts loading the content of the homepage, including resources such as HTML, CSS, JavaScript, and images. The page loading time records the total time of this process and reflects the loading efficiency of the website.
[0102] Resource loading time: When users browse product detail pages, resource loading time refers to the time required to load each product image, style sheet, and script file. When a user clicks on a product and enters the product detail page, multiple images, CSS files, and JavaScript files on the page begin to load. Resource loading time records the time from request to complete loading of each resource, which helps optimize the order and method of resource loading.
[0103] Page response time: When a user clicks the "Add to Cart" button on the product details page, the page response time refers to the time it takes from the user clicking the button to the server returning a confirmation message. When a user clicks the "Add to Cart" button on the product details page, the browser sends a request to the server, which processes the request and returns a confirmation message. The page response time records the time of this process and reflects the response speed of the website.
[0104] Network latency: When users pay on the checkout page, network latency refers to the time from when the user clicks the "Pay" button to when the server returns the payment confirmation. When the user selects a payment method on the checkout page and clicks the "Pay" button, the browser sends a payment request to the server. Network latency records the time it takes for the request to be sent to the server for response, affecting the smoothness of the payment process.
[0105] User behavior data:
[0106] Clicks: The number of times a user clicks on different products, categories, and function links on a shopping website. A user browses the homepage, clicks on the "Electronics" category, and then clicks on a product. Each click is recorded. Analyzing this click data can help you understand which products and categories users are interested in.
[0107] Visits: The number of times a user visits the same product detail page. If a user browses a product multiple times within a week, each visit will be recorded. Visits help analyze the user's attention to the product and purchase intention.
[0108] Page dwell time: The time a user spends on a product detail page. When a user opens a product detail page and looks at the product description, pictures, and reviews in detail, the page dwell time records the total time the user spends on that page. A longer dwell time indicates that the user is interested in the product.
[0109] Jump path: The path that users follow from the home page to the product category page, then to the product details page, and then to the shopping cart page. After logging into the shopping website, users click on the "Clothing" category from the home page, browse the products in the category, click on a product to enter the product details page, and then click "Add to Cart" to enter the shopping cart page. The jump path records the user's operation sequence and helps analyze the user's shopping process and habits.
[0110] Form submission: The user submits the order form on the checkout page, including filling in the delivery address, selecting the payment method, etc. The user fills in the delivery address, selects the payment method and clicks the "Submit Order" button on the "Checkout" page. The form submission data records the information entered by the user and the submission time, helping to analyze the user's purchase behavior and process.
[0111] Scrolling behavior: The scrolling behavior of users when browsing product detail pages records the number of times and positions of users on the page. Users open product detail pages and browse long product descriptions, pictures, and user reviews. Scrolling behavior data records users' scrolling operations, helping us understand users' habits and focus when reading product information.
[0112] The comprehensive analysis of performance indicator data and user behavior data can provide a comprehensive understanding of the performance and user experience of Web pages, so as to make targeted optimizations and improve page loading speed and user satisfaction.
[0113] Step S20, uploading the performance indicator data and the user behavior data to a database, performing funnel analysis on the user behavior data, and obtaining a user behavior funnel diagram;
[0114] In this embodiment, the performance indicator data and user behavior data collected from the Web front-end page are uploaded to the back-end database via network transmission for storage, and the collected data is centrally stored to facilitate subsequent analysis and processing, thereby improving the efficiency and security of data management.
[0115] Analyze user behavior data, identify key steps involved in the user's use of Web front-end pages, calculate the user conversion rate between adjacent key steps, and generate a user behavior funnel chart based on these conversion rates. Through funnel analysis, you can intuitively display the user's conversion and loss status at each key step, helping to identify problem points and optimization directions in user experience.
[0116] The user behavior funnel chart is a visual chart that shows the conversion rate and churn rate of users at each key step on the web front-end page. The user behavior funnel chart intuitively displays user behavior data in a graphical way, making it easier to analyze and understand the user's behavior patterns and conversion paths on the page.
[0117] The specific implementation method may be: uploading the collected performance indicator data and user behavior data to the back-end database through technologies such as AJAX, FetchAPI or WebSocket. In the back-end database, the stored user behavior data is cleaned and preprocessed using data processing and analysis tools (such as SQL, Python, etc.), and then funnel analysis is performed. The analysis results can be generated into a funnel chart using data visualization tools (such as Tableau, PowerBI, D3.js, etc.) to display the conversion rate and churn rate of each key step. The funnel chart graphically displays the user's behavior data at each key step, helping to identify user churn points and optimization directions.
[0118] Example description:
[0119] On an online shopping website, when users browse products, add to shopping carts, check out and pay, the collected data such as page loading time, click volume, page dwell time, etc. are uploaded to the back-end database via AJAX.
[0120] In the back-end database, SQL is used to clean and pre-process the user behavior data, and duplicate data and outliers are deleted. Then, the key steps involved in the user's use process are identified based on the user behavior data, such as "browse products", "add shopping cart", "checkout and payment", etc. Statistical analysis is performed on each key step, and the user conversion rate between adjacent key steps is calculated. Identify the steps with the most user loss, and generate a user behavior funnel chart based on the conversion rate data. Tableau can be used to generate a user behavior funnel chart from the funnel analysis results. The funnel chart shows the conversion rate and churn rate of users in key steps such as "browse products", "add shopping cart", and "checkout and payment".
[0121] The funnel chart can be used to visually see the user conversion status of each key step and identify the steps with the most user loss. For example, if it is found that most users are lost at the "add to cart" step, this step can be optimized, such as simplifying the shopping cart process, improving the page response speed, etc.
[0122] Through the above steps, you can fully understand and master the upload and funnel analysis process of performance indicator data and user behavior data, and intuitively display the analysis results through the user behavior funnel chart to help optimize the performance and user experience of the Web front-end page.
[0123] Step S30, integrating the user behavior funnel diagram with the performance indicator data to generate a performance analysis report based on the funnel diagram.
[0124] In this embodiment, the user behavior funnel diagram obtained through funnel analysis is comprehensively analyzed with the collected performance indicator data. By integrating the user behavior data and performance indicator data, a more comprehensive understanding of the user's behavior and page performance on the Web front-end page can be achieved, providing a more accurate performance analysis.
[0125] Based on the integrated data, a detailed performance analysis report is generated, which includes user behavior analysis results, performance bottleneck identification, optimization suggestions, etc. The performance analysis report provides developers with a comprehensive performance evaluation and optimization direction, which helps to improve the user experience and performance of the Web front-end page.
[0126] A specific implementation method may be: importing the data of the user behavior funnel chart and the performance indicator data into a data analysis platform (such as Tableau, Power BI, etc.) for comprehensive analysis. Through the data analysis platform, the user behavior data and the performance indicator data are associated, and the user behavior data (such as clicks, number of visits, page dwell time, etc.) and the performance indicator data (such as page loading time, resource loading time, page response time, etc.) are associated through certain common key fields (such as page ID, timestamp, user ID, etc.) to form a comprehensive data set.
[0127] In the data analysis platform, a performance analysis report is generated based on the comprehensive data set. The report includes:
[0128] User behavior analysis: Displays the conversion rate and churn rate of users at each key step.
[0129] Performance indicator analysis: Display performance indicators such as page loading time, resource loading time, and page response time.
[0130] Comprehensive analysis: Combine user behavior and performance metrics to identify performance bottlenecks and user churn points.
[0131] Optimization suggestions: Based on the analysis results, specific performance optimization suggestions are made.
[0132] Example: In an online shopping website, the user behavior funnel chart shows the conversion rate and loss rate of users in key steps such as "browsing products", "adding shopping carts", and "checkout payment". At the same time, the performance indicator data records the page loading time, resource loading time, and page response time.
[0133] Import user behavior data and performance indicator data into Tableau, and generate a comprehensive data set by setting associations. For example, analysis found that the user conversion rate of the "add to cart" step is low, and the loading time of the page is long.
[0134] Use Tableau to generate a performance analysis report, which includes:
[0135] User behavior analysis: Displays the conversion rate and loss rate of users at each key step. For example, the conversion rate from "browse products" to "add to cart" is 60%, and the conversion rate from "add to cart" to "checkout payment" is 30%.
[0136] Performance indicator analysis: Displays page loading time, resource loading time, and page response time. For example, the loading time of the product details page is 3 seconds, and the loading time of the shopping cart page is 5 seconds.
[0137] Comprehensive analysis: Combine user behavior and performance metrics to identify performance bottlenecks. For example, it was found that long shopping cart page loading time was the main cause of user loss.
[0138] Optimization suggestions: Based on the analysis results, optimization suggestions are made. For example, optimizing the resource loading order of the shopping cart page, reducing unnecessary script loading, and increasing page loading speed.
[0139] Through the above steps, you can fully understand and master the process of integrating user behavior funnel charts with performance indicator data, and provide data support and guidance for the optimization of Web front-end pages by generating performance analysis reports.
[0140] The present invention relates to a Web front-end performance analysis method, which aims to solve the problem that the existing Web front-end performance analysis method lacks systematicity and real-time performance. The present invention deploys a data collection mechanism in a Web front-end page to obtain performance indicator data and user behavior data, uploads these data to a database, performs funnel analysis to generate a user behavior funnel chart, and integrates the user behavior funnel chart with the performance indicator data, and finally generates a performance analysis report based on the funnel chart. The present invention deploys a data collection mechanism in a Web front-end page to comprehensively obtain performance indicator data and user behavior data, realize comprehensive monitoring and analysis of page performance and user behavior, help identify performance bottlenecks and optimization directions, and improve the performance and user experience of the Web front-end page.
[0141] Furthermore, a second embodiment of the Web front-end performance analysis method of the present invention is proposed. In the above step S10, the step of deploying the collection mechanism in the Web front-end page includes:
[0142] Step a1, deploying the collection mechanism at key user interaction points in the Web front-end page, where the key user interaction points refer to important interactive operations performed by users on the Web front-end page.
[0143] In this embodiment, in the Web front-end page, a specific location where the user performs important interactive operations is selected and a data collection mechanism is deployed. Key user interaction points refer to important interactive operations that users must perform in the process of completing specific tasks or goals when using the Web front-end page. These interaction points are usually key nodes in the user experience and have a significant impact on user behavior and page performance. These interaction points may include button clicks, form submissions, page scrolling, etc. By deploying a collection mechanism at these key user interaction points, user behavior data and related performance indicators can be accurately captured, and the user's operations and page responses at these key points can be understood.
[0144] Characteristics of key user interaction points generally include:
[0145] High frequency: operations that users frequently perform on the page, such as clicking on the navigation menu, search box, etc.
[0146] Importance: Actions that are critical for users to complete a specific task or goal, such as submitting an order, registering an account, etc.
[0147] Performance sensitivity: Users have high expectations for the response speed and stability of these interaction points, such as page loading speed, form submission response time, etc.
[0148] Example:
[0149] E-commerce website:
[0150] Search box: The interaction point where users enter the product name to search.
[0151] Add to Cart button: Users click this button to add items to the shopping cart.
[0152] Checkout button: Users click this button to enter the checkout process.
[0153] Submit order button: Users click this button to submit the order and complete the purchase.
[0154] Social Media Platforms:
[0155] Login button: The user enters the username and password and clicks the Login button.
[0156] Publish button: After the user writes the content, click the Publish button to publish the update.
[0157] Like button: Users click the Like button to like a post.
[0158] Comment Button: Users click the Comment button to write and submit a comment.
[0159] Online education platform:
[0160] Register button: New users fill in the registration information and click the Register button.
[0161] Course play button: Users click the play button to start watching the course video.
[0162] Quiz Submit Button: After the user completes the quiz, click the Submit button to submit their answers.
[0163] Forum post button: After a user writes a post in a forum, he clicks the post button.
[0164] One way to identify key user interaction points is to analyze the user operation path of the web front-end page and identify the interaction points that users must go through to complete specific tasks. These interaction points are usually the focus of user experience and performance optimization. For example, in an e-commerce website, key user interaction points may include the "Add to Cart" button on the product details page, the "Submit Order" button on the checkout page, and the "Search" box on the homepage.
[0165] Another way is to preset a key user interaction point library, and determine which interaction operations belong to the key user interaction points in the preset key user interaction point library.
[0166] Embed data collection scripts at certain key user interaction points. These scripts can collect corresponding user behavior data and performance indicator data by monitoring user interaction events (such as clicks, submissions, scrolling, etc.). The collected data includes the number of clicks, number of form submissions, page loading time, response time, etc.
[0167] Upload the collected user behavior data and performance indicator data to the backend database via the network. You can use technologies such as AJAX, FetchAPI or WebSocket to upload data and ensure the security of data transmission.
[0168] Example description:
[0169] On an e-commerce website, the key interaction points that users may encounter during the shopping process include:
[0170] Search box on the home page: Users enter the product name to search.
[0171] “Add to Cart” button on the product detail page: Users add the product they are interested in to the shopping cart.
[0172] Checkout button on the shopping cart page: The user starts the checkout process.
[0173] "Submit Order" button on the checkout page: The user submits the order to complete the purchase.
[0174] Deploy the collection mechanism: embed data collection scripts at these key user interaction points:
[0175] Search box: monitors the user's input events in the search box and records the number of searches and search keywords.
[0176] Add to Cart Button: Listen for events when users click the "Add to Cart" button, and record the number of clicks and the ID of the added product.
[0177] Checkout button: Listen for events when users click the "Checkout" button, record the number of clicks and the time it takes to jump to the checkout page.
[0178] Submit order button: monitor the event of the user clicking the "Submit order" button, and record the number of submissions and order details.
[0179] Data upload: upload the collected data to the backend database:
[0180] When the user enters content in the search box and presses the Enter key, the data collection script is triggered to upload the search keywords and search time to the database.
[0181] When a user clicks the "Add to Cart" button, the data collection script is triggered to upload the product ID and click time to the database.
[0182] When the user clicks the "Checkout" button, the data collection script is triggered to upload the click time and page load time to the database.
[0183] When the user clicks the "Submit Order" button, the data collection script is triggered to upload the order details and submission time to the database.
[0184] Through the above steps, this embodiment can deploy a data collection mechanism at key user interaction points in the Web front-end page, accurately capture user behavior data and performance indicator data, and provide basic data support for subsequent performance analysis and optimization.
[0185] Furthermore, a third embodiment of the Web front-end performance analysis method of the present invention is proposed. In the above step S20, the step of performing funnel analysis on the user behavior data to obtain a user behavior funnel diagram includes:
[0186] Step b1, identifying the key steps involved in the user's use of the Web front-end page according to the user behavior data, performing statistical analysis on each key step, and calculating the user conversion rate between adjacent key steps, wherein the key step refers to the interactive operation that the user must go through to complete a specific goal on the Web front-end page;
[0187] Step b2, determining the key steps with the most user loss according to the user conversion rate between the adjacent key steps, and forming a user behavior funnel diagram to show the user conversion and user loss of each key step.
[0188] In this embodiment, funnel analysis is performed on user behavior data to identify key steps involved in the user's use of the Web front-end page, calculate the user conversion rate between adjacent key steps, and generate a user behavior funnel chart based on these conversion rates. Through funnel analysis, the conversion and loss of users at each key step can be intuitively displayed, helping to identify problem points and optimization directions in user experience.
[0189] Among them, key steps refer to the important interactive operations that users must go through to complete specific goals on the web front-end page. These steps are usually the focus of user experience and performance optimization. Identifying and analyzing key steps can help us understand the user's behavior path, find user loss points, and optimize the user experience.
[0190] The user conversion rate refers to the proportion of users who go from one key step to the next key step. Calculating the user conversion rate between adjacent key steps can evaluate the user loss at each step. By analyzing the user conversion rate, you can identify the steps with the most user loss and perform targeted optimization.
[0191] A specific implementation method may be: based on user behavior data, identify the key steps involved in the user's use of the web front-end page. These steps are usually the interactive operations that the user must go through to complete a specific task. For example, in an e-commerce website, the key steps may include "browse products", "add to shopping cart", "checkout and payment", etc.
[0192] Perform statistical analysis on each key step and calculate the user conversion rate between adjacent key steps. Clean and preprocess the user behavior data to ensure the accuracy and consistency of the data. Generate a user behavior funnel chart based on the user conversion rate between adjacent key steps to show the user conversion and user churn of each key step. Use data visualization tools (such as Tableau, Power BI, etc.) to graphically display the analysis results.
[0193] Example description:
[0194] Identify key steps: On an e-commerce website, the process of a user purchasing a product usually includes the following key steps:
[0195] Browsing Products: Users browse different products on the website.
[0196] Add to Cart: The user selects the desired product and clicks the “Add to Cart” button.
[0197] Checkout payment: The user enters the shopping cart page, clicks the "Checkout" button and completes the payment.
[0198] Statistical analysis: Conduct statistical analysis on the above key steps and calculate the user conversion rate between adjacent steps:
[0199] Conversion rate from "browsing products" to "adding to cart" = (number of users adding to cart / number of users browsing products) × 100%
[0200] Conversion rate from "add to cart" to "checkout payment" = (number of users who completed payment / number of users who added to cart) × 100%
[0201] Data processing: Clean user behavior data, delete duplicate data and outliers, and ensure the accuracy of statistical analysis.
[0202] Generate a user behavior funnel chart: Use Tableau to generate a user behavior funnel chart: Import the cleaned user behavior data into Tableau. Create a funnel chart to show the user conversion and loss status of each key step.
[0203] The funnel chart shows that the conversion rate from "browse products" to "add to cart" is 50%, and the conversion rate from "add to cart" to "checkout and payment" is 30%.
[0204] Data visualization: Funnel charts can be used to visually display the conversion rate of users at each key step, helping to identify the steps with the most user loss. For example, if the user loss rate of the "add to cart" step is high, the page performance and user experience issues of this step can be further analyzed to perform targeted optimization.
[0205] Through the above steps, this embodiment can perform funnel analysis on user behavior data, identify key steps, calculate user conversion rate, and generate a user behavior funnel chart, thereby providing data support and guidance for the optimization of Web front-end pages.
[0206] Furthermore, a fourth embodiment of the Web front-end performance analysis method of the present invention is proposed, after the above step S30, it also includes:
[0207] Step c1, deploying a monitoring mechanism in the Web front-end page, and monitoring the user behavior data and the performance indicator data in real time through the monitoring mechanism;
[0208] Step c2, using real-time data processing technology to analyze the user behavior data and the performance indicator data to identify abnormal performance indicator data;
[0209] Step c3, setting alarm rules, when the abnormal performance indicator data meets the alarm rules, automatically triggering an alarm.
[0210] In this embodiment, the monitoring mechanism is a system deployed in the Web front-end page, which is used to monitor and collect user behavior data and performance indicator data in real time. The monitoring mechanism continuously collects relevant data by monitoring various events on the page (such as clicks, loads, submissions, etc.), and transmits it to the back-end for further processing and analysis. The monitoring mechanism enables developers to understand the running status and user behavior of the Web page in real time, discover and handle potential problems in a timely manner, and ensure the stability of the page and user experience.
[0211] Real-time data processing technology refers to the technology that processes and analyzes data quickly at the moment it is generated. It can calculate, analyze and store data as it is collected, thereby providing immediate feedback. By processing user behavior data and performance indicator data in real time, abnormal situations can be quickly identified and appropriate measures can be taken to avoid the expansion of problems and the decline of user experience.
[0212] Abnormal performance indicator data refers to performance data that deviates from the normal range, such as long page loading time, slow response time, etc. These data usually indicate that there may be performance problems or user experience problems on the page. Identifying abnormal performance indicator data can help developers quickly locate the problem and perform targeted optimization and repair.
[0213] Alert rules are pre-set judgment criteria. When the monitoring data meets these criteria, the system will automatically trigger an alert to notify relevant personnel to take measures. Alerts can be sent in a variety of ways, such as email, SMS or system notification. The alert mechanism ensures that the development team can be notified immediately when performance problems occur and take timely measures to prevent the problem from further deteriorating.
[0214] The specific implementation method can be: embed a monitoring script in the Web front-end page to monitor various user operations (such as clicks, form submissions, page scrolling, etc.), as well as page performance indicators (such as loading time, response time, resource loading time, etc.). The monitoring script will continuously collect user behavior data and performance indicator data, and transmit it to the back-end database in real time. A real-time data processing system is deployed on the back-end, and stream processing technology (such as Apache Kafka, Apache Flink, etc.) is used to analyze the collected data in real time.
[0215] The analysis content may include: User behavior analysis: Analyze the user's click path, dwell time, conversion rate, etc. to determine whether the user behavior is normal. Performance indicator analysis: Monitor indicators such as page loading time, resource loading time, response time, etc. to identify whether there are performance anomalies.
[0216] Identify abnormal data and alert: According to the set alert rules, detect and analyze whether there are any abnormalities in the results in real time. Alert rules: For example, page loading time exceeding 5 seconds, page response time exceeding 2 seconds, user conversion rate dropping sharply, etc. can all be used as alert trigger conditions.
[0217] Automatic alarm: When the monitoring system detects abnormal data that meets the alarm rules, it automatically sends an alarm notification to the development team or operation and maintenance personnel.
[0218] Example description:
[0219] In the front-end web page of an online shopping website, a monitoring script is embedded to monitor the entire process from user entry to purchase. The monitoring content includes the number of times the user clicks the "Search" button, the operation of adding products to the shopping cart, page loading and response time, etc. The monitoring script collects the above data in real time and sends it to the back-end database.
[0220] At the back end, Apache Kafka is used for stream data processing to analyze changes in each user behavior and each performance indicator. For example, during peak shopping periods, the system analyzes user shopping behavior and page response in real time to determine whether there are problems with slow loading or decreased conversion rates.
[0221] Set alarm rules, such as when the page loading time exceeds 5 seconds or the payment page response time exceeds 3 seconds, the alarm will be automatically triggered. When the system detects that the response time of the payment page exceeds the preset threshold, it will immediately send an email and SMS to notify the development team to handle it, avoiding the loss of users due to slow response in the payment process.
[0222] Through the above steps, this embodiment can deploy a monitoring mechanism in the Web front-end page, perform real-time data processing and analysis, identify abnormal performance indicator data, and automatically trigger alarms, thereby providing an effective means for maintaining the stability of the Web page and improving the user experience.
[0223] Furthermore, a fifth embodiment of the Web front-end performance analysis method of the present invention is proposed. In the above step S20, before the step of performing funnel analysis on the user behavior data, the method further includes:
[0224] Step d1, performing data cleaning and data preprocessing operations on the user behavior data, the data cleaning operation includes deleting duplicate data and outliers, and the data preprocessing operation includes normalizing or standardizing the data.
[0225] In this embodiment, data cleaning refers to processing the collected original user behavior data, deleting duplicate data and outliers, and ensuring the accuracy and consistency of the data. Through data cleaning, inaccurate and invalid data can be removed to ensure the accuracy and reliability of subsequent analysis.
[0226] Data preprocessing is the further processing of cleaned data, including normalization or standardization of data, so that different data can be better compared and analyzed in subsequent analysis. Data preprocessing allows data to be compared on the same scale, eliminates differences in data range and units, and improves the efficiency and effectiveness of data analysis.
[0227] The specific implementation method may be: cleaning the collected user behavior data, including deleting duplicate data and outliers. Checking whether there are duplicate records in the data set, and if duplicate data is found, deleting the redundant records. Checking whether there are outliers (such as extreme values or unreasonable data) in the data set, and processing them according to the specific situation, such as deleting or replacing.
[0228] The cleaned data is preprocessed, including normalization and standardization.
[0229] Normalization processing: scale all data to the interval [0,1]. The commonly used formula is: (x-min) / (max-min), where x is the data value, min is the minimum data value, and max is the maximum data value.
[0230] Standardization processing: convert all data into a standard normal distribution with a mean of 0 and a standard deviation of 1. The commonly used formula is: (x-mean) / std, where x is the data value, mean is the data mean, and std is the data standard deviation.
[0231] Example description:
[0232] In an online shopping website, the collected user behavior data may contain repeated click records and abnormal dwell time data.
[0233] Deleting duplicate data: For example, records of users clicking on the same product multiple times may be collected multiple times, and the redundant click records need to be deleted.
[0234] Handling outliers: For example, extreme values in user dwell time data (such as records with a dwell time of several seconds or hours) need to be detected and processed. A reasonable threshold range can be set, and records outside the range are considered outliers and deleted or replaced.
[0235] Data preprocessing operation: After cleaning, the user behavior data is normalized and standardized to facilitate subsequent funnel analysis.
[0236] Normalization: Scale the user's click count, dwell time and other data to the [0,1] range. For example, the minimum value of the click count data is 1 and the maximum value is 100, and the normalized data range is [0,1].
[0237] Standardization: Convert the residence time data into a standard normal distribution with a mean of 0 and a standard deviation of 1. For example, the mean of the residence time data is 300 seconds and the standard deviation is 50 seconds. The data range after standardization is [-6, 6].
[0238] This embodiment performs data cleaning and preprocessing operations on user behavior data to ensure the accuracy and consistency of the data and provide a reliable data basis for subsequent funnel analysis.
[0239] Furthermore, a sixth embodiment of the Web front-end performance analysis method of the present invention is proposed. In the above step S20, the step of uploading the performance indicator data and the user behavior data to the database includes:
[0240] Step e1, uploading the performance indicator data and the user behavior data to the database using batch uploading and data compression technology, and using SSL / TLS encryption technology during the data uploading process to ensure the security of the data during uploading.
[0241] In this embodiment, batch uploading refers to packaging multiple data records into a batch and then uploading them to the database at one time. Compared with uploading individual data records one by one, batch uploading can significantly reduce the number of uploads and improve data transmission efficiency. Through batch uploading, the overhead of network transmission can be reduced, the speed and efficiency of data upload can be improved, and it is particularly suitable for the transmission of large amounts of data.
[0242] Data compression technology refers to compressing data before data transmission to reduce the size of the data. Commonly used compression algorithms include gzip, bzip2, LZMA, etc. Through data compression, the amount of data to be transmitted can be significantly reduced, thereby reducing bandwidth usage and speeding up data transmission.
[0243] SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are protocols used to provide encryption and security when transmitting data over the Internet. They ensure that data is not eavesdropped, tampered with, or forged during transmission. By using SSL / TLS encryption technology, the security of data transmission during the upload process can be ensured, protecting user privacy and data integrity.
[0244] A specific implementation method may be: the collected performance indicator data and user behavior data are packaged at a certain time interval or quantity to form a data batch, and then uploaded to the database at one time. For example, all data collected every minute may be packaged into a data batch, or every 100 records collected may be packaged into a data batch.
[0245] Before uploading data, use a data compression algorithm to compress the data batches to reduce the size of the data. Commonly used compression algorithms include gzip, bzip2, LZMA, etc. You can choose the appropriate compression algorithm according to the specific situation.
[0246] Use SSL / TLS encryption technology to ensure that data is not eavesdropped or tampered with during transmission. Upload compressed data batches to the backend database through an encrypted connection. Establish an SSL / TLS connection between the server and the client, and use the HTTPS protocol for data transmission to ensure the security of data transmission.
[0247] Example description:
[0248] In an online shopping website, the system collects a lot of user behavior data and performance indicator data every minute, which need to be uploaded in batches.
[0249] Data packaging: All data collected every minute (such as page loading time, number of clicks, etc.) are packaged into a data batch and then uploaded to the database at one time. This can reduce the number of uploads and improve transmission efficiency.
[0250] Data compression: Before uploading, compress the data batches to reduce the volume of data transmission. Use the gzip algorithm to compress the data batches. Assuming the original data batch size is 10MB, it may be reduced to 2MB after compression, thus significantly reducing the amount of data transmitted.
[0251] Data upload and encryption: Use SSL / TLS encryption technology to ensure the security of data during transmission. Establish an SSL / TLS connection between the client and the server, and use the HTTPS protocol for data transmission. Upload the compressed data batches to the backend database through an encrypted connection to ensure that the data is not eavesdropped or tampered with.
[0252] This embodiment uploads performance indicator data and user behavior data to the database by utilizing batch upload and data compression technology, and uses SSL / TLS encryption technology during the data upload process to ensure the security and integrity of the data during transmission.
[0253] Furthermore, a seventh embodiment of the Web front-end performance analysis method of the present invention is proposed, after the above step S30, it also includes:
[0254] Step f1, generating performance optimization suggestions according to the funnel-chart-based performance analysis report, wherein the performance optimization suggestions are used to improve the performance and / or user experience of the Web front-end page.
[0255] In this embodiment, a series of suggestions for improving the performance and user experience of the Web front-end page are generated based on the performance analysis report based on the funnel chart. The performance optimization suggestions are specific measures and solutions proposed based on the performance analysis report, aiming to improve the performance and user experience of the Web front-end page. These suggestions may involve aspects such as page loading speed, response time, and resource optimization. By implementing the performance optimization suggestions, the loading speed, response speed, and overall user experience of the Web front-end page can be improved, user churn can be reduced, and user satisfaction can be improved.
[0256] The performance analysis report is a detailed analysis document generated based on the user behavior funnel and performance indicator data. The report contains the user conversion rate and churn rate at each key step, as well as specific indicators of page performance (such as loading time, response time, etc.). The performance analysis report provides comprehensive performance evaluation and user behavior analysis results, providing data support and decision-making basis for optimizing Web front-end pages.
[0257] The specific implementation method can be: Based on the data and analysis results in the performance analysis report, identify page performance problems and user loss points, and make targeted optimization suggestions. Perform a detailed analysis of each key step in the funnel chart, and combine performance indicator data (such as page loading time, response time, etc.) to identify performance bottlenecks that affect user conversion. These suggestions may include front-end code optimization, resource loading optimization, server performance optimization, etc. Performance optimization suggestions may include but are not limited to the following:
[0258] Optimize page loading speed: for example, reduce the number of HTTP requests for the page, optimize the loading of images and other resources, use a content delivery network (CDN), etc.
[0259] Response time optimization: For example, optimizing server-side code and database queries, using caching mechanisms, etc.
[0260] Improve user experience: for example, simplify user operation processes, optimize interactive design, and improve page usability and friendliness.
[0261] The development team implements the optimization suggestions, adjusts the page structure, optimizes the code and resources, improves the user interface design, etc. Through A / B testing or user feedback, the effect of the optimization measures is verified to ensure that the optimized page performance and user experience are actually improved.
[0262] Example description:
[0263] In an online shopping website, through the generated funnel analysis report, it was found that the conversion rate of the "Add to Cart" step was low and the loading time of the page was long.
[0264] Data analysis: Combined with the performance indicator data, the analysis shows that the page takes a long time to load, mainly due to slow image loading and long script execution time.
[0265] Specific content of optimization suggestions: In response to the above problems, specific performance optimization suggestions are put forward:
[0266] Optimize page loading speed: Optimize image loading: compress image file size, use delayed loading technology to ensure that the image is loaded when the user scrolls to the image position. Reduce the number of HTTP requests: merge multiple CSS and JavaScript files to reduce the number of HTTP requests. Use CDN: host static resources (such as images, CSS, JavaScript files) to CDN to increase resource loading speed.
[0267] Response time optimization: Optimize server-side code: Refactor and optimize server-side code to reduce processing time. Use cache mechanism: Use cache on the server and client to reduce the number of repeated resource loading.
[0268] Improve user experience: Simplify the operation process: Simplify the operation process of "add to cart" and reduce the user operation steps. Optimize interactive design: Improve the design of buttons and prompt information to improve the intuitiveness and friendliness of user operations.
[0269] Implementation and verification of optimization suggestions: The development team implements the optimization suggestions:
[0270] Implement optimization measures: compress images, merge files, use CDN, optimize server-side code, etc.
[0271] Verify the effect: Compare the page performance before and after optimization through A / B testing, collect user feedback, and verify the actual effect of the optimization measures.
[0272] Feedback results: The optimized page loading time is shortened, the user conversion rate in the "add to cart" step is significantly improved, and the user experience is improved.
[0273] This embodiment generates performance optimization suggestions based on the funnel chart-based performance analysis report, and improves the performance and user experience of the Web front-end page by implementing and verifying these suggestions.
[0274] The invention also provides a Web front-end performance analysis device.
[0275] Reference Figure 3 , Figure 3 This is a functional module diagram of the first embodiment of the Web front-end performance analysis device of the present invention. The Web front-end performance analysis device comprises:
[0276] A collection mechanism deployment module deploys a collection mechanism in a Web front-end page, obtains performance indicator data of the Web front-end page through the collection mechanism, and collects statistics on user behavior data;
[0277] A funnel analysis module uploads the performance indicator data and the user behavior data to a database, performs a funnel analysis on the user behavior data, and obtains a user behavior funnel diagram;
[0278] The performance analysis module integrates the user behavior funnel diagram with the performance indicator data to generate a performance analysis report based on the funnel diagram.
[0279] In addition, an embodiment of the present invention further provides a computer storage medium.
[0280] The storage medium stores a Web front-end performance analysis program, which implements the steps of the Web front-end performance analysis method described above when executed by the processor.
[0281] The specific implementation of the storage medium of the present invention is basically the same as the above-mentioned embodiments of the Web front-end performance analysis method, and will not be repeated here.
[0282] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the enlightenment of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the present invention and the claims. All equivalent structures or equivalent process changes made using the contents of the specification and drawings of the present invention, or directly or indirectly used in other related technical fields, are protected by the present invention.
[0283] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to the multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or the flowchart, and the combination of boxes in the block diagram and / or the flowchart can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.
[0284] In addition, each functional module in each embodiment of the present application can be integrated together to form an independent part, or each module can exist separately, or two or more modules can be integrated to form an independent part. If the function is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, RandomAccess Memory), a disk or an optical disk.
[0285] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.
[0286] The above are only various implementations of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
Claims
1. A Web front-end performance analysis method, characterized in that: The following steps are involved: Deploy a collection mechanism in the Web front-end page, obtain performance indicator data of the Web front-end page and count user behavior data through the collection mechanism; Uploading the performance indicator data and the user behavior data to a database, performing funnel analysis on the user behavior data, and obtaining a user behavior funnel diagram; The user behavior funnel chart is integrated with the performance indicator data to generate a performance analysis report based on the funnel chart.
2. The Web front-end performance analysis method according to claim 1, characterized in that: The steps of deploying the collection mechanism in the Web front-end page include: The collection mechanism is deployed at key user interaction points in the Web front-end page, and the key user interaction points refer to important interactive operations performed by users on the Web front-end page.
3. The Web front-end performance analysis method according to claim 1, characterized in that: The step of performing funnel analysis on the user behavior data to obtain a user behavior funnel diagram comprises: Identify key steps involved in the user's use of the Web front-end page based on the user behavior data, perform statistical analysis on each key step, and calculate the user conversion rate between adjacent key steps, wherein the key step refers to the interactive operation that the user must go through to complete a specific goal on the Web front-end page; The key steps with the most user loss are determined according to the user conversion rates between the adjacent key steps, and a user behavior funnel diagram is formed to display the user conversion status and user loss status of each key step.
4. The Web front-end performance analysis method according to claim 1, characterized in that: After the step of generating a performance analysis report based on the funnel chart, the method further includes: Deploy a monitoring mechanism in the Web front-end page, and monitor the user behavior data and the performance indicator data in real time through the monitoring mechanism; Analyze the user behavior data and the performance indicator data using real-time data processing technology to identify abnormal performance indicator data; Set alarm rules, and when the abnormal performance indicator data meets the alarm rules, an alarm is automatically triggered.
5. The Web front-end performance analysis method according to claim 1, characterized in that: Before the step of performing funnel analysis on the user behavior data, the method further includes: The user behavior data is subjected to data cleaning and data preprocessing operations, wherein the data cleaning operation includes deleting duplicate data and outliers, and the data preprocessing operation includes normalizing or standardizing the data.
6. The Web front-end performance analysis method according to claim 1, characterized in that: The step of uploading the performance indicator data and the user behavior data to the database includes: The performance indicator data and the user behavior data are uploaded to the database using batch uploading and data compression technology, and SSL / TLS encryption technology is used during the data uploading process to ensure the security of the data during uploading.
7. The Web front-end performance analysis method as described in claim 1, characterized in that: After the step of generating a performance analysis report based on the funnel chart, the method further includes: A performance optimization suggestion is generated according to the funnel chart-based performance analysis report, and the performance optimization suggestion is used to improve the performance and / or user experience of the Web front-end page.
8. A Web front-end performance analysis device, characterized in that: The Web front-end performance analysis device comprises: A collection mechanism deployment module deploys a collection mechanism in a Web front-end page, obtains performance indicator data of the Web front-end page through the collection mechanism, and collects statistics on user behavior data; A funnel analysis module uploads the performance indicator data and the user behavior data to a database, performs a funnel analysis on the user behavior data, and obtains a user behavior funnel diagram; The performance analysis module integrates the user behavior funnel diagram with the performance indicator data to generate a performance analysis report based on the funnel diagram.
9. A Web front-end performance analysis device, characterized in that: The Web front-end performance analysis device includes a memory, a processor, and a Web front-end performance analysis program stored in the memory and executable on the processor. When the Web front-end performance analysis program is executed by the processor, the steps of the Web front-end performance analysis method according to any one of claims 1 to 7 are implemented.
10. A computer storage medium, characterized in that: The storage medium stores a Web front-end performance analysis program, which, when executed by a processor, implements the steps of the Web front-end performance analysis method according to any one of claims 1 to 7.
Citation Information
Cited By
Website statistical analysis method, device and equipment and storage medium
CN121580444A
