5 replies to this topic

[qwerty]

This is a new concept for me, although the recommendation has apparently been around for about three years.

My understanding has always been that it makes sense to use an external CSS file. Once it's cached, your pages will load faster. However, it was suggested to me today that, under certain circumstances, it's better to embed an inline CSS in the head of a site's home page, but call it as an external file from all the other pages.

The idea here is that, if the home page is often the only page viewed, or if it's usually the landing page, you're saving on HTTP requests by putting the CSS inline, and the trade-off in such a case works to the advantage of the user. You can even use an inline CSS for the home page, then after the page has finished loading you can request the external CSS so it will be ready for the user when they request an internal page.

As far as I can tell, this is all coming from a Yahoo engineer named Steve Souders, who was involved in the creation of the YSlow Firefox extension. If you check out this video, he discusses this particular tactic around the -17:00 mark. His explanation makes a lot of sense, but I can't seem to find any articles from other sources that back him up.

[scotth]

This is a new concept for me, although the recommendation has apparently been around for about three years.

This is also the first time I've heard about this. To my understanding there really is no "correct" way to apply CSS to a website. The easiest way to update all CSS on a site is to obviously have an external CSS loaded on all pages. And really, have much time are you saving from loading an external CSS as opposed to an inline CSS? nano seconds? not really worth the hassle of opening all pages to update your site.

Also, how can you link an inline CSS as an external sheet to other pages? How is that different from just having an external CSS?

[harpsound]

I did a crazy egg test of my homepage a few years back.
Nobody was hitting text - just images - immediately!
As early as 0.2 sec with half of the hits being 0.5 secs or less.

Time can be huge on this homepage measured in 0.1 secs or less.
I shifted pics up and text down back then.
This CSS trick works in this situ.

S

[krenerr]

From the video, it seems like this is a very specific usage of an inline CSS. In this instance it gives the "impression" of a faster load time. While I think it is necessary and important to create a good customer experience through reduced load times, I think it is more important to stick to well known and documented tactics that are fully endorsed by the search engines. Who knows? Google and friends may see this as a black hat technique?

[qwerty]

I don't see any reason for a search engine to have an issue with this. They wouldn't even have a problem with a page with no CSS and all the formatting in the HTML, except that it would slow the page down a bit. Check the source code of Google's home page.

My only concern about this is whether it actually makes the page faster. If it doesn't, I don't see any point in doing it, especially since we'd use an external CSS for the rest of the site. It means that when the CSS is edited, we also have to remember to edit the code on the home page to match it. And of course, the assumption is that the home page is the landing page. If a user were to land on an internal page first and then click over to the home page, they'd be downloading the CSS twice -- first as an external file called from that internal page, and then as part of the source code of the home page.

I'm hoping we end up running A/B tests between two versions of the home page and finding out how much time we save on this, if any.

[Jill]

Google and friends may see this as a black hat technique?

Huh?