Pre-Read WebSphere Commerce Performance:
Read links for 1- performance and 2- dynacache related articles since WebSphere Commerce v6 on my blog:
Improving UI Performance:
Validate: This step will make sure that the syntax and layout of the CSS/JS is semantically and syntactically correct before all the other tools run against it
Concatenate: This step will combine the many JS/CSS files that are always used together into a single file
Optimise: This step will optimise the JS/CSS to make it more efficient in particular it will look for and remove redundant JS function and CSS elements
Minify: Once the JS/CSS has been validated, concatenated and optimised it will be minified removing unnecessary characters
Choice of Tools:
There are various utilities and tools available to automate these improvements. Personally, I like Grunt since there is abundant support available on the web which can be re-used including existing examples/templates. Secondly, there are more modules available in Grunt than Gulp (which is another tool that is available for this purpose). And thirdly, there are plugins that allow Grunt to be run from the developer's toolkit so that they don't need to switch to the command line.
- The source files will then be optimized by running a simple UI build procedure script written in gruntfile.js which will create the optimized version of these files.
- The corresponding JSPs, HTML etc will be updated to use the optimized version of the files generated by Grunt.
Build and Deployment:
The processed mentioned above improves the UI deployment and makes it similar to the backend deployment process. That is, the developers edit the source java files in their IDE and then this gets compiled into Java classes and built/deployed into EAR and WAR files ready for deployment and unit testing. This same process will need to be adopted for UI development too - edit source in IDE, run UI build, deploy and unit test which will use generated optimized UI assets.
Once the UI optimization is in place, use WebPage Test - https://www.webpagetest.org/ to analyse the performance implications
WebPagetest is used for measuring and analyzing the performance of web pages. There are a lot of options that may seem intimidating at first but doing quick testing is pretty simple.
Check quick start guide here: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide
In the next blog I will write detailed steps of 1- Installation and configuration of tools, 2- Prepare build/deployment and 3- measuring performance.