Combine CSS

CSS

Combines multiple stylesheet files into one to cut HTTP requests.

Filter combine_css · 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.

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

HTTP requests

5 2

−3

Total bytes

4.7 KB 4.6 KB

−3%

HTML size

435 B 305 B

−30%

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>combine_css example</title>
                    

                      -     <link rel="stylesheet" type="text/css" href="styles/yellow.css">
                    

                      -     <link rel="stylesheet" type="text/css" href="styles/blue.css">
                    

                      -     <link rel="stylesheet" type="text/css" href="styles/big.css">
                    

                      -     <link rel="stylesheet" type="text/css" href="styles/bold.css">
                    

                      +     <link rel="stylesheet" type="text/css" href="styles/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.xo4He3_gYf.css"/>
                    

                      +     
                    

                      +     
                    

                      +     
                    

                          </head>
                    

                          <body>
                    

                            <div class="blue yellow big bold">

← All optimization examples