CODEWITHSUNDEEP
htmlcssperformance
Scott Simpson
Scott Simpson

Reputation: 3850

CSS optimization, which is faster

Which do you think is faster, have a 'main.css' style sheet then an additional style sheet for EACH section of the site, or having a 'main.css' style sheet and then having one additional style sheet for the entire rest of the site? The additional style sheet would hook elements via body IDs and classes and would require a longer selector. For example, #body-id .page-wrap.
The question boils down to: Does adding an additional selector for the section particular styles (10 - 20 unique elements) slow the site more than an additional HTTP request for a non-cached style sheet?

Upvotes: 0

Views: 132

Answers (3)

moettinger
moettinger

Reputation: 5196

As a rule of thumb, I have a main.css that contains any styles that are used on more than one page in the website. For everything else, I put the styles in the head of the respective page.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723448

The question boils down to: Does adding an additional selector for the section particular styles (10 - 20 unique elements) slow the site more than an additional HTTP request for a non-cached style sheet?

No. The HTTP request will invariably be slower because of network latency. This is why you see pages load and render progressively — it's because browsers are so good at computing and rendering styles that it happens while a page is being downloaded.

This is entirely up to you, though. If server-side performance is critical, it would be best to keep HTTP requests to a minimum, but don't sacrifice maintainability for it. Forget about selector parsing or rendering performance, as that stuff is usually up to the browser to worry about.

Upvotes: 4

Manish Sanger
Manish Sanger

Reputation: 1

You should go for the option 2: "having a 'main.css' style sheet and then having one additional style sheet for the entire rest of the site". Because only first time it will load the CSS and then serve this from the browser cache. Making an http request is always costly as it comes with some extra bytes of cookies (aprx:270b), header information, request/response time (network latency) and an extra request on apache.

Make sure cache headers are enabled on your server, for browser cache for css/js/images, hope you already have this.

Upvotes: 0

Related Questions