Move CSS above scripts
CSSReorders CSS ahead of scripts so styles are not blocked by JavaScript.
Filter
move_css_above_scripts
· Filter docs
A mod_pagespeed 1.15 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.
Both frames render identically — that's the goal. The win is in the bytes and requests
below, not the look. They're served live by mod_pagespeed 1.15 on
demo-httpd-1.1.modpagespeed.com; the optimized frame
applies only this filter. Right after a cache purge it may briefly match the original while
the worker rewrites it — reload to see the result.
Measured impact
Total bytes
What changed in the source
The page's HTML, before and after this filter. Red lines are removed, green lines are added.
… 2 unchanged lines …
<title>move_css_above_scripts example</title>
</head>
<body>
- <script src="combine_javascript1.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="styles/all_styles.css"><script src="combine_javascript1.js" type="text/javascript"></script>
<div class="blue yellow big bold">
Hello, world!
</div>
<p>
Look at the source for this page to see the stylesheet moved.
</p>
- <link rel="stylesheet" type="text/css" href="styles/all_styles.css">
+
</body>
</html>
Run this on your own site
This is one of 49 filters mod_pagespeed 1.15 applies in place — self-hosted on
Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an
X-PageSpeed-Warn: unlicensed header until you license it.
Production use requires a commercial license — but the software never locks you out.