WhatCSS is Your Page Using?

Recent

https://nulledbb.com

Original CSS Size: 4225
BootCSS: 2943 (69.66%)

http://tendertendons.com

Original CSS Size: 5862
BootCSS: 1786 (30.47%)

http://whatcss.info

Original CSS Size: 160058
BootCSS: 7704 (4.81%)

http://techsolutions.net

Original CSS Size: 258393
BootCSS: 12843 (4.97%)

http://techsolutions.net

Original CSS Size: 258393
BootCSS: 12843 (4.97%)

http://whatcss.info

Original CSS Size: 160058
BootCSS: 7704 (4.81%)


WhatCSS: Shrink Your Initial CSS Pageload by up to 94%?

Most of the CSS you deliver to the client on each page load is useless.

WhatCSS.info is a free, opensource CSS page load analyser and optimizer. Brought to you by your friends at i❤️.ws emoji domains, the app allows you to easily see what CSS styles are required to display your site.

WhatCSS.info automatically generates a minified version of the bare minimum CSS a user needs to begin interacting with your site. Dramatically shrink WordPress, Shopify, and Bootstrap themes! Decrease load time! Optimize CSS delivery for SEO!

Wasteful delivery of CSS is bringing you down.

Why make users wait?


How Does WhatCSS Work?

WhatCSS is essentially a wrapper of an instance of Chrome running on a remote server.

Chrome DevTools already captures CSS usage, but the browser lacks the ability to easily output and make sense of results. WhatCSS uses Puppeteer, Google's Headless Chrome Node API, to control a remote browser instance, navigate to a site, and return which stylesheets are in use when the page is fully loaded. ("domcontentloaded" for the nerds.)

WhatCSS.info takes those results from Chrome, applies extra minification with clean-css, and returns BootCSS: the essential style information a visitor needs to view your site.


WhatCSS Usage

That's up to you.

Armed with the minified BootCSS -- often a tiny fraction of the size of your site's total CSS load, especially if you're using a WordPress or Bootstrap theme -- it's trivial to just load the styles you need, defer the rest of the CSS until after the page renders.

In some cases -- a simple site like WhatCSS.info -- the BootCSS is all the site needs to be fully functional. With only 5% of the original CSS from the standard Bootstrap 4 distribution needed to use the site, we just put the CSS inline.

Good enough for a technology demo, maybe doesn't quite meet your actual needs.

There's an example of how to do this in the next section, but an easy variation of this might be to inline the BootCSS and defer the load of the rest of the CSS. This way, the page becomes immediately interactive, but the styles needed for additional exploration come along shortly thereafter.

This approach also alleviates the need to make any hard choices when it comes to cutting CSS, especially if you're just loading some random theme off a CDN.

With WhatCSS having an API/CLI and being opensource and whatnot, it can be integrated to a build process, automating the BootCSS generation.

More sophisticated users might want to divide their CSS into two parts, the first, the BootCSS, essential for displaying the site, and then the rest of the stuff. With both files on a CDN, the second can be safely deferred... or even sub divided into tiny, chunked deferred pieces.


1-2-3: How We Optimized WhatCSS.info

Like all things SEO, we followed the Google PageSpeed Insights Guide to Optimizing CSS Delivery.

(View the source of this page to see an example.)

  1. Determine what stylesheets are being used from the Bootstrap CDN.
    https://whatcss.info/getcss?page=https://whatcss.info&include=stackpath.bootstrapcdn.com&exclude=inline
  2. Insert the BootCSS into the HEAD of the document. The resulting CSS was 4.48% of the original size of Bootstrap.
  3. Defer Bootstrap using the Google CSS Optimization JavaScript example.

Easy enough, right? Took about 5 mins... made a huge difference.


WhatCSS API

Given that WhatCSS.info is itself a wrapper around an API, it's appropriate that there should be an API to that API.

Pretty straightforward: just append "&format=json" to the URL and it'll... return JSON.

https://whatcss.info/getcss?page=https://whatcss.info&format=json

WhatCSS CLI

You can run WhatCSS from the command line, but you've got to hop over to github.com/jonroig/whatcss to get it.

You'll have to have Nodejs on your machine and do the standard npm install.

Example usage:
node whatcss https://whatcss.info -i stackpath.bootstrapcdn.com,facebook.com -e inline

Output is a bunch of JSON. If you elect to take a screenshot, it'll return in PNG/base64 as part of the JSON package.


WhatCSS Filters

Since WhatCSS grabs all the CSS currently in use by your browser, the API provides a way to either explicitly include or ignore CSS stylesheets from different origins.

For instance, CSS from Facebook, Twitter, or Google is almost always rendered by a custom component... and since that's out of your control, optimizing that CSS might be best left to the vendor who included that CSS. (Or, for that matter, those styles might not interfere with your page load at all.)

include/exclude: comma separated list of domains or 'inline'

https://whatcss.info/getcss?page=https://whatcss.info&include=stackpath.bootstrapcdn.com,facebook.com&exclude=inline

Contact Us



@emoji_domains | github.com/jonroig/whatcss
Emoji Domains? i❤️.ws
© 2019 Domain Research Group
Straight outta Scottsdale, AZ!