Is there any way to have a preloader of a page allready displayed while the the server still handles the new page request? Because otherwise I have an empty page for about 3 seconds and then I see the preloader for about 2 seconds and then the site get´s displayed. So a preloader to me only makes sense when it allready displays in this Time-To-First-Byte time in which the server handles the request and until it is ready to send the first byte. Because then it would really be visible for the whole 5 seconds the page transition takes place.
How can I trigger the loader instantly after the TTFB is reached Which is at 0.6s seconds and not starting somewhere between First Content Paint and Onload time. Please see the attached visualisation using GTmetrix.
This is not really my area (and you have probably already tried this) but have you tried making sure the script and the css for the loader are the first resources in the head of the document and are inline not external (no libraries used). Ideally you would want to apply the loader as a background to the html element (as that’s the first thing to load) and hide all page content with css. Don’t link to any image loaders but have inline svg perhaps for the loader icon (or just plain text).
Then you would have another script just before the closing body tag that removes the loader and reveals the hidden elements. Make sure that you add a class to the html element with js which you then use to hide the content with css otherwise those with js disabled get nothing.
Whether it will make any difference if you just have a slow server is another matter
If anybody is interested in some newbee background: After doing some research I figured that the whole page transition process is spreaded as follows:
Click to open new page
While server recieves all requests the new page requires to be organised and gathers all assets for your new page you still see the old page
Then the Server starts to send all data to your browser (You still see your old page)
In the moment all HTML, CSS and JS has reached your browser starts to build the DOM of your new page. (You still see your old page)
If your page uses JSON files, they are loaded now. And delay all site buildup. (You still see your old page)
Somewhere inbetween loading JSON Files the old page vanishes and the new page starts to render. Mostly starting off with a white page with no content and then quickly compsoing your layout together with a few cranky jumps as the components fill their space.
This procedure does change in it´s timely proportions depending how you use your caching tools, but it stays in this order.
So without an ajaxed or css page transition (Preloaders make no sense as they only show up after 75% of the process is done, no matter how you tweak them) the intenet still looks like it´s still 1995
