[WSG] How does CSS handle it's references
Greetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but... Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards ~Veine Sent via the WebMail system at vikberg.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] How does CSS handle it's references
I'm making a fairly general assumption about the webserver you're using (as a lot to do with this is based on what your webserver is configured to do, and also how an individual browser reacts). In general, once an image has been loaded once (by whatever method, html/css/javascript), then that image is cached, and can be called again without having to re-download the image from the server. It also doesn't matter if the way you call the image is different from the original method (eg. first used by a stylesheet rule, and then used on a different page via javascript). As I said this depends on how your webserver is configured. However, unless there's be any reason for not doing so, then most configurations tell the browser that the image is cachable (sometimes developers tell the webserver to not allow caching for images/pages that are designed to change frequently). Also, browsers also have the ability to disable caching, but that's a fringe worry, and really isnt worth worrying about. Thanks, David. Veine Vikberg wrote: Greetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but... Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards ~Veine Sent via the WebMail system at vikberg.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] How does CSS handle it's references
There's also the overhead of establishing a new HTTP connection for each 'reference' to consider.For that reason, it's better to reference large file(s) instead of multiple small files where possible. Such as combining stylesheets or external scripts on the server-side into a single file, and using the image sprite technique to combine multiple small images. As for loading, my understanding is the browser will load images defined in stylesheets after the page has finished loading.Also images defined in stylesheets are only loaded if they are referenced by an HTML element. So if you're only using 1 of the 5 CSS classes you've defined, only 1 of those background-images _should_ be loaded.I only know that from my own little tests with FF and IE, so nothing's to stop other browsers from loading everything. I'm not familar with the CSS specification, maybe theres's something mentioned there? On 14/06/06, Paul Bennett [EMAIL PROTECTED] wrote: Hi Veine,'the only dumb question is one that goes unasked' :)The Big Brains will hopefully chime in soon, but I'm guessing it will depend upon the cache setting of the clients browser.Most people will leave the cache settings unaltered so the browser will cache your images and CSS file, then reuse them when another page calls the same files. The big slowdown will occur when people first load the page - if you're referencing 11 *different* image files at 50Kb each, that's (counts on fingers) 550Kb - which is way too large.Does that help? Paul-Original Message-From: listdad@webstandardsgroup.org [mailto: listdad@webstandardsgroup.org ] On Behalf Of Veine VikbergSent: Wednesday, June 14, 2006 9:14 AMTo: wsg@webstandardsgroup.org Subject: [WSG] How does CSS handle it's referencesGreetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but...Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards~VeineSent via the WebMail system at vikberg.net **The discussion list forhttp://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help The discussion list forhttp://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help** **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
Re: [WSG] How does CSS handle it's references
Veine wrote: - if a stylesheet has a reference to three classes, each of which has an image - as background that is 50K - when that stylesheet is used in another page, - does that image get loaded before the page is displayed? i think the question was less about caching and more about css referencing. James hit the nail on the head i think... James wrote: - images defined in stylesheets are only loaded if they are referenced by an HTML - element. So if you're only using 1 of the 5 CSS classes you've defined, only 1 of - those background-images _should_ be loaded. ...which is the way i always understood it. But I wanted to know if there was a WSG award for remembering an old thread? look at this little number from the archives: http://www.mail-archive.com/wsg@webstandardsgroup.org/msg06998.html kindve along the same lines. apparently an old version of Safari had a prob but no longer an issue. but July 19 *2004* ! what a memory! ;-) Pete Pete Ottery Head of Design News Interactive A News Limited Company News Interactive Level 3 2 Holt Street Surry Hills NSW 2010 Australia Visit the News Interactive Network of sites: NEWS.com.au | australianIT.com.au | escape.com.au | FOXSPORTS.com.au | realestate.com.au | careerone.com.au | carsguide.com.au | homesite.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] How does CSS handle it's references
Hello Paul; Well the style sheet is referencing 22 different images, each at 50K each, making it actually 1.1MB IF the whole sheet is loaded, however, am only using one of these images on each page. IF the whole style sheet is read and loaded that is just way too much. However, if it is just been read, and then loaded on demand - then that would be fine, since then the page load would be only 50K plus the other elements, which in this case doesn't account for much but background colors and text and one small _javascript_. My issue would be if ALL those referenced, albeit unused on the page is actually loaded, then that is a problem Regards ~Veine At 09:39 AM 6/14/2006 +1200, you wrote: Hi Veine, 'the only dumb question is one that goes unasked' :) The Big Brains will hopefully chime in soon, but I'm guessing it will depend upon the cache setting of the clients browser. Most people will leave the cache settings unaltered so the browser will cache your images and CSS file, then reuse them when another page calls the same files. The big slowdown will occur when people first load the page - if you're referencing 11 *different* image files at 50Kb each, that's (counts on fingers) 550Kb - which is way too large. Does that help? Paul -Original Message- From: listdad@webstandardsgroup.org [mailto:listdad@webstandardsgroup.org] On Behalf Of Veine Vikberg Sent: Wednesday, June 14, 2006 9:14 AM To: wsg@webstandardsgroup.org Subject: [WSG] How does CSS handle it's references Greetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but... Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards ~Veine Sent via the WebMail system at vikberg.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.1.394 / Virus Database: 268.8.3/362 - Release Date: 6/12/2006 Veine K Vikberg President þ Website Design Development þ IT Service Management þ Search Engine Marketing Specialist þ E-mail Newsletter Specialist Phone: 877.891.7310 Fax: 877.891.7310 E-Mail: [EMAIL PROTECTED] **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help** No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.1.394 / Virus Database: 268.8.3/362 - Release Date: 6/12/2006 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] How does CSS handle it's references
David; The server is set to general default, which in this case means that I have everything set to be cacheable, which i.m.h.o. is the way to go, since it vastly improves page load if the object is used as a background for a static object. My concern is if my whole sheet is loaded and cached upon being read the first time, which in this case the images being cached amounts to over 1 MB :( Regards ~Veine At 11:01 PM 6/13/2006 +0100, you wrote: I'm making a fairly general assumption about the webserver you're using (as a lot to do with this is based on what your webserver is configured to do, and also how an individual browser reacts). In general, once an image has been loaded once (by whatever method, html/css/_javascript_), then that image is cached, and can be called again without having to re-download the image from the server. It also doesn't matter if the way you call the image is different from the original method (eg. first used by a stylesheet rule, and then used on a different page via _javascript_). As I said this depends on how your webserver is configured. However, unless there's be any reason for not doing so, then most configurations tell the browser that the image is cachable (sometimes developers tell the webserver to not allow caching for images/pages that are designed to change frequently). Also, browsers also have the ability to disable caching, but that's a fringe worry, and really isnt worth worrying about. Thanks, David. Veine Vikberg wrote: Greetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but... Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards ~Veine Sent via the WebMail system at vikberg.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.1.394 / Virus Database: 268.8.3/362 - Release Date: 6/12/2006 Veine K Vikberg President þ Website Design Development þ IT Service Management þ Search Engine Marketing Specialist þ E-mail Newsletter Specialist Phone: 877.891.7310 Fax: 877.891.7310 E-Mail: [EMAIL PROTECTED] **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help** No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.1.394 / Virus Database: 268.8.3/362 - Release Date: 6/12/2006 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] How does CSS handle it's references
James; Indeed, you are right - thank you for reminding me about the HTTP connections, which reminds me to combine the style sheets and the _javascript_s, for the sake of clarity at this point they are individual ones. If you are right (hope to hear from more people on this subject) that the image is only loaded if it is actually used on the page. Then this tool becomes obsolete at www.websiteoptimization.com since that was the one that denied to load the page since it became over a MB in filesize and it wanted to load all the images that were defined as backgrounds in the CSS. I did do them as backgrounds in CSS to separate style from content in this case, but if it in fact is loading the whole thing as the websiteoptimization.com web site suggests, I guess I have to rethink and actually include the image in every separate page. I really hope that you are right, and as for the 'rest' of browsers (Opera, Safari, Amaya et al) becomes a non issue since it's only FF and IE that are allowed in this corporate world (they are actually pushing to rid systems of IE and have FF corp wide) Regards ~Veine At 08:29 AM 6/14/2006 +1000, you wrote: There's also the overhead of establishing a new HTTP connection for each 'reference' to consider. For that reason, it's better to reference large file(s) instead of multiple small files where possible. Such as combining stylesheets or external scripts on the server-side into a single file, and using the image sprite technique to combine multiple small images. As for loading, my understanding is the browser will load images defined in stylesheets after the page has finished loading. Also images defined in stylesheets are only loaded if they are referenced by an HTML element. So if you're only using 1 of the 5 CSS classes you've defined, only 1 of those background-images _should_ be loaded. I only know that from my own little tests with FF and IE, so nothing's to stop other browsers from loading everything. I'm not familar with the CSS specification, maybe theres's something mentioned there? On 14/06/06, Paul Bennett [EMAIL PROTECTED] wrote: Hi Veine, 'the only dumb question is one that goes unasked' :) The Big Brains will hopefully chime in soon, but I'm guessing it will depend upon the cache setting of the clients browser. Most people will leave the cache settings unaltered so the browser will cache your images and CSS file, then reuse them when another page calls the same files. The big slowdown will occur when people first load the page - if you're referencing 11 *different* image files at 50Kb each, that's (counts on fingers) 550Kb - which is way too large. Does that help? Paul -Original Message- From: listdad@webstandardsgroup.org [mailto: listdad@webstandardsgroup.org ] On Behalf Of Veine Vikberg Sent: Wednesday, June 14, 2006 9:14 AM To: wsg@webstandardsgroup.org Subject: [WSG] How does CSS handle it's references Greetings; Now this may be one of the most basic questions I have ever asked on this list - and make you laugh at me but... Here goes, if a stylesheet has a reference to three classes, each of which has an image as background that is 50K - when that stylesheet is used in another page, does that image get loaded before the page is displayed? I hope I make sense here, what spurred the question is that I have used an online web speed checker, and it refused to load the page, saying it was too big, cause my style sheet has 11 of those references for this partcular internal site, so the speed isn't really the issue, but I was thinking about other projects. Regards ~Veine Sent via the WebMail system at vikberg.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.1.394 / Virus Database: 268.8.3/362 - Release Date: 6/12/2006 Veine K Vikberg President þ Website Design Development þ IT Service Management þ Search Engine Marketing Specialist þ E-mail Newsletter Specialist Phone: 877.891.7310 Fax: 877.891.7310 E-Mail: [EMAIL PROTECTED] **The discussion list for http://webstandardsgroup.org/ See
