Here, we’ll go through conditional loading, the benefits of varying what resources load on mobile and desktop pages and how to do this using the Window.matchMedia() function in your JavaScript file.
In our explanation, we’ll use the example of social buttons and examine how features like this affect load time on mobile compared to desktop.
What is conditional loading?
Conditional loading does pretty much exactly what it says on the tin. When the conditions are correct, only certain pre-defined portions of a website will load. This could be when the user requests only a certain part of the website, or when certain browsing conditions are met. Conditional loading can also occur when the use of a mobile device is detected. By breaking out relevant portions of content into their own individual HTML sections, a web master can boost the performance and responsive nature of any website. With so many websites being access via mobile devices, conditional loading is important to ensure that websites are fully responsive across all devices.
Social buttons
Social buttons are very resource heavy features, with their purpose being to display a count of social votes for sites like Google+, Facebook and Twitter. Though they may be useful on desktops, you should avoid them on mobile. This is because unlike desktops, mobiles typically have a less reliable and slower connection. Unnecessary resources like social buttons are therefore best avoided because these extra calls and resources will affect how a page loads.
For desktops with more capabilities, it makes a lot of sense to have social buttons to provide proof that your pages are supported on these social networks. However, a mobile page should always be a simplified and fast version of your desktop page. Having to retrieve extra data and the JavaScript that social buttons use will make pages slower and less user friendly. Not only will your users notice this inconvenience, but Google will too and this will hurt your mobile SEO and ranking. As an alternative to social pages, you’re better off having a static link where users can share your page.
Third party calls
Here, we’ll go through some of the popular third party resources that create additional calls and add to page load time.
- Adsense adds 20-30 extra calls or resources to download
- Google+ buttons or badges add several calls and resources, even downloading an entire extra font
- Social buttons add multiple extra calls, requiring communication with an external database and external JavaScript loads
- Web fonts need an additional CSS and conditional loading of resources in addition to the already large download of the font itself
Web page with one image and one CSS file: This page would load relatively quickly (around half a second) as it only needs three elements to load: HTML, CSS and the image
Webpage with one image, one CSS file and Adsense: Page load time would be increased considerably, up to around two seconds. This is because the additional calls and downloadable resources created by Adsense are demanding on mobile devices. This applies to any third party resource you add to a page as this process has to be repeated each time your page is viewed.
Conditional loading of resources
Clearly, additional resources should be limited on mobile devices. It’s therefore necessary to learn how to selectively load aspects of a desktop version of a page on mobile. Mobile users should have access to a simpler and faster version of your page with fewer resources (for loading purposes).
To fix an issue, you first need to identify it. In this case, the problem is that responsive webpages deliver the exact same content to both desktop users and mobile users. However, as mobile networks tend to have lower capabilities, you need mobile pages to load fewer things to the desktop versions.
Now you need to know how to resolve this issue. JavaScript Adaptive is the Google recommended method of web design in which the same HTML and JavaScript is used for your mobile pages as is for desktop. This means that regardless of what device is used to view your page, it needs to always be shown in the same JavaScript file. Any changes between desktop and mobile versions of pages must therefore be made in the same JavaScript.
This is where Window.matchMedia() comes in.
Window.matchMedia()
Quite simply, the Window.matchMedia() function in your JavaScript file allows you to provide different instructions for desktop users and mobile users within the same JavaScript. It does so by measuring a page and then following with instructions dependent on the sizes of pages. You can think of it as like media queries for JavaScript, determining the size of a viewport before sending conditional instructions.
This code shows how to provide different instructions for varied viewport sizes:
if (window.matchMedia(“(min-width: 900px)”).matches) {
/* the view port is at least 900 pixels wide */
} else {
/* the view port is less than 900 pixels wide */
}
This next code would be used for conditional loading of a Google plus button. Here, the code specifies that if the page is over 900 pixels wide (a desktop page), the JavaScript required for Google plus badges to work will load, however if the page is smaller than 900 pixels wide, it will not. Simply put, this will mean that Google plus badges will appear for desktop pages but won’t for mobile:
if (window.matchMedia(“(min-width:900px)”).matches) {
(function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = false; po.src = ‘https://apis.google.com/js/platform.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })();
}
This code would be used to always load analytics but conditionally load Google plus buttons. Here, a conditional call for the Google plus JavaScript is being made and the analytics snippet is always added. This means that whatever size the viewport is, the analytics code will always be executed, however the Google plus code is only loaded when a page is over 900 pixels:
if (window.matchMedia(“(min-width:900px)”).matches) {
(function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = false; po.src = ‘https://apis.google.com/js/platform.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })();
}
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-XXXXXXXX-1’, ‘varvy.com’);
ga(‘send’, ‘pageview’);
Using the Window.matchMedia() function in your JavaScript file allows you to deliver the desired JavaScript according to device size, making it a vital aspect of mobile SEO and optimising user experience.