Web Page Visually Complete Time Determination via Media Element Monitoring
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for determining web page visually complete time are inaccurate for real users, especially with moving objects like sliders and animations, as they rely on synthetic lab calculations and intensive image processing, which are not applicable in real-world environments.
Innovation Solution
A monitoring process identifies media elements within a viewport, calculates their render times, and determines the visually complete time as the render time of the last media element to finish loading, using JavaScript and Web fundamentals to compute this value on real user browsers, including resources without load handlers like background images.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If synthetic lab calculations and image processing are used to determine visually complete time, then measurement can be performed, but the measurement precision is poor for real users and moving objects
Solution Approach 1:
The patent replaces the mechanical image processing system with a JavaScript-based monitoring system that uses DOM event listeners and performance APIs to track media element loading and rendering events directly in the browser, eliminating the need for screenshot capture and image comparison
Solution Approach 2:
The patent introduces a monitoring process as an intermediary between the web page resources and the visually complete time determination, using JavaScript code to listen for load events and render events on media elements, thereby indirectly measuring the rendering completion time without direct image analysis
2Measurement precision
If screenshot capture and image processing are used to track rendering stabilization, then visually complete time can be determined, but the loss of time is excessive due to intensive processing
Solution Approach 1:
The patent attaches load event listeners and render event listeners to media elements in advance, before the actual loading and rendering process completes, so that when the events occur, the timing data is immediately captured without requiring post-processing analysis
Solution Approach 2:
The patent substitutes the time-consuming image processing mechanism with efficient JavaScript event-driven timing that captures render completion moments directly through browser-provided performance APIs, reducing processing time from seconds to milliseconds
3Measurement precision
If traditional synthetic methods are used to compute visually complete time, then a measurement can be obtained, but the measurement precision is poor for moving objects like sliders and animations
Solution Approach 1:
The patent implements a dynamic monitoring system that continuously tracks the state changes of media elements during page loading and interaction, using event listeners that adapt to different types of media elements including those with animations and moving objects, rather than relying on static screenshot comparisons
Solution Approach 2:
The patent enables the browser's JavaScript engine to self-monitor and report rendering events for media elements, utilizing the browser's built-in performance tracking capabilities to provide accurate timing data without external intervention or complex analysis
Data Source
AI summary
In one embodiment, a monitoring process identifies a plurality of media elements added inside a viewport of a webpage, and calculates a render time of each of the plurality of media elements. After determining a load completion time of the webpage, the monitoring process may then determine a particular media element of the plurality of media elements that rendered last in the viewport before the load completion time based on the calculated render times. Accordingly, the monitoring process may then establish that a visually complete time (VCT) of the webpage is a corresponding render time of the particular media element that rendered last in the viewport.