Intermediation Server Optimizes Webpage Rendering on Portable Devices
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Portable electronic devices face performance issues when rendering webpages due to limited computing and network resources, as they struggle with slow loading times and page shifts caused by unknown image sizes during transcoding.
Innovation Solution
An intermediation server optimizes HTML by removing unnecessary data, determining image locations and sizes, and modifying IMG tags to enable faster rendering on portable devices, allowing for initial page generation without waiting for image loading, using caching technologies to enhance performance.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If desktop-optimized web-pages are provided on portable electronic devices, then the webpage content and layout are optimized for desktop viewing, but the rendering speed becomes impractically slow due to constrained computing resources
Solution Approach 1:
An intermediation server is introduced between the web server and portable device. This server receives the desktop-optimized webpage, performs server-side image transcoding and optimization, and delivers the processed content to the portable device. This intermediary handles the computational complexity of image processing, allowing the portable device to render pages faster without needing to perform heavy image processing itself.
Solution Approach 2:
Image transcoding and optimization are performed in advance on the intermediation server before the webpage is delivered to the portable device. By pre-processing images to appropriate formats and sizes for portable devices, the rendering burden is reduced, enabling faster display performance on resource-constrained devices.
2Productivity
If static web-pages optimized for portable devices are provided, then rendering speed improves, but different sets of web-pages must be prepared for different computing environments
Solution Approach 1:
The intermediation server dynamically adjusts image parameters (format, size, compression) based on the portable device's capabilities and the specific webpage context. Rather than creating separate static versions for each device type, the server modifies image parameters on-demand, maintaining a single source webpage while adapting it to different portable devices through parameter transformation.
Solution Approach 2:
The intermediation server acts as a dynamic adapter between the desktop-optimized source and various portable devices. It performs real-time or pre-processing to convert images into appropriate formats and sizes, eliminating the need to manually prepare different static versions for each device while still achieving optimized rendering performance.
3Adaptability or versatility
If transcoding of desktop-optimized web-pages is performed, then a single set of web-pages can be used, but current transcoding processes do not adequately address rendering problems resulting in poor performance
Solution Approach 1:
The intermediation server performs comprehensive parameter changes on images including format conversion (e.g., to JPEG or PNG), size reduction, and compression optimization. These parameter transformations are specifically tailored for portable device capabilities, ensuring both compatibility and fast rendering performance simultaneously.
Solution Approach 2:
Image transcoding and optimization are performed in advance on the intermediation server before delivery to the portable device. This preliminary processing ensures that images are pre-optimized for the specific device capabilities, eliminating rendering delays and ensuring smooth performance without requiring the device to perform heavy processing.
4Loss of information
If images are loaded on a portable device, then the webpage content is complete, but the page location shifts and the browser becomes unusable until fully loaded
Solution Approach 1:
Image placeholders are generated in advance with correct dimensions and positions based on the optimized image parameters. These placeholders are embedded in the webpage structure before the actual images are loaded, allowing the page layout to be established immediately without shifting when images arrive, thus maintaining browser usability throughout the loading process.
Solution Approach 2:
Placeholder elements are created as copies or representations of the actual images, containing the correct dimensional and positional information. These placeholders occupy the same space and position as the final images will, preventing layout shifts and maintaining page stability during the image loading process.
Data Source
AI summary
Portable electronic devices typically have reduced computing resources, including reduced screen size. The method, apparatus and system of the present specification provides, amongst other things, an intermediation server configured to access network content that is requested by a portable electronic device and to analyze the content including analyzing images in that content. The intermediation server is further configured to accommodate the computing resources of the portable electronic device as part of fulfilling content requests from the portable electronic device.