display none Does it reduce load time, or are the items still loaded but not displayed

Question

I am building a responsive website using media queries. I need to switch to a different navigation method for very small screens.

For desktop/tablet screens, I am using a sprite based UL/LI list method. For small smart phone screens, I will have simple link text.

If I use, Display: none; to hide the sprite based navigation for smart phones, will the sprite image still be loaded, but just not shown? Do I need to parse the image reference in my css media query for smart phones? Or should I just leave the image reference out of the initial css altogether since I am designing small to large (i.e. the default css is for small screens, and then media queries change things as the screen gets larger).

Answer 1

To answer your question, display: none does not reduce load time. It still loads the content/classes/code in question, but the browser doesn't display/render them.

It sounds like you're using a mobile-first approach, so you could either:

1. Load all assets/classes/scripts regardless of mobile/tablet/desktop class you're aiming for and adapt the layouts using your media queries.

   • This means all content (sprites et al) will be loaded by default even if they aren't used by certain device-types.
   • Content/layout will either be shown or hidden based upon media query rules.
     
     

2. Load the required assets/classes/scripts as and only when the media query states change. The advantage of this is that the experience would be more relative the the device-type in question:

   • More reactive/timely experience and loading of functionality
   • Potentially less bandwidth
   • A more tightly design experience for each device-type
   • Some assets (images/backgrounds etc) can be selectively loaded

If you consider looking at option 2, then there are a variety of open-source asset-loaders that allow you to load CSS and Javascript code based upon media query state changes. [Note: More effort/design would be required to use this technique].

A simplified example of this using enquire.js (there are others asset loaders) would allow you to do the following:

<script type="text/javascript">

  // MQ Mobile
  enquire.register("screen and (max-width: 500px)", {
      match : function() {
          // Load a mobile JS file
          loadJS('mobile.js');
          // Load a mobile CSS file
          loadCSS('mobile.css');
      }
  }).listen();

  // MQ Desktop
  enquire.register("screen and (min-width: 501px)", {
      match : function() {
          // Load a desktop JS file
          loadJS('desktop.js');
          // Load a desktop CSS file
          loadCSS('desktop.css');

      }
  }).listen();

</script>

So, if a browser is 501px or above in width, then both desktop.js and desktop.css would load - enabling features/assets that aren't available under 501px and that aren't required.