Speed Up Your Website By PreLoading - Example Included
This article is a continuation to an article titled: Speed Up Your Web Pages By PreLoading, Caching…
Lets first discuss about the example: Here we have 3 webpages titled:
index.html, preloaded.html, nonpreloaded.html. We have 4 bmp images of 3 MB size each - p1.bmp, p2.bmp, np1.bmp, np2.bmp.
When you open index.html, you find 2 links to the documents preloaded.html and nonpreloaded.html. However I suggest you to read all the instructions on index.html page thoroughly. Below is the link for index.html, after you follow the instructions on that page, come back here, lets discuss what happened in that page. And also try to time the loading of the pages, and post the time it took to load those pages, your connection speed in the comments.
Link for index.html
In the above example page, we have links for preloaded.html and nonpreloaded.html. preloaded.html has 2 images p1.bmp and p2.bmp which are 3 mb each. While you were reading the content on index.html those images were preloaded in background, so when you clicked on the link for preloaded.html it loaded quickly as the images were already loaded and cached by your browser. But when you clicked on nonpreloaded.html the images np1.bmp and np2.bmp were not preloaded so after you clicked the link, those images were downloaded causing a little delay in loading the page. Any doubts or comments are welcome. In case you had a too slow connection and could not make a difference in loading times, let me know, I can come with another example for you.
Update:
Here, I just simulated a scenario. Obviously I wont have bmp’s. I mean to say if there are several files like js, css, image files and you know for sure that a person would click the link, you can pre load it this way. Definitely no one would want to put a 3 Mb bmp file. I did that only to simulate big files or multiple small files which would consume few seconds.
Speed Up Your Website By PreLoading - Example Included
