Resource plugin for performance optimization of Grails app

Posted By : Nagesh Chauhaan | 12-Oct-2012

grails

resource plugin grails

In my recent projects, I have noticed that the amount of time it takes for a Web Page to load is just one of the common complaints from web users. Among a number of causes behind this problem the big one is page size that increases download time. A good rule of optimization is to keep only what is necessary and keeping css and script size as small as possible.There are many ways to make your web application appear fast by tuning application components.

Grails provides a number of plugins to improve web application performance, some of frequently used plugins are : UI Performance Plugin, Google Website Optimizer, Canonical Tagging Plugin for SEO, Compress Plugin and much more .

The main idea behind performance and optimization is how smartly we utilize our resources , to make it more easy Grails provides a very useful plugin named "Resources" .This plugin provides a very effective way of adding static contents to your web page and gives a clean image to bundle all your css and js files in a single file. Infact you dont even need to combine your css/Js physically, "Resources" w'll do all these stuff for you dynamically.

These days i am working on a project and my overall goal is to make the application more optimize and fast to appear over browser. "Resources" plugin helped me out in an intelligent way . Today i am going to share my experience and knowledge that w'll help you to implement the plugin in your apps.

Step 1 : First of all we need to install "Resources" plugin to feel the real magic.

Step 2: After installing the plugin our next target is to bundle all those css and JS together as a module .

To do this we can create a file in grails-app/conf/ with a name that ends in “Resources.groovy“ or we can add these modules in resources.groovy ,to make it simple lets create AppResources.groovy and use the DSL to declare the resource :

modules = {
	index { 
        resource url:'site-css/reset.css'
		resource url:'site-css/style.css'
		
		resource url:'site-js/jquery.coda-slider-2.0.js'
		resource url:'site-js/jquery.simplyScroll.js'
               }
	}

Step 3 : Our last step is to add those modules in appropriate gsp's , by doing this we w'll be able to send all those js/css bundles as a single file .

'Resources' provides a rich tag support to add 'css/Js' efficiently to gsp's, but here we w'll discuss two very useful tags only and that’s enough for now.

The r:require tag tells the framework which resource module the current GSP requires. The framework will make sure that all the resources declared in those modules are pulled in the correct order, and other one is r:layoutResources tag that we need to add on two places , because one will render the resources that we need to link to in the <head> section of our page (all your CSS, and some of our JavaScript, maybe some favico or iPhone icons). The other goes at the end of the <body> of our page, to render any “deferred” resources, which is usually just your JavaScript code.

and we are done with it , by doing this we w'll be able to bundle all our js/css in a single file before sending them over the network .

To make sure if we did it correctly just check it in 'page source' ,to open page source right click on page and select 'View Page Source'

after implementing the ‘css/js’ merge successfully all your indivisual js/css links w’ll be raplaced by two lines like

disposition

The disposition keyword that we used after resource tells the framework that which part of the page, the resource belongs to .The default dispositions supported are “head” and “defer” but in fact resources can define any disposition they like .The framework applies a default disposition based on the type of the resource ,so CSS always defaults to “head” but JavaScript always defaults to “defer”, so that it runs only when the rest of the page has loaded.

Resource modules usually contain multiple resources and the main reason to specify a disposition when declaring a resource is to force JavaScript to load in the <head> section of the page. To achieve that you just update your resource declaration to include a “disposition” attribute:

modules = {
 index {
	resource url:'site-css/reset.css'
	resource url:'site-css/style.css'
	resource url:'site-css/js-scroll.css'
	resource url:'site-js/jquery.min.js',disposition:'head'
	      }
		  }

Points to remember

1 - Most of the js files are very much dependent on order , so while adding js files to module we must take care of their order .

2 - In case we are having some js file in our module on which other files are dependent, than we should place layoutResources tag as the very first element in head .

3 - If we are trying to add more than 1 module to a page , than both modules try to render on single layoutResources tag , and this may lead to an error , so its better to have a single module per page.

Hope it helps !

Nagesh Chauhan

www.oodlestechnologies.com