Method and apparatus for automatically optimizing the loading of images in a cloud-based proxy service

• US 9,183,319 B2
• Filed: 11/13/2012
• Issued: 11/10/2015
• Est. Priority Date: 10/17/2012
• Status: Active Grant

• Current Assignee: CloudFlare Incorporated
• Original Assignee: CloudFlare Incorporated
• Inventors: Joel, Christopher Stephen, Sofaer, Michael, Holloway, Lee Hahn, Bejjani, Ray Raymond, Tourne, Matthieu Philippe Franois, Pahl, Sbastien Andreas Henry, Knecht, Dane Orion
• Primary Examiner(s): Pan, Yongjia
• Application Number:
  US13/675,977
• Publication Number:
  US 20140108969A1
• Time in Patent Office: 1,092 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06T 3/40 Scaling of whole images or parts thereof, e.g. expanding or contracting
• CPC Class Codes: H04L 67/561 Adding application-functional data or data for application control, e.g. adding metadata
• CPC Class Codes: H04L 67/565 Conversion or adaptation of application format or content adding application control or application functional data H04L67/561
• CPC Class Codes: H04W 4/185 by embedding added-value information into content, e.g. geo-tagging

Abstract

A request is received at a proxy server for a web page, the request originating from a client network application of a client device. The requested web page includes multiple references to multiple images. The proxy server retrieves the requested web page. The proxy server modifies code of the retrieved web page such that the client network application will not, for each one of images, request that image until the location where that image is to be displayed is within a viewport of the client network application or within a defined distance from the viewport of the client network application. The proxy server transmits the modified web page to the client device.

Claims

1. A method for automatically optimizing the loading of images of a web page, the method comprising:

receiving a request for the web page that originates from a client network application of a client device, the web page including a plurality of references to a plurality of images respectively;

retrieving the requested web page, wherein the requested web page includes code that includes a plurality of image tags for the plurality of images respectively;

modifying the code of the retrieved web page such that the client network application will not, for each one of the plurality of images, request that image until the location where that image is to be displayed is within a viewport of the client network application or within a defined distance from the viewport of the client network application, wherein modifying the code of the retrieved web page includes the following;

modifying each of the plurality of image tags such that the client network application will not initially request those images, and

adding a set of one or more client-side scripts or one or more references to one or more client-side scripts that, when executed by the client network application, cause the client network application to perform the following;

determine a size of the viewport, and

make a request for only those of the plurality of images whose corresponding image placeholders are within the viewport of the client network application or within the defined distance from the viewport of the client network application by restoring those modified image tags, wherein each request is to indicate a requested image size based on the determined size of the viewport and a set of one or more image dimensions as governed by the code of the web page; and

transmitting the modified web page to the client device.

2. The method of claim 1, wherein the set of client-side scripts are further configured to, when executed by the client network application, determine that the client network application is connecting through a mobile connection operated by a mobile network operator.

3. The method of claim 1, wherein the set of client-side scripts, when executed by the client network application, further determine a location of each image placeholder of the plurality of images relative to the viewport.

4. The method of claim 3, wherein the set of client-side scripts, when executed by the client network application, further determine the location of each image placeholder of the plurality of images relative to the viewport as the viewport is scrolled.

5. A method in a client device for automatically optimizing the loading of images of a web page while rendering the web page, the method comprising:

receiving a web page, wherein the web page includes a plurality of image tags that refer to a plurality of images respectively and further includes a set of one or more client-side scripts;

determining, through execution of at least one of the set of one or more client-side scripts, a size of a viewport of a client network application of the client device;

for each of the plurality of image tags, determining a location in the web page where the corresponding image is to be displayed, wherein each of the plurality of image tags has been modified such that the client network application will not request the corresponding image until the determined display location for those corresponding images are within the viewport or within the defined distance from the viewport; and

for each and only those of the plurality of image tags whose determined location in the web page where the corresponding image is to be displayed is within the viewport or within a defined distance from the viewport, performing the following;

