At GForce Web Design, a key focus for all our web builds is speed. To serve a feature-rich site at high speed requires a lot of work behind the scenes. This blog post explains one technique we use called “lazy loading”, and how it can greatly improve the performance of a site.

A typical webpage will be made up of several assets (images, fonts, stylesheets, scripts etc), which your browser will download and piece together to form what you see on screen. By default, browsers will load all of the individual assets at the start before the page is rendered.

Although this ensures that you see a fully loaded complete page, this can really slow down the rendering of the page and leave the user waiting and feeling frustrated. This is especially important considering 40% of consumers will abandon the site if it takes longer than 3 seconds to load.

What is Lazy Loading?

Lazy loading is a technique of delaying the loading of certain resources until after the initial page has been rendered. With fewer render-blocking resources, the first paint of the screen is delivered faster, resulting in a faster experience for the user.

As the user scrolls down the page resources are loaded in dynamically only when they are needed. Effectively we are splitting the loading of the page, and only ever loading the assets that are needed.

With lazy loading functionality, the images highlighted in the red boxes are loaded immediately. The 6 images that are not visible will be dynamically loaded once they are in the user’s viewport. This cuts down on the initial load time significantly.

You can see this technique in action across our site, or for a simple demo head here: https://codepen.io/dinbror/pen/HzCAJ

If you feel like your site is letting you down, or have any questions about the above, get in touch with a member of the team to find out how we can help.