The document discusses various techniques for improving web UI performance including minification, obfuscation, compression, combination, setting expiration headers, CSS image sprites, parallelizing downloads, using content delivery networks, browser and web-based performance tools, and specific techniques for Java, .NET, PHP, and Drupal web applications. Some examples include using pack:tag in Java to combine scripts and stylesheets, the ExpiresFilter in Tomcat, the jscssconsolidate tool for .NET, and the phpminify library for PHP. The goal is to reduce page size, number of requests, and load time to improve user experience.
1. Web UI Performance Tuning
Cross platform tools and techniques
Andy Pemberton,
Tuesday, November 2, 2010
2. Minification
/**
* This, friends, is a very important function.
*/
function exampleFunction(){
var be = true;
if(be){
confirm(“You sure about that?”);
}else if(!be){
confirm(“Apparently not.”);
}
}
function exampleFunction(){var be=true;if(be)
{confirm("You sure about that?")}else{if(!be)
{confirm("Apparently not.")}}};
Tuesday, November 2, 2010
3. Minification
/**
* This, friends, is a very important function.
*/
function exampleFunction(){
var be = true;
if(be){
confirm(“You sure about that?”);
}else if(!be){
confirm(“Apparently not.”);
}
}
function exampleFunction(){var be=true;if(be)
{confirm("You sure about that?")}else{if(!be)
{confirm("Apparently not.")}}};
Original: 205Minified: 121
41%
Tuesday, November 2, 2010
4. Obfuscation
function exampleFunction(){
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
confirm(“You sure about that?”);
}else if(!aLongerThanNecessaryVariableName){
confirm(“Apparently not.”);
}
}
function exampleFunction(){
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}
Tuesday, November 2, 2010
5. Obfuscation
function exampleFunction(){
var aLongerThanNecessaryVariableName = true;
if(aLongerThanNecessaryVariableName){
confirm(“You sure about that?”);
}else if(!aLongerThanNecessaryVariableName){
confirm(“Apparently not.”);
}
}
function exampleFunction(){
var a = true;
if(a){
confirm("You sure about that?");
}else if(!a){
confirm("Apparently not.")
}
}
Original: 238Obfuscated: 145
39%
Tuesday, November 2, 2010
43. In the wild...
• large non functional scripts
(omniture, foresee, etc.)
• large, unoptimized images
• vast number of javascript includes
Tuesday, November 2, 2010