1

We want to implement Critical CSS on our site using the guidelines provided by Optimize CSS Delivery on our site. We were able to get it setup so that it works by adding the above the fold css within the <head> as the example below.

However, we are still getting the dreaded flash of unstyled content and have come up with a solution where we hide the <body> element by default, but use JS to make it visible once the JS files are loaded (they are loaded before the ending </body> tag.

Would setting the <body> as hidden on page load and visible once the resources have loaded cause our page rankings to be lower?

We tried looking in different communities such as SEMrush and Moz, but there wasn't anything we could find.

CSS:

body {
  visibility: hidden;
}

/path/to/file.js:

$(function() {
    $('body').css('visibility', 'visible');
});

Example HTML

<html>
<head>
  <title>Page title</title>
  <style>
      body{visibility: hidden;}
    </style>
</head>
<body>

<script src="/path/to/file.js"></script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.