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 CSS optimization widget
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 repair (fix malformed CSS)
- CSS lint (quality checks)
- CSS statistics (analysis)
- 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:.1
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")+
2
'.</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);
Copied!
Add a new bookmark
CMS integration and plugins
Style.Tools is integrated in professional optimization libraries and CMS plugins including a WordPress FEO plugin and a Google CDN FEO solution.
Last modified 1yr ago
Copy link