Skip to main content
mod_pagespeed 2.1 is here — open source (Apache-2.0): the module you know, plus the optimizer worker

Move CSS above scripts

CSS

Reorders CSS ahead of scripts so styles are not blocked by JavaScript.

Filter move_css_above_scripts · Filter docs

A module filter.

Original Open in new tab
Optimized Open in new tab

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 the mod_pagespeed module 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

716 B 639 B
−11%

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 the mod_pagespeed module applies in place — self-hosted on Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an the optimized response headers shown above. Open source under the Apache License 2.0 — free in development and in production.

Download & run
← All optimization examples