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.

  Case 1: The LINK media attribute is set to “all”

If the enqueued stylesheet has the media attribute set to “all” which is the default value for most stylesheets, then you have the option to apply a custom media query and have the browser download it only if the matches that query (“Make the browser download the file” — “only if this media query is matched:”).

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 bigger than 767px (that’s a minimum standard for many laptop devices with landscape view, 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).

  Case 2: The LINK media attribute is set to a media query different from “all”

Note: The “only if its current media query is matched” option is available in the Pro version starting from v1.2.4.0.

There are themes and plugins that are more organised when it comes to the CSS that is loaded there and the developers have the CSS code that is meant to be applied on mobile/table in a separat file than the one that is meant to load on desktop. For instance, a theme could have 4 CSS files loaded: one for all the common code (with media attribute “all”), one for the desktop view, one for the tablet view (portrait and landscape modes) and another one for mobile view.

We’ll use the example of the “woocommerce-smallscreen” handle from the popular WooCommerce plugin. It has elements for small screens as its name suggests and the following “media” attribute set: “only screen and (max-width: 768px)“. This clearly makes the browser apply the CSS for mobile views.

Now, if this media query is already set by the developers, why would you need to do any changes with Asset CleanUp Pro you may wonder? By default, even if the media query is set to apply on mobile view only, the browser will still download the file which is often not ideal. There are a few benefits to apply the following option: “only if its current media query is matched“.

  1. The browser will not download the file leading to fewer unused CSS and a better PageSpeed score
  2. By avoiding downloading the file, that would mean fewer HTTP requests and resources used. You may have a shared hosting account and the fewer resources your account uses, the better

If the option is applied, the HTML output will be exactly the same as the one mentioned above (from Case 1). The only difference will be the media query value which is the one that is already inside the LINK tag (the one in blue font from the print screen above).

  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. This feature might not be worth enabling for very small files (e.g. a few lines of CSS).
  3. 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.
  4. 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.
  5. 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. We have to think for the very few that could be in this situation. We don’t want to end up with unstyled pages for any visitor.

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?