A module filter.
Inline CSS
Inlines small external stylesheets to remove a render-blocking request.
Filter
inline_css
·
Filter docs
·
Read the full guide
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
HTTP requests
Total bytes
- original
- 835 B
- optimized
- 721 B
−114 B −14% in size
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">
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 the optimized response headers shown above. Open source under the Apache License 2.0 — free in development and in production.