SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Sherman Oaks, CA, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and load time

    I have a simple question but I could not find any info on this subject.

    If Im using several different external CSS styles but not on all of my pages, Is it better for load time to create separate CSS pages and call them up only when needed or can I just make one CSS page for the entire site and will this slow down the page load time?
    Mike - Senior Designer
    Effective Designs
    Fine Art in a Digital World

  2. #2
    SitePoint Zealot matiefert's Avatar
    Join Date
    Nov 2001
    Location
    Bay area, California
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by magic
    If Im using several different external CSS styles but not on all of my pages, Is it better for load time to create separate CSS pages and call them up only when needed or can I just make one CSS page for the entire site and will this slow down the page load time?
    Using external CSS style sheets generally speeds up downloading (overall) in two ways:

    1. The size of the HTML file is smaller, because it doesn't contain all that extra code (e.g. specifying font, center etc etc for each h2 heading). Of course, this is true even if the css is contained in the head of the HTML file.

    2. A separate stylesheet (assuming it applies to more than one HTML file) is downloaded only once for each user session, not once for each HTML file. So, if more than one HTML file uses the same style, and your visitors are likely to visit more than one HTML file that uses the same style - overall download time is less.

    Whether to have everything in one external CSS file or in several depends... How much duplication will there be if you have different CSS files? How huge will the CSS file be if you put everything into one file? What visit patterns are typical for your site? - do people view one or two similar pages & then leave, or do they tend to browse the entire site? Also - how difficult will it be for you to maintain & update your site?

    Probably, if you have subsites with different looks-n-feels, then you'll want a separate css file for each subsite, especially if the different subsites are likely to attract different visitors.

    regards,

    Marj

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could do the following: have a general stylesheet which contains the common styles used on each of the pages (and yes, it will only be loaded once, as matiefert outlined above), and additionally have another stylesheet specific to the page. if you have two <link rel="stylesheet" ... > links in your header (one for the general, one for the page-specific), the page will all the stylings you need, without the need to create a huge common file which covers all specific cases, or having page-specific stylesheets which just re-specify the general common styles...if that makes sense.
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if the style sheet is for one page only than why make it external? Whats the advantage of having it this way in this case?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no advantage, just a case of "style" (no pun intended). proper physical separation of content and presentation...it's just a good habit. of course there is no real benefit to it in practical terms...
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    Vermicious Knid moncur's Avatar
    Join Date
    May 2003
    Location
    Salt Lake City, UT
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if the style sheet is for one page only than why make it external?
    Actually if the 'page' in question is something dynamic, there would be an advantage. I have cases where a single PHP file is handling thousands of pages. Since the dynamic page isn't cached, using an external style sheet for styles specific to that area does help.

  7. #7
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    He asked about the benefits of an external CSS file that is used on one page only. Not on dynamic pages that feed 1,000s of pages to the users.

    The benefits of using external stylesheets truly comes in portability. Not in caching or download saving. Even if you have the file cached, the browser has to make a connection to the server to see if it has changed or not and this takes bandwidth and time.

    However, when you are designing for portability, you can import various external stylesheets based on the device. This allows you to provide one for screen, one for print, one for WAP devices and so forth. When you do this you can maximize your content across devices and platforms and take full advantage of the technologies provided.
    Wayne Luke
    ------------



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •