Understanding Preloading For Web Components

We heard preloading almost every time! But do you really understand what is preloading and how does preloading actually work? In this article, we will talk about preloading and how it should and can be use.

What is Preloading

Most of us will know but there are many that are unclear. Preloading is an action that will load components which are not visible available to the users. This means that any component that are already in the HTML document will be loaded and preloading doesn't help speeding up these components. What we would like to preload are those components that do not resist within the document and components for future pages.

Why Preload component

Why do we want to preload a component if it doesn't help speeding up the existing components on the HTML document?! Simple, let's say we have a gallery which has the following code in our document

<img src='example.jpg'/>

compare to document that has these codes

<img src='example.jpg'/>
<img src='example1.jpg'/>
<img src='example2.jpg'/>
<img src='example3.jpg'/>
<img src='example4.jpg'/>
<img src='example5.jpg'/>
<img src='example6.jpg'/>

Assuming each image in these example are 800kb in size (If you have a script that wait for an onload event to occurs, i wonder when will the script start running). It will be obvious which one will finish first (the first example). So your user gets to see the result like less than 1 minute. The sub sequence images will be preload into the document while the user is still viewing the first one. Thus, clicking the next button will show a loading in progress or immediately displayed the second image depending on how you construct your script to accomplish this.

One thought on “Understanding Preloading For Web Components

Comments are closed.