Hybrid Web Page Rendering for Faster Initial Paint
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Client-side rendering of web pages with numerous interactive components can lead to prolonged loading times due to script processing, and server-side rendering with timeouts results in wasted server time and delayed first contentful paint and first meaningful paint, especially for complex webpages like object tracking applications.
Innovation Solution
Implement a hybrid rendering approach where server-side rendering is truncated at a threshold number of components, with initial components rendered on the server and remaining components rendered on the client-side, optimizing the use of both server and client resources.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If client-side rendering is used to render interactive web page components, then the web page can be displayed with interactive functionality, but the loading time is prolonged due to script processing requirements
Solution Approach 1:
The patent segments the web page components into two categories: static components rendered on the server and interactive components rendered on the client. This segmentation allows the server to deliver immediate HTML for static content while the client progressively loads and executes scripts for interactive elements, resolving the contradiction between immediate display and interactive functionality.
Solution Approach 2:
The server performs preliminary rendering of static web page components into HTML before transmission to the client. This preliminary action enables the client to display content immediately upon receipt without waiting for script execution, while interactive components are loaded and executed subsequently to provide the required functionality.
2Speed
If server-side rendering with timeout is used to render web page components, then initial display can be achieved, but server time is wasted and first contentful paint is delayed for complex webpages
Solution Approach 1:
The patent extracts the rendering responsibility for interactive components from the server and assigns it to the client. The server only renders static components and delivers them as HTML, while the client handles the rendering of interactive components using received scripts and data. This extraction eliminates server timeout issues and reduces server processing time for complex web pages.
Solution Approach 2:
The server performs partial rendering by only rendering static web page components rather than attempting to render all components including interactive ones. This partial action approach avoids the excessive processing time and timeout problems associated with rendering complex interactive components on the server, while still achieving fast initial display of the static content.
3Loss of information
If all web page components are rendered on the server, then complete content can be delivered, but server resources are overutilized and response time increases
Solution Approach 1:
The patent segments web page components into static and interactive categories, assigning different rendering responsibilities to the server and client respectively. The server renders only static components to maintain high response efficiency, while the client renders interactive components to ensure content completeness. This segmentation resolves the contradiction between complete content delivery and server productivity.
Data Source
AI summary
Methods, systems and computer readable media for responding to webpage requests are disclosed. The method includes: receiving a request to render a webpage, the webpage comprising a plurality of webpage components; identifying at least a subset of webpage components of the plurality of webpage components to be rendered by the server; rendering the identified webpage components at the server and converting to HyperText Markup Language (HTML); and communicating the HTML of the webpage components rendered at the server along with unrendered web components of the plurality of webpage components to a client device for displaying on a display of the client device. The client device includes a client browser configured to render the unrendered webpage components and display all webpage components on the display of the client device.