Move CSS Above Scripts
The 'Move CSS Above Scripts' filter is enabled by specifying:
pagespeed EnableFilters move_css_above_scripts;
in the configuration file.
'Move CSS Above Scripts' seeks to make sure scripts do not block the loading of CSS resources.
This is based on the best practice for downloading resources early.
The 'Move CSS Above Scripts' filter operates only on CSS
<style> tags found after the
<script> tag and moves these tags above the first
For example, if the HTML document looks like this:
Then PageSpeed will rewrite it into:
Note: You may also want to enable the move_css_to_head filter to avoid a flash of unstyled content. When both filters are enabled, stylesheets are moved into the head and above the first script.
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 first
subsequently encountered CSS elements will not be moved above it.