Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

White Flash on First Page Load: Can this be "fixed?" [closed]

I've noticed that on the first load of some of the pages on my site, there's a quick white flash.

It doesn't seem to do this once the page content has been cached, but it's annoying during the first loads.

I tried styling all of the <html> tags black, but that doesn't seem to solve the issue. Could it be the scripts on some of my pages? (i.e. maybe analytics)

Is there anything I could do to remedy this problem?

Update: The site can be viewed here. Some pages have Javascript, but others do not, and it seems that's irrelevant, based on the results I've experienced.

like image 914
pianoman Avatar asked Apr 27 '13 23:04

pianoman


1 Answers

OK, so it looks like this might be related to your script tag in the <head/>. Try pushing that down to just before the closing </body> tag. The document can't render until that script has completely run.

See rule 6

However, one of the other resource you're waiting on sometimes is 'home.css'. That may even be more of a problem. It's a bit of a hack, but you could try setting your background to black before even that css using an inline <style/> tag.

Try structuring the page in this order (notice the <style/>) tag;

<!doctype html>
<html>
<head>
<style>
html { background-color: black; }
</style>
...
<link href="home.css" rel="stylesheet" type="text/css">
...
</head>

<body>
...
<div id="footer">
    <span class="footer_text">Copyright © 2013 Casey Kidd Music.<br />All Rights Reserved.</span>
  </div>

</div>

<script>
  (function(
      ...
  'pageview');
</script>
</body>
</html>

It's possible you may still get a small flicker of white between pages, before the HTML has loaded, but this window would be pretty small now.

like image 191
cirrus Avatar answered Oct 23 '22 09:10

cirrus