DEV Community

Discussion on: A little dev secret: How to make a loading screen

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Look into "skeleton loading." You'll notice big companies use skeletons instead of loading screens, using skeletons can actually retain user as the skeleton let them know that whatever they need is being loaded.

The problem with full screen loader is that it covers everything up, you don't know what to expect and how long you have to wait. Skeletons don't have that problem. Also, mostly, people use skeletons in SPA type sites built with JavaScript frameworks.

You could also extract and put critical CSS in style tags at the top of your document. For instance, extract and put CSS for hero in the head tag so the document loads that small bit CSS before anything else.

This way you're site will load with users already looking at a beautiful hero instead of loading screens. You can use this technique in almost any type of site, especially static or server side rendered sites. This will also boost your lighthouse/performance score.