Progressive consolidation of web page resources

• US 9,785,621 B2
• Filed: 11/15/2013
• Issued: 10/10/2017
• Est. Priority Date: 11/26/2012
• Status: Active Grant

• Current Assignee: Akamai Technologies, Inc.
• Original Assignee: Akamai Technologies, Inc.
• Inventors: Podjarny, Guy, Dumoulin, Christopher R.
• Primary Examiner(s): Nguyen, Chau
• Application Number:
  US14/081,235
• Publication Number:
  US 20140149844A1
• Time in Patent Office: 1,425 Days
• CPC Class Codes: G06F 40/117 Tagging; Marking up details of markup languages G06F40/143; Designating a block; Setting of attributes style sheets, e.g. eXtensible Stylesheet Language Transformation [XSLT], G06F40/154
• CPC Class Codes: G06F 40/131 Fragmentation of text files, e.g. creating reusable text-blocks; Linking to fragments, e.g. using XInclude; Namespaces
• CPC Class Codes: G06F 40/134 Hyperlinking
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06F 40/146 Coding or compression of tree-structured data
• CPC Class Codes: G06F 40/151 Transformation
• CPC Class Codes: G06F 40/154 Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
• CPC Class Codes: G06F 40/166 Editing, e.g. inserting or deleting

Abstract

Described herein are systems, method and devices for modifying web pages to enhance their performance. In certain non-limiting embodiments, improved resource consolidation techniques are described, which are sometimes referred to herein as ‘progressive’ consolidation. Such techniques can be used to consolidate page resources in a way that allows a client browser or other application to process each of the consolidated resources after it arrives, even if all the client has not fully retrieved all of the consolidated resources yet. The teachings hereof can be used, for example, to modify a markup language document (HTML) to consolidate CSS, JavaScript, images, or other resources referenced therein.

Claims

1. A method implemented by a computer device for modifying web pages before delivery to client web browser, to enhance web page performance, the method comprising:

receiving HTML associated with a web page;

modifying the HTML by removing first and second references in the HTML, the first reference being to a first resource and the second reference being to a second resource, the first and second resources each being of a first type that a client processes only after the entire resource is received by the client web browser;

wherein the first and second resources comprise one of;

(i) first and second CSS files of type CSS, (ii) first and second image files of type image, and (iii) first and second scripts of type script;

inserting content from the first resource and content from second resource into a container resource, wherein the container resource is of a second type in which content from the first resource will be processed by the client web browser to render the web page without waiting for content from the second resource to be received by the client web browser;

wherein said processing to render the web page without waiting for content from the second resource to be received comprises;

(iv) for the first and second resources comprising first and second CSS files, the client web browser applying at least part of the content of the first CSS file to render the web page before the content of the second CSS file finishes downloading to the client web browser;

(v) for the first and second resources comprising first and second image files, the client web browser beginning to display the first image file before the second file finishes downloading to the client web browser;

(vi) for the first and second resources comprising first and second scripts, the client web browser executing at least part of the first script to render the web page before the second script is finished downloading to the client web browser;

modifying the HTML by inserting a reference to the container resource into the HTML, so as to have the client web browser process the content from the first resource and the content from the second resource that is in the container resource while processing the HTML; and

,

serve the modified HTML to the client web browser.

2. The method of claim 1, further comprising inserting an iFrame into the HTML, and inserting the reference to the container resource within the iFrame.

3. The method of claim 1, wherein the container resource is a file of type HTML.

4. The method of claim 1, wherein any of the references to the first resource, second resource, and container resource are URIs.

5. The method of claim 1, further comprising inserting code into the HTML, the code being executable at the client web browser to apply the content from the first resource and the content from the second resource when rendering the web page based on the HTML.

6. The method of claim 1, further comprising:

inserting an iFrame into the HTML, and inserting the reference to the container resource within the iFrame;

inserting code into the HTML, the code being executable at the client web browser to apply the content from the first resource and the content from the second resource when rendering the web page based on the HTML;

wherein the code is written in JavaScript and the code causes the client web browser to any of;

(a) execute the contents of a JavaScript resource in a parent frameglobal context of the iFrame and (b) apply style rules from a CSS resource to a parent frame of the iFrame.

7. The method of claim 6, where the code maintains an execution order of the JavaScript resource and a cascading order of the CSS resource.

8. The method of claim 1, where the HTML and the container resource are served from the same hostname.

9. The method of claim 1, where the HTML and container resource are served from different hostnames.

10. The method of claim 9, comprising inserting code into the HTML, the code being executable at the client web browser to apply the content from the first resource and the content from the second resource when rendering the web page based on the HTML, and the code employs a cross-domain communication method.

11. The method of claim 1, further comprising inserting an iFrame tag into the HTML, wherein the reference to the container resource is within the iFrame tag, and the container resource is a file of type HTML.

12. A proxy server machine comprising circuitry forming one or more processors and at least one storage device storing instructions for modifying web pages before delivery to client web browser, to enhance web page performance, the instructions, when executed by the one or more processors, causing the proxy server machine to:

receive a request for HTML from web browser running on a client device, the HTML being associated with a web page;

request the HTML from another server machine;

receive the HTML from the another server machine;

modify the HTML by removing first and second references in the HTML, the first reference being to a first resource and the second reference being to a second resource, the first and second resources each being of a first type that is processed by the web browser only after the entire resource is received by the web browser;

wherein the first and second resources comprise one of;

(i) first and second CSS files of type CSS, (ii) first and second image files of type image, and (iii) first and second scripts of type script;

modify the HTML by;

inserting a reference to a container resource into the HTML, so as to have the web browser process the content from the first resource and the content from the second resource that is in the container resource while processing the HTML; and

,

serve the modified HTML to the web browser;

wherein the container resource comprises content from the first resource and content from second resource, and the container resource is of a second type in which content from the first resource will be processed by the web browser to render the web page without waiting for content from the second resource to be received by the web browser;

wherein said processing to render the web page without waiting for content from the second resource to be received comprises;

(iv) for the first and second resources comprising first and second CSS files, the client web browser applying at least part of the content of the first CSS file to render the web page before the second CSS file finishes downloading to the client web browser;

(v) for the first and second resources comprising first and second image files, the client web browser beginning to display the first image file before the second file finishes downloading to the client web browser;

(vi) for the first and second resources comprising first and second scripts, the client web browser executing at least part of the first script to render the web page before the second script is finished downloading to the client web browser.

13. The machine of claim 12, wherein the another server machine comprises an origin server associated with a content provider.

14. The machine of claim 12, wherein the instructions, when executed by the one or more processors, cause the proxy server to insert an iFrame into the HTML, and insert the reference to the container resource within the iFrame.

15. The machine of claim 12, wherein the container resource is a file of type HTML.

16. The machine of claim 12, wherein the instructions, when executed by the one or more processors, cause the proxy server to insert code into the HTML, the code being executable at the web browser to apply the content from the first resource and the content from the second resource when rendering the web page based on the HTML.

17. The machine of claim 12, where the HTML and container resource are served from different hostnames.