How We Cut Our Page Load Time by 10 Seconds

66 Shares
How We Cut Our Page Load Time by 10 Seconds
66 Flares Twitter 38 Facebook 0 StumbleUpon 0 Google+ 6 LinkedIn 8 Buffer 14 Reddit 0 Pin It Share 0 Email -- 66 Flares ×

Speed and social just don’t seem to work together when it comes to a great website. We migrated our site to WPEngine (affiliate link) and it vastly improved the performance and stability of our site. But our site design – with a fat footer that promoted our social activity on Facebook, Twitter, YouTube and on our Podcast – slowed our site down to a crawl.

It was bad. While a great page loads in 2 seconds or less, our site was taking over 10 seconds for a page to complete. The problem wasn’t WordPress or WPEngine, the problem was all the interactive elements that we loaded from other services… Facebook and Twitter widgets, YouTube preview images, our Podcast application, I simply couldn’t control how slow they loaded. Until now.

You’ll notice now that our pages load in about 2 seconds. How did we do it? We added a dynamic section to our footer that only loads when the user scrolls all the way to that point. Scroll all the way to the bottom of our page in a browser (not mobile, app or tablet) and you’ll see a loading image take over:

Utilizing jQuery, we don’t actually load the base of the page until someone scrolls there. The code is actually quite simple:

$(window).scroll(function(){
     if(jQuery(document).height()==jQuery(window).scrollTop()+jQuery(window).height()){
          if ($("#placetoload").text().length < 200) {
               $("#supplementary").load('[full path of page to load]');
          }
     }
 });

Once the user scrolls to the base of the page, jQuery go extracts the page contents of the path specified and loads them within the div that you selected.

While the site no longer benefits from the content that’s loaded there (because a search engine isn’t crawling it), we’re quite confident that the speed of the page is going to help our ranking, sharing and engagement much more than having someone impatiently wait for our page to load excruciatingly slow. Best of all, the page still has all of the elements we want to engage with our visitors… without sacrificing page speed.

We’ve still got some work to do… but we’re getting there!