Conditional resource loading

> > Conditional resource loading

Updated: January 2nd 2016

Adsense Animations Social count buttons Widgets Analytics Analytics only Menu

Loading different resources for mobile and desktop users

In the image above we see a desktop page loading several things and a mobile page loading only one thing.

This article will describe how to do that for your pages and the wisdom of doing so.




Social count buttons as an example

social buttons

Social buttons that display a count of social votes (Google plus, Facebook, Twitter, etc.) are very resource heavy and can be a good idea to use on desktops, but are almost always a bad idea to use on mobile pages.

On the desktop version of our pages, having the social count makes alot of sense, it is social proof that your pages are liked.

On the desktop version you have more room to show social counts and the desktop user likely has a stable internet connection where the adding of extra calls or resources won't really affect the way the page loads.

Mobile version of page should be simpler and faster

On the mobile version of your page you have less room to display things, but more importantly, mobile users have less stable internet access that is significantly slower and less reliable.

Having to get all the extra data, resources, and javascript that the social button requires will make your pages slower and less user friendly.

Your users notice this and so does Google.

In the case of social buttons with counts that have to be retrieved by extra javascript and third party database communication, you are hurting your users and and your mobile friendliness and possibly harming your ranking / mobile seo.

All those problems just to show a tiny number in a tiny button that mobile users may not even be able to see very well. Not smart.

For mobile users you are likely better off just providing a static link where they can share your page.

mobile share

Selective loading of resources for mobile users

Okay, in our social button example we now know that we want to show our desktop users the social count button, but do not want to use it for our mobile users. How do we do that?

And while we are at it, do we really need to load everything the desktop version loads for our mobile users?

Third party calls and the way they affect your page load

Let's look at the popular things used and how much they add to our pageloads...

  • Adsense - adds twenty to thirty additional calls / resources to be downloaded.
  • Google plus button or badge - adds several calls and resources and even downloads an entire extra font
  • Social buttons - All add several extra calls, require communication with an external database and external javascript loads
  • Web Fonts - require an additional css, conditional loading of resources and a rather large download of the font itself

Depending on your needs, you can make mobile pages load lightning quick by not loading these resource heavy types of third party resources.

A visual example using Adsense

Let's say we have a webpage that has one image and one css file.

This page will load quickly and only requires three things to load (the html, the css, and the image).

no adsense

If we add Adsense to this page, it now must load many more things, in fact, a surprising amount of things will now be adding to how your page loads...

adsense waterfall chart

Now let's look at that from a time to load perspective...

adsense time to load

My page before I added adsense loaded in half a second. When Adsense was added the same page took 2 seconds to load. Ouch.

These additional calls are fine on desktops, but on mobile devices and networks this adds a great deal of time and complexity to your pages.

I am not saying to not use Adsense on mobile, I am just displaying that for everything one thing you add to your page, you are in actuality adding dozens of new calls, resources to be downloaded, and communication complexity to your page.

This is true of any third party thing you add to a page and they have to go through that process every single time your page is viewed.

Example of conditional / selective loading of resources

The page you are reading now uses Adsense, Analytics, A Google plus social badge, javascript for lazy loading images and also javascript for making those social buttons show up on the right hand of this text.

Those are the things I use for desktop users, but for mobile users I only use Analytics, and none of those other things.

Your mobile users should be loading a simpler, quicker, and less resource heavy version of your page.

Conditional loading of resources for mobile users

We are going to go in depth here by defining the issue, presenting a solution, and explaning how you can use that solution yourself.

The problem

Responsive webpages provide the same content to desktop users and mobile users, but we need the mobile pages to load different things than the desktop page does.

mobile problem

Using the exact same html and javascript for your mobile solution is called "Javascript Adaptive" and is the Google recommended way to go for responsive web design.

This means that no matter what device is used to see your page, it needs to always be presented the same javascript file. So whatever changes or differences between our desktop and mobile versions of the page must take place from the same javascript.

Window.matchMedia()

To accomplish this is surprisingly easy using the Window.matchMedia() function in your javascript.

Using this function allows us to provide different instructions for desktop users and mobile users within the same javascript file.

mobile match media

How Window.matchMedia() works

What this function does is measure a page and then follows conditional instructions for different sized pages. It is basically like media queries for javascript.

It determines the size of the viewport, then allows for conditional instructions...

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 */
}

In the above code we see that we can provide different instructions for different size viewports.

Here is a specific example of how it can be used to load different things for different size viewports...

Conditional loading of Google plus badge / button code

In the following example we will make sure that the Google plus javascript for buttons and badges load on desktops, but does not load on mobile pages...

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); })();

}

In the above example we see that if the page is more than 900 pixels wide (clearly a desktop page) we load the javascript required for our Google plus badges / buttons to work, but if the page is smaller than 900 pixels wide, we are doing nothing.

This will result in...

  • For desktop pages - Google plus badges / buttons will appear
  • For mobile pages - Google plus badges / buttons will not appear

More clearly stated, we are using the same exact html. In that html we have a Google plus button call. When the page is loaded on a desktop the javascript for that Googleplus button is loaded, making that button work. When the page is loaded on a mobile device the javascript for the button is not loaded, and therefore does not show up on the page.

An example of always loading Analytics, but conditionally calling our Google plus button

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');

In the above example, we are making the conditional call for the Google plus javascript, but then outside of that we are adding our Analytics snippet. This means that no matter what size the viewport is the Analytics code will always be executed, but the Google plus code will only be conditionally loaded if the page is above 900 pixels.

One Javascript file, many outcomes

Using this function we can deliver the javascript we want to the device sizes we want.

This function works on all modern browsers, but does not work on IE 9 or below.






Patrick Sexton by