@fontface

I am using @fontface and the font “PT Sans” for my site and seems that this is causing high load times. Is this always the case or is there something i am doing wrong?

I am basis this off of google’s new page speed program. (http://pagespeed.googlelabs.com/)

My Marketing Solutions -

Thanks for any advice.
Ryan.

You should look into browser-side caching for the font file. This article might be a good starting point: Overcome Your Caching Conundrums » SitePoint

I would say font-face is the LEAST of your worries when it comes to page speed. You have 38 separate files, so some image recombination or removal of images would be in order… especially since I only see about ten or twelve things that should be images. The entire page comes to a whopping 807k uncompressed and 660k compressed – that is eleven times larger than I’d allow a single page on a site to be, and five and a half times the upper limit I’d ever allow!

Much of this can be blamed on the javascript – swing a giant axe at all the animooted stupid garbage that does NOTHING to actually improve the user experience. When your scripting outnumbers your actual text content 15:1, and is the same size as your IMAGES – it’s time to trim away some of that pointless bloat.

The same goes for your CSS. Multiple separate files for no reason without even using media types properly (“all” is the default, and should really NEVER be used!)… 74k of CSS is “holy hannah, whiskey tango foxtrot” territory especially on such a simple layout… 28k of that is from another server, some “sharethis” thing… axe that. Don’t know what “sharethis” is, but it appears to be a giant bloated dung heap. The rest of it broken into separate files is bad enough (especially that monstrously oversized reset), but your “style.css” is filled with redundant/pointless properties…

Looking deeper in, you aren’t even using @font-face completely, and instead are using it like IE is the only thing you are targeting… where’s your SVG, WOFF and TTF versions? OTF on it’s own ain’t gonna cut it in 2010.

I also have a saying, CSS is only as good as the markup it’s applied to – and since you seem to have embraced the HTML5 bloat, combined with markup that is more HTML 3.2 than modern coding practice… non-breaking spaces doing tabs job, nonsensical heading orders, extra DIV around perfectly good block level containers, bold and strong tags inside heading tags, EM being put on elements that shouldn’t be receiving emphasis. More DOM elements means slower rendering – so get rid of them. You’ve got 11.6k of markup (before you count the “sharethis” nonsense from off-site that DOUBLES your page size) for only 1.3k of HTML – that means in my mind at LEAST 3k of your markup should be pitched in the trash, MAYBE even more.

Further considerations should be taken in regards to that giant banner image pushing anything resembling content below the fold and forcing you into a fixed-width layout (good luck making a mobile version of that), on top of it taking massive time to load – that one image ALONE is 202k – that’s 33% more than my maximum page size (images+css+scripts+markup)… and again, for such a simple site I’d try to keep the size of the entire page (HTML+CSS+IMAGES+SCRIPTS) to below 70k in 16 files. If it can’t be done, it’s time to throw the layout away.

… which I’d suggest anyways given the inconsistent font sizes all over the place, broken layout on large font/120dpi machines, px metric fonts on the ONE content paragraph (lands sake get some COPY in there!), and color contrasts between text and background below accessibility norms in several places (like the ENTIRE footer excepting the green text)

Lot of work needs to be done in there if you care about accessibility and speed… @font-face? LEAST of your worries, especially when you’re only targeting IE.

lol… “holy hannah, whiskey tango foxtrot” - Thank you for all the advise… I got a lot of work to do.

I have removed the “sharethis” as it really wasn’t needed or used.

As for design and copy and style etc, I agree with your rant… but unfortunately this is what the client wants and really i have no say in that. As for the mobile site it is just a basic jquery mobile site accessed when view from smaller screen devices us .htaccess.

I have been trying to get them to reduce images and that awful imaged navigation bar, with no luck. So putting that all aside know i can NOT change layout what would be the best place to trim at least what i CAN?

How should i take care of all the strong/bold tags that were used in this template? Should i use span with a css class that just uses the PTSansBold font?

Thanks again.

Also can you suggest how to fix the font errors you are seeing? Should i get rid of all the “px” and change to “em”…
Should i be removing the font-size: 100% from the body tag in the css, or it actually looks to be pulled from the reset.css?

Thanks again for the help/suggestions.