Skip to main content
ModPageSpeed 2.0: AVIF, WebP, and critical CSS — up to 69% less page weight on the live demo

Move CSS to head

CSS

Moves stylesheets into the <head> so the browser finds them sooner.

Filter move_css_to_head · 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

This filter changes how the page is structured or delivered, not its size — so there's no byte or request reduction to chart. The change shows in the source diff below.

What changed in the source

The page's HTML, before and after this filter. Red lines are removed, green lines are added.


                
                  
<html>
<head>
<title>move_css_to_head example</title>
- </head>
+ <link rel="stylesheet" type="text/css" href="styles/all_styles.css"></head>
<body>
<div class="blue yellow big bold">
Hello, world!
</div>
- <link rel="stylesheet" type="text/css" href="styles/all_styles.css">
+
</body>
</html>

Run this on your own site

This is one of 47 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. A commercial license is required for production use.