CSS Rendering After HTML

Question

I'm having an issue that my website is rendering CSS after a second or so of the HTML, so there's basically a white unstyled page that appears for a second before the styles render. The problem is worse on FireFox. How can I fix this?

Answer 1

I am not familiar with wordpress to know how to implement this, but I did have a similar problem with Laravel. After some reading and developing I came up with this. It works great.

Place this in te head section:

<script type="text/javascript">
    document.documentElement.style.opacity = 0;
    window.addEventListener('load', function () {
        document.documentElement.classList.add("showhtml");
    });
</script>

Create a CSS entry:

html.showhtml {
  opacity: 1 !important;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

What it does is forcing the page to render with an opacity of 0 on the HTML-tag. After loading the added listener 'load' jumps into action and adds the CSS class showhtml to the HTMl-tag. The CSS then animates the pages to an opacity of 1. It is a graceful solution where you can control the speed of the animation, and you page will also show in case somebody have their javascript turned off.