The Style.Tools project started as a free browser-widget that provides a sort of DevTools (developer tools) for frontend optimization (FEO).

Style.Tools is available with 1 click on any page on the internet, including pages behind a login.

Start Style.Tools🔬 FEO (drag the link to the favorites bar to install the widget)

Style.Tools provides access to advanced CSS optimization tools including:

1. CSS editor with themes
2. Critical CSS generator
3. Unused CSS extractor and remover
4. Duplicate CSS remover (unique innovation)
5. CSS beautify
6. CSS code optimization (clean-css)
7. CSS code repair (fix malformed CSS)
8. CSS lint (quality checks)
9. CSS statistics (analysis)
10. PostCSS plugins: autoprefixer and many more
11. Above-the-fold optimizer

The widget provides localhost and offline support via a Service Worker on domain style.tools. You can use many of the features locally without an internet connection. The cache for preferences is preserved across domains.

Installation

The widget is a small piece of Javascript code that can be added to the browser bookmarks or favorites bar via the URL prefix javascript:

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://st.pagespeed.pro/";g="Style.Tools";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+ '.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);