If I comment a line ex.
/* background: url(images/header_overlay.png) */
on CSS on page load on browser does this image get downloaded?
What if I let it as it is and include a second CSS that take priority with a second image
background: url(images/header_overlay2.png)
During the load time on user browser does this images downloaded both and then the second get priority? I want to be carefully and precise on css to reduce the page load time. I am interested on big pages where I can't get the fully ideal clean css and css overwrite it's necessary.
It is useless to have commented code in your css. It is not parsed, therefore the image will not be downloaded, but if you have some code which might be useful later, then write some notes to yourself somewhere and remove the commented code. This reduces file size as well, so it is also a micro optimization.
Also, if you have two conflicting rules referring to two different images, then the one with greater priority will take effect and the other will be ignored, therefore only one image from the conflicting two will be extracted.
You can check what image is downloaded in your browser. For instance, with chrome, click inspect element anywhere and in your console click on the network tab and see what images are downloaded. Make sure you clear your cache before such tests.
CSS don't parse commented lines, it's just a text and no image can be inside.
If you see in your dev tools that header_overlay.png was downloaded, probably is define elsewhere.
No- anything within comments is not parsed within the scope of CSS, images within comment wrappers will not be downloaded, nor will it impact any other (uncommented) rules- this can be found in the spec
(...)their contents have no influence on the rendering
Related
I have a few lines of styles in every page. I'd rather not to put them in one css file for it might affect the styles of other page.
Do we really need to put the styles on a css file or is it ok to have
<style>...</style>
on every page?
What are the advantages of putting the styles in one page regarding to it's speed?
Does it speed up the loading of a page?
Basically it is a compromise option. Like Marty Wallace and Marc B stated.
The speed aspect is therefore a consequence of the option you take, as they are both valid. Just remember these two factors:
should you choose to use the CSS in the <style> section of your HTML file, it will be loaded everytime with each page load. Therefore, the more CSS rules you have in this section, the bigger the file, hence, longer loading time and slower speed.
If you <link> a stylesheet, that file will be requested everytime you load the page as well. So more or less the same relation to loading time is implied, although it may differ a lot in absolute value.
Also, you should have in mind that most browsers have caching mechanisms to optimize the usage of CSS. Try to read more about it so you can take advantage of it as well.
My opinion is that a mixed approach is probably the best option. Choose the rules that are to be applied to the common elements between your different pages and put them in a linked CSS file. Then, use the <style> tag to set specific CSS for elements on that page. This is my I-don't-care-about-it-that-much way of doing it.
Most of the time I found that CSS doesn't impact performance that much - but of course, it depends a lot on how much CSS you are actually using.
Would both these images be downloaded? Is the browser smart and only downloads the last one? Will it start to download the first one and then cancel it, or will it wait until all css is loaded and then download the last image?
body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }
Test it out: http://fiddle.jshell.net/8xZNY/show/
And the results:
You overwrite the background property with your second declaration, so no, they aren't downloaded twice. Only the last one is actually used.
I actually didn't know, so I tested it out:
body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }
It probably depends on the browser, but it seems that at least for Chrome (and logically) it parses the stylesheet first to determine rules that get applied, then downloads the images for applied rules. This means that only the second image gets downloaded (the Network tab confirms this).
EDIT: Same result testing in Firefox
MORE EDIT: Same result even using the style attribute to set the background. It will only download the one with the highest specificity it seems.
CSS is an interpreted language. It will execute line by line until it is finished, so yes -- it will grab both.
Edit:
By nature of an interpreted language, this is how it should work...
It seems though that there are intelligent preproccessors baked into browsers to look for things like this.
I am wondering if unused CSS styles affect load times because I normally break my sections of my code using this format
/*===================
Nav-Styles
===================*/
However, I also use coda to write my code. It has a code navigator, which detects ids followed by {}
what I thought might help with my code organisation is to create this format of break
/*==========================================
#----NAV-STYLES-BEGIN {} /* Nav Styles */
==========================================*/
This will mean my section breaks will them appear in the code navigator and can be jumped to quickly. However, if this is going to cause speed related issues, the means will outweigh the end.
Is this a bad idea or will the difference be so insignificant that it's worth doing if I wanted?
The answers here are not correct.
Unused CSS does two things:
Adds more bytes that need to be downloaded before the engine can start rendering the page
The browser engine has to go through each css selector to evaluate whether it is on the page and how it should render.
The second part is crucial. If 50% of your css file is unused css, you are essentially have the browser engine take twice as long to render your CSS for the page. Of course, the type of CSS selectors you have matter as well, so the twice as long is more of a easy example than full truth. Never the less, unused CSS increases your browsers page load time, even when the file is cached on the local drive.
Any unused CSS or JS that is passed over the wire to the client will hurt the sites performance at the least to a small degree. The unused CSS increases the size of the page, therefore increasing the time it takes to download a page. A few characters here and there will not have a huge impact on your download times, however if there is a large amount of unused styling there may be an impact. This is why many people compress their CSS and JS.
The effect of this is going to be unnoticeable, and could be described as negligible at best. Regardless, you could use a build script to remove all comments and minify your CSS. This will improve load times, if only slightly.
The short answer - go for whatever is easiest to develop with. You can worry about production later.
I hesitate to add
I have a PHP script that has two CSS files in it's header. One of the CSS files only have about 5 short lines in it.
Is is safe to move that one into the larger CSS file? What's the point of having two separate CSS files when one is only a few lines?
Yes their is a point in it. I have for example a design.css that handles all of the colors, a layout.css pure for positioning and sizes and I have a interaction.css which handles the animations etc..
There is no problem in combining the CSS file as long as it doesnt affect readability.. Just keep in mind that the structure must remain:
file1.css
file2.css
results in on file containing the below code in the same order:
/* content of file1.css */
/* content of file2.css */
No point at all (in this case). You should move the few lines into another.
If you have 2 separate files - there will be 2 requests to the server.
You'll probably not see the difference as these are miliseconds, but it would be a "best practice" in this case.
In essence it helps browsers only load content relevant to the page, speeding up page load times.
There are services that can show how much of your downloaded CSS was applied to a given page.
There is no reason why you shouldnt move it into the same file.
You can have as few or as many CSS files as you need.
The advantage is only really when you have a huge number of styles and the CSS file gets large and unreadable. Then it makes sense to break them down. Or when you want to split them for different pages etc.
Its just an extra request to the server which seems pointless for only 5 lines.
Check to make sure that your PHP script does not reference the CSS file that has just a few lines in it. If it does not, then you're in the clear to merge the two. If it DOES reference it, then consider calling the shorter CSS file inside the larger CSS file like so:
#import url('/css/smaller-file.css');
If you add that to your larger CSS file, then you should be able to just have the larger CSS file in your PHP header.
Hope this helps!
Of course there is a point, just like there is a point in having many files of any languages to organize the content.
As having many requests is a big burden on performances, the usual solution (and mine) is to use a build script to build the version in production by concatenating all the CSS files of the directory into one. The precise way to do that depends on your building
Note that it's similar with what is done with JS files which are concatenated and minified.
what happens to them? are they loaded by the browsers?
should I split my CSS files into more stylesheets, so only images the css/images that are used are loaded on the page?
Seeing as people are saying the same thing I said in my comment I guess I should have added it as an answer.
I was going to recommend firebug, but I believe the images are not downloaded until you reference them in the html. You can confirm this using chrome or ie or firebug developer tools. as far as splitting the css, I would only do so if you have an excessively large css file, or you need to split it up for different css files for browser capability i.e. you have styles that are ie7 or ie 8 specific
Browsers will only download images that are actually used on the page. So images that are specified in CSS as background images will not be downloaded unless that CSS rule is applied on the page.
You can use Firebug or other similar programs to see what is loaded by the browser; however, I believe the answer is that since the DOM element is never created, the image is never requested from the server. No bandwidth or loading time is wasted (other than a few more bytes of CSS, but that shouldn't be too much overhead.)