Minnifying techniques of CSS, JS and images to avoid multiple requests to server

Question

I've a web based application developed in Java. It has got 10+ js files and 15+ images and 10+ css files for each page to load.

Each file load on browser treats as a single request, so I'm looking for a better solution to avoid multiple requests to webserver to improve performance of my page.

Answer 1

If you are developing in Java you are likely to be using Maven. Maven has a couple of really great plug-ins for CSS and JS minification and also for creating css sprites. The following code in our pom xml creates sprites images out of our existing css and then minifies css and js.

<plugin>
                <groupId>net.jangaroo</groupId>
                <artifactId>smartsprites-maven-plugin</artifactId>
                <version>1.5</version>
                <configuration>
                    <rootDirPath>${webappDirectory}/resources/css/sprites/</rootDirPath>
                    <outputDirPath>${webappDirectory}/resources/css/generated_sprites/</outputDirPath>
                    <cssFileSuffix>-generated-sprite</cssFileSuffix>
                    <logLevel>WARN</logLevel>
                    <spritePngDepth>AUTO</spritePngDepth>
                    <spritePngIeSix>false</spritePngIeSix>
                    <cssFileEncoding>UTF-8</cssFileEncoding>
                    <documentRootDirPath>${webappDirectory}</documentRootDirPath>
                </configuration>
                <executions>
                    <execution>
                        <id>createSprites</id>
                        <phase>generate-sources</phase>
                        <goals>
                             <goal>createSprites</goal>  
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>com.samaxes.maven</groupId>
                <artifactId>minify-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>minify-initial-load-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>initial_load/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>initial_load.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-internal-pages-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>internal_pages/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>internal_pages.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-initial-load-js</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <jsEngine>closure</jsEngine>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <jsSourceDir>/resources/js/initial_load</jsSourceDir>
                            <jsSourceIncludes>
                                <jsSourceInclude>jquery-1.7.1.min.js</jsSourceInclude>
                                <jsSourceInclude>*.js</jsSourceInclude>
                            </jsSourceIncludes>
                            <jsSourceExcludes>
                                <jsSourceExclude>*gui.nocache.js</jsSourceExclude>                              
                            </jsSourceExcludes>
                            <jsFinalFile>initial_load.js</jsFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>

Good luck!