#help Web components are not loading correctly in slow network

Hey I am using the web components in my web pages. But I am facing an issue in web components when they load on to the web page. I have notice if I run my code in slow network. First HTML loads then after CSS took place.
Note: Each component CSS is exists inside the component JS file.

Desired Behavior: I want first CSS load for all of the web components after that HTML should be visible. Can anyone help me out.

Code:

<body>
    <my-header></my-header>
    <my-main></my-main>
    <my-sidebar></my-sidebar>
    <my-section></my-section>
    <my-footer></my-footer>

    <script src="my-header.js"> </script>
    <script src="my-main.js"> </script>
    <script src="my-sidebar.js"> </script>
    <script src="my-section.js"> </script>
    <script src="my-footer.js"> </script>
</body>