"Fossies" - the Fresh Open Source Software Archive

Member "incubator-pagespeed-mod-1.14.36.1/html/doc/filter-hint-preload-subresources.html" (28 Feb 2020, 4552 Bytes) of package /linux/www/apache_httpd_modules/incubator-pagespeed-mod-1.14.36.1.tar.gz:


Caution: In this restricted "Fossies" environment the current HTML page may not be correctly presentated and may have some non-functional links. You can here alternatively try to browse the pure source code or just view or download the uninterpreted raw source code. If the rendering is insufficient you may try to find and view the page on the incubator-pagespeed-mod-1.14.36.1.tar.gz project site itself.

Hint Resource Preloading

Note: New feature as of 1.12.34.1.

Configuration

The 'Hint Resource Preloading' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters hint_preload_subresources
Nginx:
pagespeed EnableFilters hint_preload_subresources;

in the configuration file.

Description

'Hint Resource Preloading' uses resource preloading HTTP headers to inform browsers of CSS and JavaScript resources early in page processing, to permit them to fetch them earlier than would otherwise be possible.

Operation

The 'Hint Resource Preloading' filter operates by inserting HTTP headers based on content observed in the HTML page (and CSS loaded from it) on earlier visits; it does not alter the HTML.

For example, if the HTML document looks like this:

<link rel="stylesheet" type="text/css" href="styles/all_styles.css">
<img src="bigimage.jpeg">
<script src="script.js" type="text/javascript"></script>
Where all_styles.css contains:
@import url("basic.css");
@import url("fancy.css");
@import url("print.css") print;

Then PageSpeed will add the following HTTP headers to the page:

link: </styles_all_styles.css>; rel=preload; as=style; nopush
link: </basic.css>; rel=preload; as=style; nopush
link: </fancy.css>; rel=preload; as=style; nopush
link: </script.js>; rel=preload; as=script; nopush

Example

You can see the filter in action at www.modpagespeed.com on this example.

Limitations

This filter only discovers resources specified in the HTML. Additionally it can follow one level of @import inclusion from <link>ed stylesheets to find additional stylesheets to hint. Resources loaded by scripts and further inside CSS will not be hinted for preloading. The filter itself does not look inside <style> blocks, but the default-enabled inline_import_to_link filter can make some of their contents accessible.

The filter cannot understand complex media queries, so it will handle them conservatively, assuming the resource isn't needed.

When optimizations done by other filters expire, hints for optimizing those resources will not be generated (as it is unknown whether they'll get re-optimized at the point the HTTP headers are generated).

Risks

This filter is considered low risk. Since it only adds HTTP headers it is extremely unlikely to affect page correctness, as HTTP headers are generally invisible to web page operation, though a script using XMLHttpRequest to request a rewritten page would be able to observe them.

However, the addition of extra headers can be counterproductive if the resources they hint are already easy to discover from the browser's parser, especially in HTTP/1, which lacks header compression.