Does CSS load resources even if they aren’t used?

Let’s say we have a huge stylesheet that hasn’t been cleaned up in a while. A feature is removed from the site by the CSS is left in. This CSS contains background-image references. Are these images loaded by the browser even though no element is using them?

Short answer: NO

But what about elements that are not on the page on page load, but are post-loaded in Javascript?

I set up a quick experiment to test this:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>CSS Resources Test</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
    <h1>CSS Resources Test</h1>

    <h2>Javascript post-loaded image</h2>
    <p>Clicking the button below will append a new image to the DOM.</p>
    <div id="normally-loaded-image"></div>

    <div id="button">LOAD NEW IMAGE</div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
    <script>
        $(document).ready(function() {
            $('#button').click(function() {
                $('<div id="post-loaded-image"></div>').insertAfter('#normally-loaded-image');
            });
        });
    </script>
</body>
</html>

 

#normally-loaded-image {
    width: 300px;
    height: 300px;
    background: #0C0;
    background-image: url(http://wpmu.org/wp-content/uploads/2012/07/Responsive-WordPress-theme.png);
}
#post-loaded-image {
    width: 300px;
    height: 300px;
    background: #0F0;
    background-image: url(http://bloomwebdesign.net/myblog/files/2013/03/responsive-website-design-tips.jpg);
    background-size: cover;
}

When I click the button, JavaScript will inject an element with styles referencing a new image.

If I look at Network inspector in Chrome, I can see that the post-loaded image is only requested onClick, even though it is specified in the CSS.

post-loaded-image-network-inspector

I can also confirm that the experience is the same for styles which are inline and in the head.

What about media-queries that change the background-image of the same element?

So I added a new element and styles to my test:

    <h2>Responsive Image</h2>
    <p>This element's background-image will change at widths higher than 1000px.</p>
    <div id="respond"></div>
#respond {
    width: 300px;
    height: 300px;
    background: #0C0;
    background-image: url(http://wpmu.org/wp-content/uploads/2012/07/Responsive-WordPress-theme.png);
    background-size: cover;
}
@media (min-width: 1000px) {
    #respond {
        background-image: url(http://bloomwebdesign.net/myblog/files/2013/03/responsive-website-design-tips.jpg);
    }
}

It turns out media-queries also behave the same way! Only when I drag my window larger than 1000px does the new image get requested.

Demo: http://jalproductions.co.uk/includes/scrapbook/css-resources-test/

Posted Wednesday, April 17th, 2013 under BBC.

One comment so far

  1. Browsers are pretty intelligent when it comes to CSS. These behaviours are well known.

    The real trick is to tell a browser not to load the src of an img tag… (depending on the browser it changes completely)

Leave a Reply

*