Я предпочитаю переместить javascript в нижнюю часть страницы и отложить загрузку CSS следующим образом:
Оберните содержимое в div, у которого нет display none, и поместите это basi c стиль встроен в заголовок. Затем в вашем CSS файле есть .wrap{display:block;}.
Затем внизу отложите загрузку таблицы стилей, пока она не будет загружена.
Что происходит здесь, это содержимое страницы скрыто по умолчанию (с .wrap {display: none} . Then when the CSS file is fully loaded, the .wrap {display: block} `отменяет display none, и страница отображается сразу.
<html>
<head><style>.wrap{display:none;}</style></head>
<body>
<div class="wrap">
website content
</div>
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="style.css" />
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
</html>