How to add a loading page

Ask the community
,
1

In my web it take around 15 seconds for a page to load and I made many changes to reduce loading time but it falls around 12 seconds. So I just have one method and that is I need to entertain the user or make them feel his/her request is in progress and for this we have something called as loading screen. I know how to create loading page using a strip and gif loader but that is not great for me cause I need to make them appear in total 25 pages in my website which is dammed time consuming and also it is inappropriate like if a page takes 9 seconds to load and we have a delay of 5 second then it will fade out after 5 seconds. I want to create a loading page which will fade out once the content has been loaded. can anyone please help me out. Thanks in advance for helping me out.

2

A few comments:

  1. It shouldn’t take 15s for page to load. Pre-loader can’t compensate for that. You probably can reduce it much more.

  2. You can put a gif on one page and set it to be shown on all pages.

  3. You can create/find an html-based preloader and put it in an html-component.

  4. There’re some threads here about a general pre-loader that you can add to the tracking&analytics if you have a premium account (I don’t know if it works or not).

3

Yes, definitely put it in the of tracking&analytics if you have a premium site, as the head will load before anything you can put even inside the header of a specific page, and won’t delay your page’s load time any further. You can either make one or maybe find one on Codepen you like.

4

That’s true, but on he other hand, sometimes you want to show the loader even after the page is ready, because it might take another second or two to populate a repeater (for example).

5

Agreed, that’s why I may also use a separate CSS preloader for data fetching. But a website should always be optimized to load ASAP the first time by delaying any intensive requests til after the page is usable. So, like you said, the point of having the initial preloader should only be to reassure the user if they have a weak connection or if the DNS server is overloaded or something, and a very lightweight CSS element that loads before any of the data is being requested is best for that purpose.

Even with an optimized backend, it will serve its job well as a precaution.