CODEWITHSUNDEEP
htmlperformancecss
reddtoric
reddtoric

Reputation: 686

html&css efficiency&performance issue

So I have an issue on how I should implement a few webpages. Since having more < link > would slow things down because more HTTP request = slower, I decided to put the desktop's, tablet's, and mobile's stylesheet into one single css file using @media rule. However, I have more than one page where every page has the same header and footer but different content section so I need to customize each content's css. My issue and question is whether to put all the content's css into the same single file so there is one css file or split it so there's a common css file plus another css for each page. Example structure of the differences:

Option 1 - One single css file:
  - home.html
      - common.css
  - page-one.html
      - common.css
  - gallery.html
      - common.css

=== or ===

Option 2 - Split css file:
  - home.html
      - common.css
      - home.css
  - page-one.html
      - common.css
      - p1.css
  - gallery.html
      - common.css
      - gallery.css

Reason I can't decide which method is I'm not sure how css files are parsed. I assume web browsers go through the whole css file and looks for the tag (i.e: #myHeader) in the html from bottom to top then applies when it tags matches. Kind of like this:

while(!End Of *css* File){
    while(!EO *html* F){
        if(cssTag == htmlTag)
            applyCss()
    }
}

So, if in this case, I'd assume css tags that aren't even in the current html page would slow things down since it has to go through the whole html page to apply style or not before going to next style. Option 2 removes this issue but poses the issue of having an extra HTTP request each page. Now, my example has only 3 pages but I actually have 8-10 pages. With that many pages, the time spent looking to apply styles on the current page would be greater (Option1) but is it greater than an HTTP request (Option2)?

Upvotes: -1

Views: 50

Answers (2)

Joshua Rajandiran
Joshua Rajandiran

Reputation: 2928

The answer to your question depends on how complex your site is. If your site only has a few pages and is quite simple using one css file wouldn't be a problem.

However, I recommend using multiple css files instead or large websites because its better and keeps each page separated.

If you're wondering about how long it takes for the html & css to load, its exactly what Hugo Silva mentioned. How good your hardware is and what browser that you are using, including your internet connection speed.

Your html and css files all together just aren't probably even 1mb.

If you're really that concerned, then create a preloader that runs until every file,image,video or whatever script gets fully loaded.

Upvotes: 0

Hugo Silva
Hugo Silva

Reputation: 6948

I don't think you are going to get a straight answer out of this question as it would depend on browser, system, hardware, connection speed, contents of your files, etc... but for a 8-10 page site, or the amount of CSS you seem to be working with, I doubt you would be able to notice any difference in performance either way. I would go for the single file, for the sake of convenience.

Upvotes: 1

Related Questions