Move CSS to Head
The 'Move CSS to head' filter is enabled by specifying:
pagespeed EnableFilters move_css_to_head;
in the configuration file.
'Move CSS to head' seeks to reduce the number of times the browser must re-flow the document by ensuring that the CSS styles are all parsed in the head, before any body elements are introduced.
This is based on the best practice for optimizing browser rendering.
The 'Move CSS to head' filter operates only on CSS
<style> tags found after the
</head> and moves these links back into the
For example, if the HTML document looks like this:
Then PageSpeed will rewrite it into:
In some browsers, the original version will flash quickly as the browser will render the "Hello, world!" text before it sees the style tags providing definitions for the CSS classes. This transformation will eliminate that flash, but the end result will be the same.
You can see the filter in action at
www.modpagespeed.com on this
This filter operates within the scope of a "flush window". Specifically,
large, or dynamically generated HTML files may be "flushed" by the
resource generator before they are complete. If the filter
encounters a flush after the end of the
subsequently encountered CSS elements will not be moved into the