Reminder: This option is available in the Pro version starting from v220.127.116.11 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).
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.
<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>
Things to know when using this feature
- 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.
- 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.
- 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.
To understand more about media queries (e.g. how they work, possible values for various devices), please check the following posts: