Time is finite; therefore you should always endeavor to do things now instead of later. And yet, your energy or resource isn’t exactly a bottomless well either so you should only do things that actually require your immediate attention. Life is nothing if not a bundle of contradictions and for every advice you get on the internet about something, there’s going to be at least a dozen other conflicting advice with equally valid reasoning. Life in the 21st century is not kind for people with decidophobia.
Anyone who knows me would have no problem figuring out which camp I fall into with regards to these two different philosophies. I’m the kind of guy who spends at least 2 hours in the morning at my desk catching up on my favorite blogs and toying around with The New York Times’ daily crossword before I could start working. I’m at my best when I’m working at my own pace and this is also the same approach I prefer when it comes to web development, especially when it comes to the practice of lazy-loading.
Websites that move at your own pace
Have you ever seen a play? Don’t you find it somewhat absurd when at the end of a particularly emotional play, you’re only given mere moments before you have to suck it up and clap for the performers as they head back onto the stage for the curtain call? I had an epiphany like that a couple of months ago after I saw a local production of August: Osage County, which if you’re familiar with the play, isn’t exactly an easy thing to watch, particularly during the later acts.
It felt very weird to me then that merely seconds after the final scene I was supposed to clap and cheer for the performers right after I saw them powerfully acting out the emotional outbursts that are littered throughout the play. It felt surreal then and I found myself wishing for a longer reprieve where I could collect myself before proceeding with the curtain call. Now I know it’s not exactly a perfect analogy but when I set out to write on the practice of lazy-loading, that surreal feeling is what came to mind.
Now, the concept of lazy-loading in web development is rather simple. Rather than loading all of the contents and resources on a single webpage the minute the webpage is opened, lazy-loading instead make it so that those contents are loaded only when needed or when they’re ‘called’. It’d be like watching a recording of a play, where I could just simply pause at the end, creating a safe space to collect myself together and hit play once I’m done putting myself back together.
Plenty of modern websites and apps are designed like this. The YouTube homepage for example would continually show you recommended videos and channels once you’ve scrolled down the page but never before. The explore tab in Instagram works in the same function, delivering endless stream of images and videos as long as you keep swiping down. There are a lot of reasons why we’re seeing more and more of lazy-loading, especially for websites that serve a lot of different contents.
It won’t overwhelm your users
If one of your website’s main focus in on a large selection of contents, lazy-loading can be an effective way of displaying all of your contents in a single page without overwhelming your users. As with the YouTube and Instagram example above, this method of content display/loading is referred to as infinite scrolling. The beauty of infinite scrolling is that instead of throwing you thousands of different contents at users at the same time, it offers them gradually, which can be psychologically advantageous, not to mention convenient.
It’s an efficient use of resource while still being convenient to use
Single-page website takes up a lot of resource, consuming a lot of data and the processing power of the device to show contents that the user might never get a chance to see. Multi-page website on the other hand can be slightly annoying to use as it forces the user to essentially reload the website over and over again to check out more contents. The former option isn’t ideal for those using a less-than-ideal connection and/or devices while the latter isn’t exactly the user-friendliest option in the world.
Conceptually, lazy-loading and specifically in this case, infinite scrolling solves this problem by combining the ideas behind single-page and multi-page website together. Instead of being a compromise between the two however, lazy-loading takes the best of both worlds, making an efficient use of the user’s resource while relieving the user of the burden of having to load the same website repeatedly just to consume more contents.
It allows the page to load faster than if the contents were all loaded simultaneously
Back when the video game console PS4 was first released back in 2013, it was announced then that in a rather revolutionary development, players are able to play downloadable video games even if they haven’t been completely downloaded. With the size of video games ballooning to 100 GB (the recently released Red Dead Redemption 2 clocks in at a whooping 105 GB for example), this news was very warmly received.
YouTube and Netflix also works the same way, allowing users to watch a video even if it hasn’t been completely loaded and lazy-loading takes this concept and apply it into the world of web development. Instead of forcing the user to wait until all of the contents are fully loaded, they don’t have to wait as long as only a portion of the content has to be loaded first with the rest waiting in the pipeline. If high-res images and multimedia contents are your bread and butter, lazy-loading could help in trimming your website down to a more acceptable level.