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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With