Performance tricks for faster web application
1. Avoid using redirect
2. Minimize server time for request
3. Use Content Distribution Networks (CDN’s) for instance using Azure
4. Maximize Concurrent Connections – Define Explorer connections max connections + add a new domains. For each domain can be 6 connections. If you have 2 domains the 12 connections can be used.
5. Minimize Bytes downloaded
a. Compress traffic – needs to define Accept –encoding:gzip
6. Provide Cacheable content
a. Add to page <% Response.Expires = Fri, 20 Apr 2011 00:00:00 GMT %>
7. Cached jQuery Data Request example:
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
cache: false, -> define to true if want to cache
success: callback
});
8. Standardize on File Capitalization Convention
Need to define standard names for attributes for instance:
Lower Case
<img src="icon.png" />
Title Case
<img src="Icon.png" />
Careless Developer
<img src="ICon.png" />
In this case the browser downloads the files three times, Must be the same name.
9. Link Style sheets at Top of Page, Never Link Style sheets at Bottom of Page
10. Avoid Using @import for Hierarchical Styles
Example:
@import url(/stylesheets/one.css);
@import url(/stylesheets/two.css);
.MyHeading
{
color: red;
font-family: 'New Century Schoolbook', serif;
font-family: 'New Century Schoolbook', serif;
background: white;
}
11. Avoid Embedded and Inline Styles
Example:
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.item { color:#009900;}
</style>
<div class=‘item’>MyItem</div>
</body>
</html>
12. Only Include Necessary Styles
/* These styles are for the home page. */
.Homepage
{
color: red;
background: white;
}
/* These styles are for the ontent page. */
.Contentpage
{
color: red;
background: white;
background: white;
}
13. Use correct images format
Image Formats: PNG, JPEG, JPEG-XR
· PNG (Default)
- Website Elements, Logo
· JPEG
- Photographs
· JPEG-XR
- High Resolution Photographs
· Don’t Get Distracted
- GIF, TIFF, BMP, WebP, etc.
14. Use Native Image Resolutions
Example:
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 500 x 400 -->
<img src="logo.png" width="50" height="40" />
…
</body>
</html>
15. Use Image Sprites - if needs to create close images then create one
16. Replace Images with CSS3 Gradients
17. Replace Images with CSS3 Border Radius
18. Embed Small Images Through DataUR ( small images)I
Example:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQV
QI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5Erk=="
alt="Red dot" />
19. Avoid Linking JavaScript In Head
20. Avoid Inline JavaScript
21. Link JavaScript at End of File
22. Use the Defer Tag When Head Only Option good for application like CRM and say to the browser to download the file and run at only all files are downloaded.
Example:
<script src="myscript.js" defer= "defer"></script>
23. Remove Duplicate Code
Example:
<script src="jquery.js" … ></script>
<script src="myscript.js" … ></script>
<script src="navigation.js" … ></script>
<script src="jquery.js" … ></script>
24. Minify Your JavaScript: Character Removal
Example:
Initial (66 Characters)
function Sum(number1, number2) {
return (number1 + number2);
}
Characters Removed (54 Characters)
function Sum(number1,number2){return number1+number2;}
25. Minify Your JavaScript: Compaction
Example:
Initial (54 Characters)
function Sum(number1,number2){return number1+number2;}
Compacted (30 Characters)
function Sum(a,b){return a+b;}
26. Minify Your JavaScript: Inlining
Example:
Initial (72 Characters)
function Sum(a,b){return a+b;}
function GetScore(H1,H2){return sum(a,b);}
Inlined (37 Characters)
function GetScore(H1,H2){return H1+H2}
27. Initialize JavaScript on Demand
Example:
var userTileScriptsLoaded = false;
function CustomizeUserTile()
{
if (userTileScriptsLoaded == false)
{
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script);
}
}
28. JSON Always Faster than XML for Data
29. Use Native JSON Methods
Example:
Native Browser JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
30. Ceil/Floor Your Double Precision Floats
Example
var test = 25/2;
Actual Number in Memory
0x4fd5 5555 5555 5555
Result
12.4999999999999999999999914829616256247390992939472198486328
Get Back to Integer
Math.ceil(test);
Math.floor(test);
31. Minimize DOM Interactions
Example:
function CalculateSum()
{
// Retrieve Values
var lSide = document.body.all.lSide.value;
var rSide = document.body.all.rSide.value;
// Generate Result
document.body.all.result.value = lSide + rSide;
}
32. Use Selectors API for Collection Access
Example:
var reqs = document.querySelectorAll(".required");
var missingRequiredField = false;
for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == "")
missingRequiredField = true;
}
33. User .innerHTML to Construct Your Page
Example:
function InsertUsername()
{document.getElementById(‘user').innerHTML = userName; }
Enjoy,
Rami Heleg
