css-optimizer is a tool that helps you to remove un-used css rules
(extra css rules
) basing on sample html files of your website
//Step 01.
//Initialize CSSOptimizer with target css file (file will be optimized)
//and output file (result file after optimizing target cssfile)
CSSOptimizer optimizer = new CSSOptimizer("bootstrap.css","bootstrap.min.css");
//Step 02. Sampling your website by downloading web pages or using http urls
optimizer.addHtmlFile("about-us.htm");
optimizer.addHtmlFile("home.htm");
optimizer.addHtmlFile("blog.htm");
optimizer.addHtmlFile("http://your-website.com/product/ipad");
//Step 03. Some classes or tags are added using Javascript code, declare them here:
optimizer.keepClassName("img-thumbnail");
optimizer.keepClassName("pagination");
optimizer.keepTagName("hr");
//Step 04. Execute optimizing,
//result file will be stored in path that is declared in Step 01.
optimizer.optimize();
We used css-optimizer to remove un-used css rules
in library bootstrap.css.
As a result, 59%
rule has been removed, css file size reduced from 121KB
to 59KB
and increased about 5 score
when testing my site on Google PageSpeed
Please check out and run the test file TestCSSOptimizer.java to see example result
The most important things that i use in this project are Regular Expression
and CSS Rule design. I use Regular Expression
to split css rules and extract all information about rules and put them into object models (CSSStyleRule, NonCSSStyleRule and CSSMediaRule). Following is class diagram
of css-optimizer:
Steps to optimize css file includes:
- Step 1. use jsoup to parse sampling html files and extract all used html tags and css classes
- Step 2. use
Regular Expression
to parse css file and put information into object models - Step 3. compare the result from
Step 1.
andStep 2.
to get only used css rules and write down them into the result file
Email: thoqbk@gmail.com
The MIT License (MIT)