Inline CSS
CSSInlines small external stylesheets to remove a render-blocking request.
Filter
inline_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.
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
HTTP requests
6 3
−3 Total bytes
833 B 721 B
−13% 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>inline_css example</title>
- <link rel="stylesheet" href="styles/all_styles.css">
+ <style>.yellow {background-color: yellow;}
+ .blue {color: blue;}
+ .big { font-size: 8em; }
+ .bold { font-weight: bold; }
+ </style>
<link rel="stylesheet" href="styles/blue.css" media="print">
<link rel="stylesheet" href="styles/bold.css" media="not decodable">
- <link rel="stylesheet" href="styles/yellow.css" media=", ,print, screen ">
- <link rel="stylesheet" href="styles/rewrite_css_images.css" media="all">
+ <style media=", ,print, screen ">.yellow {background-color: yellow;}
+ </style>
+ <style media="all">.foo {
+ background-image: url(images/BikeCrashIcn.png);
+ width: 100px;
+ height: 100px;
+ }</style>
</head>
<body>
<div class="blue yellow big bold">