How to instruct the browser to download a file based on the visitor’s screen size?

  • gabe
  • Misc

Reminder: This option is available in the Pro version starting from v1.1.8.2 and it’s recommended to be used with care. If you’re not sure whether to instruct the browser to download a file based on the screen size, then it’s better to leave it as it is (the default option “on any screen size”).

In some cases, you might deal with web pages where CSS/JS is needed to load on desktop, but not on mobile, and vice-versa. To make sure the page loads faster and reduce the total page size, there are ways to instruct the browser to only download the targeted file based on the screen size of the visitor’s device. For instance, if he has an iPhone and visits a page, you could prevent the browser from downloading certain files that are only needed to run on a screen size bigger than 768px (e.g. at least the portrait size of a standard tablet), thus improving the Google PageSpeed Insights / GTmetrix score (e.g. by preventing a large render-blocking file to download on mobile view, the first contentful paint will be reduced considerably).

This is usually recommended to be done with files that can be loaded later after the content from the page loads or needed when the user interacts on the page (e.g. hovering over a menu or clicking on a button that loads content which has a certain CSS file that styles it). Since the option uses JavaScript (with fallback for LINK tags) to trigger based on the media query, it will not be render-blocking and if the rule applies to one of the essential files that are needed to render the above the fold (first part of the page), it might lead to a flash of unstyled content.

We’ll use the example of the “astra-menu-animation” handle from the well know Astra theme (file loaded is: /wp-content/themes/astra/assets/css/minified/menu-animation.min.css). It’s a very small file in KB, so it won’t really make a difference in terms of page speed score, but it will give you an idea of how this feature works and it will help you apply to larger files if it would be the case whenever you optimize your website or a website for a client.

You might need the menu’s animation effect when the user hovers the mouse over the links and clicks on various parts of the menu, but you might not want it for the mobile view, especially if you’re dealing with a fairly small menu and you won’t use any of the effects that are added in that CSS file (e.g. no hovering on many mobile devices). In this case, you will use Asset CleanUp Pro to instruct the browser to download the file only when the screen size is equal to or smaller than 767px (that’s a standard for many mobile devices, but you can choose any size you want). Here’s how the option is applied in the print screen below:

Before applying this feature, this is how the tag would look like (the domain name was stripped from the URL for the demo purpose):

<link rel='stylesheet' id='astra-menu-animation-css'  href='/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.5.5' media='all' />

After the option from the print screen is applied, here’s how it would look like:

1) The “href” attribute is replaced with something else, thus, instructing the browser to avoid downloading it, since it needs a valid “href” attribute.

<link data-wpacu-apply-media-query='screen and (max-width: 767px)' rel='stylesheet' id='astra-menu-animation-css'
      wpacu-astra-menu-animation-href='/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.5.5'
      media='all'/>

2) Then, window.matchMedia() is used to determine whether the media that was set is matched by the visitor’s device (e.g. if he uses an iPhone, then it would be a match as the portrait view of such a device is smaller than 767px). If it’s a match, then it will apply the “href” attribute to the LINK tag and the browser will download it.

<script type="text/javascript">function wpacu_astra_menu_animation_match_media(wpacu_astra_menu_animation_match_media_var) {
    if (wpacu_astra_menu_animation_match_media_var.matches) {
        var wpacuHrefAttr = document.querySelectorAll("[wpacu-astra-menu-animation-href]")[0].getAttribute('wpacu-astra-menu-animation-href');
        document.querySelectorAll("[wpacu-astra-menu-animation-href]")[0].setAttribute('href', wpacuHrefAttr);
    }
}

try {
    var wpacu_astra_menu_animation_match_media_var = window.matchMedia("screen and (max-width: 767px)");
    wpacu_astra_menu_animation_match_media(wpacu_astra_menu_animation_match_media_var);
    wpacu_astra_menu_animation_match_media_var.addListener(wpacu_astra_menu_animation_match_media);
} catch (wpacuError) {
    var wpacuHrefAttr = document.querySelectorAll("[wpacu-astra-menu-animation-href]")[0].getAttribute('wpacu-astra-menu-animation-href');
    document.querySelectorAll("[wpacu-astra-menu-animation-href]")[0].setAttribute('href', wpacuHrefAttr);
}
</script>

3) Finally, there’s a fallback in case JavaScript is not enabled for any reason in the visitor’s device. We don’t want to end up with unstyled content in all the screen sizes.

<noscript><link data-wpacu-apply-media-query='screen and (max-width: 767px)' rel='stylesheet' id='astra-menu-animation-css' href='/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.5.5' media='all' /></noscript>

For the SCRIPT tags, the principle is the same. Obviously, the “src” attribute is used instead (“href” attribute is for LINK tags) and there’s no need for any fallback as the file will not be downloaded anyway if JavaScript is disabled (with or without the option for the loading based on the screen size).

Things to know when using this feature

  1. Preloading CSS/JS does not work at the same time with this feature (instructing the browser to download the file based on the media query). If you preload a file, it will be downloaded regardless of the screen size.
  2. The features “Inline CSS/JS” and moving the tag (LINK or SCRIPT) from HEAD to BODY (or vice-versa) would not be relevant anymore if this feature is used as they can’t work together. For instance, by inlining a CSS file and printing its contents as a STYLE tag (which works fine for small files), the browser already downloaded its contents (part of the HTML source), thus it makes this media query load feature pointless.
  3. Works only for whole files, not just part of them. For instance, if the theme you’re using has a large style.css with all the CSS syntax for both desktop and mobile then you have to leave that file alone (no screen size media query rule applied to it) as it has to be downloaded completely in order to work properly. Some themes, however, use single files for the functionality of something related to the mobile view, such as the burger menu (e.g. burger-menu-design.css). In this case, applying the media query load rule would make sense as there’s no point in downloading the file for a desktop view where the burger menu is not needed.
  4. Relies on JavaScript’s matchMedia API for finding out whether or not a media query applies to the document. The device’s support (e.g. Chrome. Firefox, less known various browsers, etc.) is excellent. Over 99% of the users (based on the browsers’ versions) support it: https://caniuse.com/matchmedia. As for the remaining 1%, the option will not work, and if that’s the case, they might be using a very old browser and other functionalities from your website might not work either. It’s up to you to decide whether it’s worth using window.matchMedia feature, depending on the nature of the website. In case JavaScript is disabled (e.g. the visitor might have deactivated it by mistake), there’s a fallback in place for LINK tags using the NOSCRIPT tag so the styling will still load and apply.

To understand more about media queries (e.g. how they work, possible values for various devices), please check the following posts:

Was this post helpful?