How To Use CSS Display None Without Affecting Page Load Times

While we were working with one of our clients, we realized that their image traffic in mobile was 3x compared to similar websites. In this article we are going to see how to set set the property display``none to an image.It's important to focus and learn how display none works to discuss it with your team and implement some changes.

When we started investigating, we saw that they were hiding a lot of images by setting the property display to none using media queries. On one hand, the goal o f hiding the images was accomplished. But on the other hand, the browser requests for the hidden images were still being sent, having a direct negative impact on the site load performance.

At PIIO we are always looking for ways to improve how our clients manage their images, we have made that part of our mission and part of our culture. Here it's why we built Piio...

Setting 'display: none' to images or to image containers does not prevent the browsers from requesting the image.

How display none work for images

As you would expect, images behave like any other element when you set the property display to none.The image is not shown and doesn't occupy any space on the DOM. The problem is that browsers, due to the possibility of a script to dynamically change an element of the DOM, will load every element present in the dom. If the images are hidden but are in the dom then they'll send the network request for that image.

This means that, in the case of an image, it is going to be requested anyway when in most case scenarios you are not going to use it.

Let's take a look at an example:

In the code above we set display: none to a div that contains four images to hide them from the DOM.

If we take a look at the network when loading this HTML, this is the result:

The images are not shown but the requests are made (the result would be the same if we apply display:none to each image).

This doesn't impact on the browser rendering of the DOM but it does impact on the site content load.

If you are going to be toggling the visibility of the image, then this is not a big problem, it may even be better if it is already loaded. But if you are not planning to show the images, or the chances of showing them are really low, then this situation is actually a problem.

Solutions

1. You can prevent the HTML containing the images from being loaded into the DOM instead of using display none, and add it later if you need to. This is super easy to accomplish if you are using a framework like Angular or React. You just avoid rendering the HTML with an if statement for example. This is also super simple if you are using vanilla javascript.

2. Use your images or at least the ones that you intend to hide, as background images. Background images don't get loaded if the element is hidden.

Conclusion

Images get requested by the browsers even if they have the display property set to none.

In order to prevent this you can implement the first solution mentioned. But if you are going to be toggling the visibility of the image too much, adding and removing the image from the HTML can be an unnecessary cost of performance that you can avoid by using css display none property.

Using the solution 2 is way better since you can just use CSS without having to manipulate the DOM.

It's important to have a quick view to this article before making changes. And if you want to know more about FCP metric, here you are another article that may help you.

Another articles you might be interested on:

• What is first contentful paint?
• The most complete guide for image optimization

If you have any question about how to manage your images don't hesitate to contact us.

Hope you enjoyed the post. We read all your comments and feedback!