The 'Flatten CSS Imports' filter is enabled by specifying:
pagespeed EnableFilters flatten_css_imports;
in the configuration file.
When this filter is enabled, you may also enable the following setting:
pagespeed CssFlattenMaxBytes bytes;
This is the maximum size in bytes of the flattened CSS; if flattening would result in CSS larger than this then flattening will be aborted and the CSS will be left unchanged.
Reduce the number of HTTP round-trips by combining multiple CSS resources into one.
This filter implements the PageSpeed rule for avoiding CSS imports.
flatten_css_imports parses linked and inlined CSS and flattens it by
@import rules with the contents of the imported
file, repeating the process recursively for each imported file.
It works on CSS found in
<style> blocks and
flatten_css_imports recursively processes imported CSS files; if a
file cannot be processed then the entire process is aborted and the initial
CSS is left unflattened.
The CSS is processed as follows; if any step fails the entire process is aborted and the CSS is left unflattened:
- The CSS is parsed; if there are any errors while parsing
@importrules, this step fails.
- The CSS is checked for any leading
@charsetrule; if there is one and the specified character set is not the same as the current one then this step fails.
@importrules are removed and the specified files are fetched and processed recursively and each removed
@importrule is replaced with its file's flattened contents; if a file cannot be fetched for any reason this step fails.
- Any rulesets following the
@importrules are appended.
- The resulting CSS is minified; if it can't be minified this step fails.
- The size of the resulting CSS is checked against the configured maximum for flattened CSS; if it is too big this step fails.
- Finally, the original
<link>is replaced with the minified CSS.
The initial charset is determined according to
the rules for
HTTP: from the HTML's response headers if any, otherwise from the
charset attribute of the
<link> element if
any, otherwise it defaults to
@import rules can specify the media type(s) that apply to the
imported file, and the initial
<link> element can also specify the applicable media types.
flatten_css_imports remembers the "containing" media types
and if an
@import specifies media types it applies the
intersection of the containing and specified media types to the imported
file; if this is empty then the file is ignored because it cannot apply.
This is only done for simple media types, not media expressions. If a
flattened file has any media types other than
all then its
rulesets are wrapped in an appropriate
The rewrite_css filter must be enabled for this filter to be applied.
Only CSS referenced by
tags is rewritten.
style attributes of HTML elements
are not rewritten.
Not all CSS3 or proprietary constructs are parsed. When unhandled syntax is present and the file cannot be parsed completely, the CSS file is left unflattened.
flatten_css_imports is considered moderate risk because it makes the
fairly complex media optimization described above.