Web Development: Performance Tip: Use the Media Attribute for Faster Page Load Times

Thursday, August 6, 2020

Performance Tip: Use the Media Attribute for Faster Page Load Times

Sometimes web performance optimization takes a lot of work, and sometimes performance can be improved in just a moment. Adding the media attribute to conditional CSS files is an easy and quick way to speed up web page load times.

TL;DR

In short, if you add the media attribute to the <link> tag that calls a CSS file, you can turn it from a “render blocking” resource into a “non-render blocking” one, which will shorten the critical rendering path. However, it only makes sense to use the media attribute on conditional CSS files.

Now, let's see how this super-fast performance optimization technique works.

What is CSS Render Blocking?

When requesting a web page from a server there are two types of resources: render blocking and non-render blocking resources. Render blocking resources are essential for the rendering of a web page, so the web browser stops processing other resources until a render blocking resource is being parsed.

If you have too many render blocking resources, it will take longer for the browser to render the page. However, you can reduce page load time by turning render blocking resources into non-render blocking ones whenever it’s possible.

performance matters — Performance matters

By default, HTML and CSS are treated as being render blocking resources. HTML is essential for the DOM (Document Object Model) being constructed while CSS is essential for the CSSOM (CSS Object Model) being constructed. However, not all CSS is essential for rendering the page.

What is Conditional CSS?

Conditional CSS is only used under certain conditions. Stylesheets for mobile or print layouts are typical examples of conditional CSS. These stylesheets are only essential resources if the user loads the page under the given conditions—for instance, on a mobile device or print page.

However, browsers also treat these conditional CSS files as render blocking resources. Luckily, there’s an easy way to make them non-render blocking using the media attribute.

How to Use the Media Attribute to Prevent CSS Render Blocking

If you add the media attribute to the <link> tag, the CSS file in question will stop being seen as a render-blocking resource.

You can think of the media attribute as the HTML equivalent to CSS media queries. It can take the same values as CSS media queries. For instance:

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 650px)">
<link href="print.css" rel="stylesheet" media="print">

You can also add the media attribute to the <style> element used for inline CSS:

<style media="screen and (max-width: 650px)">
    .desktop-banner {
        display: none;  
    }
</style>

The media attribute won’t prevent conditional CSS from being downloaded. The browser will still download these files, but they won’t be in the critical rendering path. As a result, the page load won't be blocked whilst they are downloading.

Conditional CSS files labeled with the media attribute will still be render blocking resources if the page loads under the conditions specified within the media attribute, for instance, on a mobile device or print page. However, they will be non-render blocking in any other case when the conditions are not met.

Improve Your Page Load Times With These Performance Tutorials

Conclusion

Render blocking can be awkward, but this simple little tip can shave significant time from your page load, and in the world of web performance every second counts! Try this trick today, test the results using one of the free tools listed below, and let us know how much difference it makes.

Web Development