Rich-text Reply
Highlighted

How to improve JavaScript code so it doesn't slow down a webpage?

im_omi 10-24-17

How to improve JavaScript code so it doesn't slow down a webpage?

[ Edited ]

Hi,

I'm looking for any  advice on improving my JS code or anything in general to prevent my webpage from slowing down any further. 

 

My current webpage takes ~6 - 11 seconds on a bad day. This is probably due to the images and several other JS/API calls that are being made. With the variant changes I've made it, it ends up taking twice as long...which is extremely frustrating.

 

I've implement my Experiment JS similar to the sample code below (I minify it before saving it in the editor):

 
// grabs and stores these before all the changes are made
var _globalVar1  = $("input[name='_global1']").val();
var _globalVar2  =  $("input[name='_global1']").val(); 

window.initABT = function() { 
// several (about 20) click and change events. These are on original and variant elements
$(".elment1").click(function() { // .on('click', function () {
}); 
$(".elment2").change(function () { // .on('change', function () {
}); 

// several functions (about 6) called in triggered events above 
function doThis() { ... }
function doThat() { ... }
}; 

// I've used this approach based on an article I found on Optiverse.
// Adding functions and trigger events directly in editor or in document ready didn't work.
$(window).bind('load', function() {
window.initABT();
});

I'm currently troubleshooting it based on the tips here: Troubleshoot Problems. So far nothing is improving the speed.

 

Note:

  • I'm using Optimizely Classic
  • Snippet size: 250 KB
  • New images and CSS file (48 KB) are being stored on an Amazon S3 instance. I'm importing the CSS

 

Any advice will be greatly appreciated.

 

Thanks in advance!

.omi

 

 

Level 2