Are Unused CSS Images Downloaded

Are unused CSS images downloaded?

This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:

• Chrome: Doesn't
• FireFox: Doesn't
• Safari: Doesn't
• IE8: Doesn't
• IE7: Doesn't
• IE6: Unknown (Can someone test and comment?)

How can I force the download of unused CSS images?

Few options here:

1. Add a hidden element and add your image as a background; the browser will load it and is smart enough to know that it doesn't need to reload

2. What I would consider the cleaner way: load your second image behind the first one:

html {
    background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
                      url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

When will the browser download the background images defined in a stylesheet?

When you declare background-image in your stylesheet, the image will be downloaded straight away when the browser is parsing your stylesheet regardless of what you call that class in the document or you do not.

Is it worth removing unused CSS?

Is it worth removing unused CSS rules?

I would say yes. To have any unused code in your production build is not cool .

However, unless something has gone very wrong, it is highly unlikley that your CSS is the reason for slow page loads, in fact the impact of loading a couple pages of unused css rules will be almost neglible. It's more likley to be images/ media, or maybe scripts.

You should probably investigate whats slowing down your page. Have a look in the network tab of your dev tools to start debugging why page load is slow, Google Page Load Insights may also help. Have a look at this blog series, about speeding up your web apps too.

If you've not done so already you should probably minify and bundle your CSS and JS for production also.

---

How to find and remove unused CSS rules

Removing unused CSS is a common task, and there are a lot of packages and tools out there which make it strait-forward. There are several options, going forwards:

1. Manually remove unused CSS.

If your app is still quite small, this will probably be the easiest approach.

1. Open Chrome DevTools
2. Open the command menu with: cmd + shift + p
3. Type in “Coverage” and click on the “Show Coverage” option
4. Select a CSS file from the Coverage tab which will open the file up in the Sources tab

Source: Google Developer, Chrome 59

2. Use an online tool

There are tools out there, where you can just feed it a link to your site, and it will search and find unused CSS. The drawback here, is that this won't work locally.

• The best tool available it probably UnusedCSS, however it only
  allows you to do one site for free.
• UnCSS it totally free, but not as comprehensive.
• PureifyCSS is also good, and free.

3. Automate CSS removal

uncss allows you to automate unused CSS removal, either at built-time, or complile-time. It also works with Grunt and Babel.

---

A word of warning, some of your CSS might be detected as unused, when actually you are using it later on, such as when a request has finished loading. Be sure not to delete classes that are indirectly used.

Edit:

Be careful when using coverage for CSS usage, it considers media
queries, hover effects and others as useless since they're not applied
when loading your page

See also: https://css-tricks.com/unused/

Does CSS load commented images?

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.

Do unused CSS styles affect load times

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.

Do background images load if they are replaced with media queries?

No it wouldn't as you're completely overriding the background property*.

For reference, however, if you wish to keep your image and add in a colour, rather than using the background property, use the individual background-image and background-color properties:

div {
    background-image: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {
    div {
        background-color: #000;
    }
}

* Note that this is browser-specific; to save time the majority of browsers will only load resources when they're required. See also: Are unused CSS images downloaded?

Is there a way to check which CSS styles are being used or not used on a web page?

Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.

---

Related Topics