CSS optimization widget
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.
Style.Tools provides access to advanced CSS optimization tools including:
CSS editor with themes
Critical CSS generator
Unused CSS extractor and remover
Duplicate CSS remover (unique innovation)
CSS beautify
CSS code optimization (clean-css)
CSS code repair (fix malformed CSS)
CSS lint (quality checks)
CSS statistics (analysis)
PostCSS plugins: autoprefixer and many more
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.
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://style.tools/";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);
Source of widget: https://github.com/style-tools/widget/blob/master/widget.js (849 Bytes)
Visit https://style.tools/ for instructions and a easy drag&drop link to install the widget.
Style.Tools is integrated in professional optimization libraries and CMS plugins including a WordPress FEO plugin and a Google CDN FEO solution.
For information, see https://pagespeed.pro/
