Page Loading Performance Gains

01 May 2014

Turns out having around 100 <iframe>’s that pull data from YouTube or Soundcloud has an adverse effect on a pages load time. As my music page on this website grew in size I was starting to see load times in the 10+ second range, bad usability experience everytime I visited. Never having embedded this type of content before it provided me a good opportunity to find a way to speed things up.

The original design was just to plop the <iframe> into a <div> and hide it with jQuery until a user wanted to view that video. Even though the video was hidden, it was still loaded from it’s source when the page was rendered. This is a fine practice if you have one or two <iframe>’s embedded on a page but becomes problematic when that number grows because the browser needs to go out get pull the web content from wherever the <iframe> is pointed to.

After searching for a method to not load <div> content until it is toggled into view I discovered it was possible to use a somewhat ‘madeup/undefined’ tag called data-src. Using this tag allows me to populate the entire page but not actually load the content until the users selects/toggles a video to view. When that selection is made I use jQuery to toggle the <div> in view and change the data-src attribute to a valid src atrribute and load the content.

This one change resulted in a 90% decrease in the page load time. Check out the load time difference using Pingdom Tools website speed test

Before After
Before Page Load Times After Page Load Times

In addition to changing how the <iframe>’s are loaded I also changed the jQuery I was using to show and hide the <divs>. John Snyder’s collapsible plug-in was great, but I wanted to get a better grasp of jQuery and rolled my own. It’s minor stuff but it’s not dependent on any outside libraries now, which is nice. Also implemented some CSS sprites for the plus/minus images. This image is so small the performance gain is probably nil, but I wanted to learn how to do it.

All the changes have been merged into the [GitHub repository] ( https://github.com/ProfessionalAmateur/Reddit-Liked-List-Builder). Here a summary of the new jQuery used on the music page.