SnippetGood

Question

1

I was thinking about server load times and wondering what the most efficient way to add css is. What gets loaded fastest?

For my part, I think the external css is the easiest to maintain as a project scales, but sometimes you need a lot of these stylesheets for large scale websites with a lot of varying sections. What about parsing several css sheets on load?

as for snippets:

inline:

<div style="float: left;" class="left">hi</div>

embedded:

<head>
    .left { float: left }
</head>
<body>
    <div class="left">hi</div>
</body>

external:

 <head>
    <link rel="stylesheet" type="text/css" href="style.css">     
 </head>
 <body>
     <div class="left">hi</div>
 </body>

parsing:

 ????

flag	asked Oct 19 at 16:21 Gwyneth 13●3

Greg · Answer 1 · 2009-10-19 16:29:14Z UTC

I don't know much about parsing, but you can combine css stylesheets like this:

<link rel=Stylesheet href="global.css" title="combined" />
<link rel=Stylesheet href="nav.css" title="combined" />
<link rel=Stylesheet href="section.css" title="combined" />

This might be a really old-school out of date method, but I thought I'd log it in here for completeness

Antti Sykäri · Answer 2 · 2009-10-28 00:08:15Z UTC

The Google Page Speed project has a list of web performance best practices:

http://code.google.com/speed/page-speed/docs/rules_intro.html

Other useful tools you can use to measure your performance are Firebug (getfirebug.com) and YSlow (developer.yahoo.com/yslow/).

CSS: inline, embedded, external or external parse

2 Answers