dr-css-inliner
Advanced tools
PhantomJS script to inline above-the-fold CSS on a webpage.
Inlining CSS for above-the-fold content (and loading stylesheets in a non-blocking manner) will make pages render instantly. This script will help extract the CSS needed.
As proposed by the Google Pagespeed team: Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC - 2013
There are two ways of processing a webpage; loaded via the url argument or piped in through stdin. When using stdin it is required that you use the --fake-url option in conjunction.
Once Phantomjs has loaded the page all stylesheets with no media set or with media set to screen or all are loaded again through XHR to avoid browser engine bias when parsing CSS.
The CSS is inlined as per the supplied options and all stylesheets and style elements stripped from the webpage html. You can opt to expose the stripped stylesheets as an array in a script tag through the -e (--expose-stylesheets) option.
phantomjs index.js <url> [options]
-w, --width [value] - Determines the width of the viewport. Defaults to 1200.-h, --height [value] - Determines the above-the-fold height. Defaults to the actual document height.-m, --match-media-queries - Omit media queries that don't match the defined width.-r, --required-selectors [string|array] - Force inclusion of required selectors in the form of a comma-separated selector string or an array of regexp strings (remember to escape ., [ and ] etc). Defaults to no required selectors.-s, --strip-resources [string|array] - Avoid loading resources matching the string (or array of strings) turned into regexp pattern(s). Default is no stripping of resources.-c, --css-only - Output the raw required CSS without wrapping it in HTML.-e, --expose-stylesheets [string] - A variable name (or property on a preexisting variable) to expose an array containing information about the stripped stylesheets in an inline script tag.-t, --insertion-token [string] - A token (preferably an HTML comment) to control the exact insertion point of the inlined CSS. If omited default insertion is at the first encountered stylesheet.-i, --css-id [string] - Determines the id attribute of the inline style tag. By default no id is added.-f, --fake-url - Defines a fake url context. Required when piping in html through stdin. Default is null.-d, --debug - Prints out an HTML comment in the bottom of the output that exposes some info:
time - The time in ms it took to run the script (not including the phantomjs process itself).loadTime - The time in ms it took to load the webpage.processingTime - The time in ms it took to process and return the CSS in the webpage.requests - An array of urls of all requests made by the webpage. Useful for spotting resources to strip.stripped - An array of urls of requests aborted by --strip-resources option.cssLength - The length of the inlined CSS in chars.Only inline the needed above-the-fold CSS for smaller devices:
phantomjs index.js http://www.mydomain.com/index.html -w 350 -h 480 -m > index-mobile.html
Inline all needed CSS for the above-the-fold content on all devices (default 1200px and smaller):
phantomjs index.js http://www.mydomain.com/index.html -h 800 > index-page-top.html
Inline all needed CSS for webpage:
phantomjs index.js http://www.mydomain.com/index.html > index-full-page.html
Inline all needed CSS for webpage with extra required selectors:
phantomjs index.js http://www.mydomain.com/index.html -r ".foo > .bar, #myId" > index-full-page.html
Inline all needed CSS for webpage with extra required regexp selector filters:
phantomjs index.js http://www.mydomain.com/index.html -r '["\.foo > ", "\.span-\d+"]' > index-full-page.html
The examples listed below use the following index.css and index.html samples (unless specified otherwise):
index.css:
.foo {
color: #BADA55;
}
.bar {
color: goldenrod;
}
index.html:
<!doctype html>
<html>
<head>
<title>Foo</title>
<link href="index.css" rel="stylesheet" media="screen" />
<link href="print.css" rel="stylesheet" media="print" />
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
Doing:
phantomjs index.js index.html
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<style>
.foo {
color: #BADA55;
}
</style>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
-c, --css-only
phantomjs index.js index.html -c
...would get you:
.foo {
color: #BADA55;
}
-e, --expose-stylesheets [string]
Single global variable:
phantomjs index.js index.html -e stylesheets
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<style>
.foo {
color: #BADA55;
}
</style>
<script>
var stylesheets = [{url: "index.css", media: "screen"}, {url: "print.css", media: "print"}];
</script>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
Namespaced property:
phantomjs index.js index.html -e myNamespace.stylesheets
provided you had an index.html like:
<!doctype html>
<html>
<head>
<title>Foo</title>
<script>
var myNamespace = {};
</script>
<link href="index.css" rel="stylesheet" media="screen" />
<link href="print.css" rel="stylesheet" media="print" />
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<script>
var myNamespace = {};
</script>
<style>
.foo {
color: #BADA55;
}
</style>
<script>
myNamespace.stylesheets = [{url: "index.css", media: "screen"}, {url: "print.css", media: "print"}];
</script>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
-t, --insertion-token [string]
provided you had an index.html like:
<!doctype html>
<html>
<head>
<title>Foo</title>
<!-- CSS goes here -->
<script>
var myNamespace = {};
</script>
<link href="index.css" rel="stylesheet" media="screen" />
<link href="print.css" rel="stylesheet" media="print" />
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
phantomjs index.js index.html -t "<!-- CSS goes here -->"
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<style>
.foo {
color: #BADA55;
}
</style>
<script>
var myNamespace = {};
</script>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
-s, --strip-resources [string|array]
Doing:
phantomjs index.js index.html -s ["\.(jpg|gif|png)$","webstat\.js$"]
... would avoid loading images and a given web statistic script.
-d, --debug
Doing:
phantomjs index.js index.html -d
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<style>
.foo {
color: #BADA55;
}
</style>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
<!--
{"time":300,"loadTime":155,"processingTime":145,"requests":[...],"stripped":[...],"cssLength":5050}
-->
-i, --css-id [string]
Doing:
phantomjs index.js index.html -i my-inline-css
...would get you:
<!doctype html>
<html>
<head>
<title>Foo</title>
<style id="my-inline-css">
.foo {
color: #BADA55;
}
</style>
</head>
<body>
<h1 class="foo">Inlining CSS is in</h1>
</body>
</html>
stdin-f, --fake-url [string]
If you need to parse HTML that is not yet publicly available you can pipe it into dr-css-inliner. Below is a contrived example (in a real-world example imagine an httpfilter or similar in place of cat):
cat not-yet-public.html | phantomjs index.js -f http://www.mydomain.com/index.html
All loading of assets will be loaded relative to the fake url - meaning they need to be available already.
FAQs
PhantomJS script to inline above-the-fold CSS for a webpage.
The npm package dr-css-inliner receives a total of 0 weekly downloads. As such, dr-css-inliner popularity was classified as not popular.
We found that dr-css-inliner demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.