CODEWITHSUNDEEP
javajavascriptcssperformancewebserver
Sudheer
Sudheer

Reputation: 51

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

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.

Upvotes: 5

Views: 696

Answers (6)

David Tolioupov
David Tolioupov

Reputation: 173

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!

Upvotes: 2

user1428716
user1428716

Reputation: 2136

These are certain optimizing techniques you should use

  1. Minify the js - You can use Yahoo's YUI compress.
  2. CSS file can be merged into one.
  3. Image Files - Use CSS Sprites - Visit Google's website on how to apply CSS Sprites to minimise the round-trips to the server

Above all a thorough code-review is the most important factor , in taking repreated / unused code out of equation in the JS file.

For further optimiztion , try measuring you JS Performance by using Firebug on Firefox and Page Speed on Chrome. If you jave IE10 then use all the three tools to judge the page performance

Upvotes: 0

Lan
Lan

Reputation: 6640

I do not think there is any existing solution to bundle all CSS/JS/Images into one single request, unless you are willing to merge the CSS/JS file into one file yourself. For images, it will still be multiple request. Here are the things you can do to improve performance

  1. For Javascript and CSS, you can use minification feature to reduce the download size. I chose YUI in one of my project and it reduces the size 40-50%. I left the obfuscation feature off so that it is easier for developer to debug JavaScript. Minification can be done during runtime or build time. I chose build time so that it is less intrusive.

  2. Leveraging the browser cache to reduce requests to the server. However, because browser settings can be different based on client, it is better to use server side caching related header to control the behavior. For static files, most application servers have their own default settings. For example, WebLogic uses a FileServlet to serve requests for static content such as css and javascript and it is the FileServlet sets all the headers to static content. In order to change the default header and fine-control the caching behavior, one way is to use servlet filter to modify the header in the response object.

Hope these helps.

Upvotes: 0

JoG
JoG

Reputation: 6732

Have a look at jawr or granule. Those will minify and optimize your css/javascript. Jawr can also embed you css images into the css itself using base64 encoding, but the project has not been updated for a while now, but i have been using it successfully in multiple projects.

Granule seems to use Google Closure Compiler which seems to have advanced javascript optimization techniques.

Upvotes: 0

stephanlindauer
stephanlindauer

Reputation: 2346

maybe have a look at grunt.js you will have to setup a build process in which you can minify / uglify your code and also concatenate your files so you end up with only one .js file...

Upvotes: 0

Rais Alam
Rais Alam

Reputation: 7016

Near about all Browsers have cache mechanism until you externally not define not to store files on client browser.. Once a file is downloaded will be cached in browser so next time any hit for same file will be returned from browser cache.

So in your case all file will be downloaded once and next time it will not be downloaded. For first hit it will be slow but after that it will become fast.

Upvotes: 0

Related Questions