determining, through execution of at least one of the set of one or more client-side scripts, a set of one or more dimensions that the image is to be displayed as governed by code of the web page,

transmitting a request for that image that includes an indication of a requested size of that image based on the determined size of the viewport and the set of dimensions,

receiving that image, and

displaying that image.

6. The method of claim 5, wherein requests are not transmitted for those of the plurality of image tags whose corresponding determined location in the web page is not within the viewport or within the defined distance from the viewport.

7. The method of claim 5, wherein the client device is connecting through a mobile connection operated by a mobile network operator.

8. The method of claim 5, wherein the requested size of the image is no greater than the size of the viewport.

9. A non-transitory machine-readable storage medium that provides instructions that, when executed by a processor, cause the processor to perform operations comprising:

receiving a request for a web page that originates from a client network application of a client device, the web page including a plurality of references to a plurality of images respectively;

retrieving the requested web page, wherein the requested web page includes code that includes a plurality of image tags for the plurality of images respectively;

modifying the code of the retrieved web page such that the client network application will not, for each one of the plurality of images, request that image until the location where that image is to be displayed is within a viewport of the client network application or within a defined distance from the viewport of the client network application, wherein modifying the code of the retrieved web page includes the following;

modifying each of the plurality of image tags such that the client network application will not initially request those images, and

adding a set of one or more client-side scripts or one or more references to one or more client-side scripts that, when executed by the client network application, cause the client network application to perform the following;

determine a size of the viewport, and

make a request for only those of the plurality of images whose corresponding image placeholders are within the viewport of the client network application or within the defined distance from the viewport of the client network application by restoring those modified image tags, wherein each request is to indicate a requested image size based on the determined size of the viewport and a set of one or more image dimensions as governed by the code of the web page; and

transmitting the modified web page to the client device.

10. The non-transitory machine-readable storage medium of claim 9, wherein the set of client-side scripts are further configured to, when executed by the client network application, determine that the client network application is connecting through a mobile connection operated by a mobile network operator.

11. The non-transitory machine-readable storage medium of claim 9, wherein the set of client-side scripts, when executed by the client network application, further determine a location of each image placeholder of the plurality of images relative to the viewport.

12. The non-transitory machine-readable storage medium of claim 11, wherein the set of client-side scripts, when executed by the client network application, further determine the location of each image placeholder of the plurality of images relative to the viewport as the viewport is scrolled.

13. A non-transitory machine-readable storage medium that provides instructions that, when executed by a processor, cause the processor to perform operations comprising:

receiving a web page, wherein the web page includes a plurality of image tags that refer to a plurality of images respectively and further includes a set of one or more client-side scripts;

determining, through execution of at least one of the set of one or more client-side scripts, a size of a viewport of a client network application of the client device;

for each of the plurality of image tags, determining a location in the web page where the corresponding image is to be displayed, wherein each of the plurality of image tags has been modified such that the client network application will not request the corresponding image until the determined display location for those corresponding images are within the viewport or within the defined distance from the viewport; and

for each and only those of the plurality of image tags whose determined location in the web page where the corresponding image is to be displayed is within the viewport or within a defined distance from the viewport, performing the following;

determining, through execution of at least one of the set of one or more client-side scripts, a set of one or more dimensions that the image is to be displayed as governed by code of the web page,

transmitting a request for that image that includes an indication of a requested size of that image based on the determined size of the viewport and the set of dimensions,

receiving that image, and

displaying that image.

14. The non-transitory machine-readable storage medium of claim 13, wherein requests are not transmitted for those of the plurality of image tags whose corresponding determined location in the web page is not within the viewport or within the defined distance from the viewport.

15. The non-transitory machine-readable storage medium of claim 13, wherein the client device is connecting through a mobile connection operated by a mobile network operator.

16. The non-transitory machine-readable storage medium of claim 13, wherein the requested size of the image is no greater than the size of the viewport.