Combine and compress multiple CSS and JS files into a single file with ease

What is UX Dork?

UX Dork is a tool for web developers and coders to allow CSS and JS aggregation for your websites.

Sign in to save your preferences:
 
Forgot Password?
Combine and compress multiple CSS and JS files into a single file with ease.
For the quickest example, view the source code of our website.
We left our old CSS and JS commented out in the header and footer of the page.

Although this tool works with CSS and JS alike, let's focus on CSS to drive the point home.
So here's the main problem - when you're building new websites your options are as follows:

  1. You keep everything super basic (like this website)
    No bells, no whistles, only two CSS files, one for bootstrap, one for your own CSS - that's cool. PageSpeed will be happy that you don't have too many files, but it will still tell you that your CSS needs to be compressed, but okay, you score 8 out of 10. Not bad. So you think, okay, I can just minify my file... and you do, you get 9 out of 10, but now every time you want to change CSS it takes you an extra 10 minutes because you need to make your modifications.
  2. You add more pages and more styling to your website
    Okay, let's say you get a little traction now and you want to add a little color to your site to keep visitors happy. You add an icon font library, maybe add a slider of some sort, and then you need to add a form but you want to have an uploader, so you drop another library. It all adds up. Now PageSpeed will say that your libraries are compressed... maybe your code isn't compressed, but they look past that. Overall you have too many files. You score 6 out of 10.
  3. You use UX Dork to combine your files
    Then you stumble on our humble website and say "sure, I'll give it a try". You spend 2 minutes on importing your site into our database and you get a replacement script for all of your CSS files. You spend another 2 minutes commenting out your style sheets (because let's be honest, you don't trust us yet) and adding our stylesheet instead of the 5, 10 or 20 stylesheets you used to have. That stylesheet is nicely compressed and Page Speeds pats you on the back and gives you 9 out of 10.

So How does UX DORK work exactly?

  1. YOU: add your domain name as a project
  2. UX DORK: scans your domain name for CSS and JS files
  3. UX DORK: lists your files in your control panel
  4. YOU: pick the order in which your files need to be loaded
  5. UX DORK: outputs a clean URL for you to add back to your website

So you end up with a single URL that extracts your existing CSS and JS files from your website, combines them into one file and compresses it as much as possible, leaving you with one CSS and one JS file on your website.

So how do I modify my CSS and JS files going forward?"
You just modify the files in your CSS and JS folders and upload them to the site. We will attempt to reload these changes automatically, but if you don't see the changes take place instantly, come beck to UX DORK and click the rescan button.

And then you ask: "Okay, so is 9 out of 10 the best I can get with UX Dork?"
If you keep adding libraries, PageSpeed will sooner or later complain that you are loading CSS files that aren't being used. For instance, you are adding a bootstrap CSS that has column sizes from 1 through 12 but you only use columns sized "3, 4, 6 and 12". In a perfect world they would have you remove columns "1, 2, 5, 7, 8, 9, 10 and 11" because you're only using 33% of your stylesheet, but you want to keep those in case you ever want to add a narrower column, right? So yes. 9 out of 10 is a great score for any dynamic website. If you're 100% sure your website will never ever change, then UX DORK is probably not for you anyway.