How do I prevent my website layout from shifting while loading?

Question

Problem:

When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.

How to I keep everything in the proper, final place while the page loads?

Code:

HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N

Stylesheet: http://codepad.org/Yr4ULwi0

Additional Info:

• The most obvious thing that is out of place is the <h2>Location</h2> .
• Images are all the size indicated in the HTML and CSS.
• This is not the problem where the entire layout shifts as one because a scroll-bar appears.

Resources

Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.

http://jsfiddle.net/QHeG8/

Answer 1

I can't replicate the issue but it could be caused by the webfonts loading and rendering.

That would explain why <h2>Location</h2> moves - because it's position relies on the width of the <h3>Tagline</h3>

You could try using standard system fonts to see if that resolves it.

Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked)