Many pages on the Gustavus website feature a section of auxiliary content that we like to call the AuxBox–the blue part at the bottom of the page that typically has events, news, and profiles. While we really like having this content on our pages, we noticed it took a fair amount longer for our server to generate pages which use the AuxBox. And, since it is so low on the page, we assumed that most people wouldn’t even scroll down far enough to see this extra content, making this extra load time a waste.
We are always searching for ways to make our website faster. Today, thanks to the jQuery Appear plugin, we implemented a technique called lazy loading on the AuxBox. The general idea is that the auxiliary content in this area will not be generated by our server or served to the browser until the user has scrolled down enough to actually see the content. This allows us to generate the page quicker and serve it to the browser sooner and smaller. We reduce server load, wait time, and bandwidth used. Everybody wins.
Additionally, to streamline the mobile experience, we have been using stylesheets to hide the AuxBox for all mobile devices. The AuxBox was still being generated by our server and downloaded by the browser. With this change, the mobile experience will be even snappier.
Here are the numbers. Page load time (the amount of time for the browser to download the page, all resources such as images, JavaScript, and CSS–highly dependent on the user’s bandwidth) for a typical page with the AuxBox was, on average, 608.7 milliseconds before lazy loading and 476.4 milliseconds after lazy loading–that’s 22% faster. Page generation time (the amount of time that it takes the server to process the code and generate a page to serve to the browser–independent of the user’s bandwidth) went from 56.3 milliseconds to 14.1 milliseconds–about 75% quicker.
We hope this change will help you find what you are looking for just a bit faster.
Leave a Reply