Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Delayed CSS rendering

Hi all! I'm currently working on a site for a client and I notice some of my CSS takes a long time to render in the browser, leading to a strange looking "pop in" of headings (h2 elements exclusively, I believe).

What can I look out for in my CSS to eliminate this problem? I've never had it before and it's quite offputting.

(Oh, and excuse the cat. He's a placeholder for a hand-illustrated header image that's coming soon.)

3 Answers

I think the culprit is the aaargh-webfont.ttf font. It looks like it can't be found this causes the browser to stay in a wait state for about 1.7 seconds of the total 4 seconds of page load time.

You can check this out for yourself over at pingdom.

You can also use http://loads.in if you want to see images of your site as it loads (every 0.5sec or so).

You're quite right, James, I completely neglected to upload the associated font files. How embarassing!

Thanks for the link to pingdom, it looks to be an excellent tool for troubleshooting this kind of thing in future. Bookmarked!

Hey all! Be sure to label forum posts! A lot of mystery untagged posts getting lost in the feed, and lots of members wanting to join in the fun. :P Thanks a ton!