Hello,
This is called browser rendering, This is because when the browser loads the page, it reads the HTML document from the top to the bottom, from the left to the right. When reading the HTML document, the browser would have read the whole DOM before reaching your CSS and JS scripts and executing them.
The rendering engine
The responsibility of the rendering engine as well… Rendering, that is the display of the requested contents on the browser screen.
By default, the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.
Rendering engines
Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit.org for more details.
So this only happens because of the Browser Rendering. For avoiding it you have to use Cache on your site.
You can read this article as well: https://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm
Best Regards.
.
