Skip to main content
ModPageSpeed 2.0 and mod_pagespeed 1.1 — Now available

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 mod_pagespeed 1.1 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.

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 mod_pagespeed 1.1 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. 


                
                  

                      … 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>
← All optimization examples