Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
penthouse
Advanced tools
#penthouse
Critical Path CSS Generator
Penthouse is a tool generating critical path css for your web pages and web apps in order to speed up page rendering. Supply the tool with your site's full CSS, and the page you want to create the critical CSS for, and it will return all the CSS needed to render the above the fold content of the page. Read more about critical path css here.
The process is automatic and the generated css is production as is. If you run in to problems however, check out the Problems section further down on this page.
Penthouse can be used:
Install PhantomJS first, and make sure it works for you. Then download the penthouse.js
file.
phantomjs penthouse.js [URL to page] [CSS file] > [critical path CSS file]
//for example
phantomjs penthouse.js http://mySite.com/page1 allStyles.css > page1-critical-styles.css
phantomjs penthouse.js http://mySite.com/page2 allStyles.css > page2-critical-styles.css
To run on HTTPS pages two extra flags must be passed in, directly after phantomjs in the call:
--ignore-ssl-errors=true --ssl-protocol=tlsv1
//as such:
phantomjs --ignore-ssl-errors=true --ssl-protocol=tlsv1 penthouse.js [URL to page] [CSS file] > [critical path CSS file]
By default penthouse gives you the css needed to render a viewport of size 1300x900
. This css will cover all smaller viewport sizes, unless you're delivering a different DOM or doing something crazy. You can pass in your a different viewport width
and viewport height
if you want; these two params must follow the [CSS file]
like this:
phantomjs penthouse.js [URL to page] [CSS file] [Viewport WIDTH] [Viewport HEIGHT] > [critical path CSS file]
npm install --save-dev penthouse
This will add penthouse to the list of dependencies
Require as normal and execute with a callback
var penthouse = require('penthouse'),
path = require('path');
penthouse({
url : 'http://google.com',
css : path.join(__basedir + 'static/main.css'),
width : 400, // viewport width
height : 240 // viewport height
}, function(err, criticalCss) {
console.log(criticalCss);
});
The Penthouse Node module can also be used as in Gulp.
http://jonassebastianohlsson.com/criticalpathcssgenerator/
###Background images or Fonts missing
Change any relative paths (f.e. background-image: url("../images/x.gif");
) to absolute (starting with a /
): background-image: url("/images/x.gif");
, and then try again.
###Unstyled content showing
The most common problem is with clearing floats. Instead of clearing elements appearing after floated elements (f.e. using clear:both;
), clear the floats themselves by using the clear-fix pattern. Float clearing will now work also in the generated critical css.
If you for some reason have an element appearing early in the DOM, but that you apply styles to move outside of the above the fold content (using absolute position or transforms), consider whether it really should appear so early in the DOM.
###Special glyphs not showing/showing incorrectly
Problems with special characters like → after converting? Make sure you use the correct hexadecimal format in your CSS. You can always get this format from your browser console, by entering '→'.charCodeAt(0).toString(16)
(answer for this arrow glyph is 2192
). When using hexadecimal format in CSS it needs to be prepended with a backslash, like so: \2192
(f.e. content: '\2192';
)
###Other problems Please report your issue (check that it's not already there first though!), and I will try to fix it as soon as possible.
2014-10-24 v0.2.51 Remove animation declarations (@pocketjoso)
2014-07-27 v0.2.5 Handle all non nested @-rules (@pocketjoso)
2014-07-20 v0.2.4 Fix extra line break bug on Windows (@pocketjoso)
2014-07-19 v0.2.3 Improved @-rule handling (@pocketjoso)
2014-07-12 v0.2.2 Remove :hover, and invalid, selectors (@pocketjoso)
2014-06-20 v0.2.1 Handle previous content clearing styles (@pocketjoso)
2014-06-10 v0.2.0 Node module and standalone executable (@fatso83)
2014-06-05 v0.1.0 Published on NPM (@pocketjoso)
2014-06-04 v0.0.0 PhantomJS script /core logic (@pocketjoso)
FAQs
Generate critical path CSS for web pages
The npm package penthouse receives a total of 27,153 weekly downloads. As such, penthouse popularity was classified as popular.
We found that penthouse demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.