Responsive Design - How not to load certain scripts?

Question

Have finally got a responsive site working (of a fashion). What I want to do now is reduce what scripts are loaded on the mobile devices, so that they load faster. The scripts are redundant on the mobiles so it seems a good place to start.

Is there a way of only loading certain scripts depending on the device?

The site is a 3rd party e-commerce site, which doesn't allow different versions of the page for different devices. The server-side language is progress' e-script (of which I know nothing).

Any help would be much appreciated!!

Aside from conditional loading, you could minify your JavaScript files. I hear [Chirpy](http://chirpy.codeplex.com/) is good. — jhsowter, Feb 06 '12 at 22:54
Or Google's closure compiler: http://closure-compiler.appspot.com/home — Jeffrey Sweeney, Feb 06 '12 at 23:52
@jhsowter - The javascript files are already minified, but thanks for pointing me to Chirpy - definitely going to look at this for the asp.net intranet site that we have. — CYMR0, Feb 07 '12 at 12:58

score 1 · Answer 1 · answered Feb 06 '12 at 22:51

1

You could always try linking to the other JavaScripts using JavaScript, and include checks for which browser the user is using.

This page has some information about Dynamic Script Loading, which is what I believe you are looking for: http://unixpapa.com/js/dyna.html

answered Feb 06 '12 at 22:51

dpk2442

701
3
8

Thanks for the suggestion. Modernizr looks like it will do the job as well as allowing me to implement some more HTML5, so it seems the logical choice. – CYMR0 Feb 07 '12 at 12:53

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

How big are these script files? You shouldn't need to worry about anything less than half a megabyte on mobile devices (as long as they're loaded at the bottom of the page).

Otherwise, a server-sided solution will probably work best:

How do I determine whether it's a mobile device with PHP?

edited May 23 '17 at 11:48

Community

1
1

answered Feb 06 '12 at 22:54

Jeffrey Sweeney

5,986
5
24
32

I don't think they're that large, but they're large enough to slow down the mobile experience when not on wifi / 3g. We have third party scripts for live chat and some other things. Server-side would be ideal, but can't use PHP - working on it. – CYMR0 Feb 07 '12 at 12:46

score 1 · Accepted Answer · answered Feb 06 '12 at 23:07

1

Modernizr does feature detection and can conditionally load resources. It's more or less standard for this kind of thing unless you roll out your own.

answered Feb 06 '12 at 23:07

ggozad

13,105
3
40
49

Thanks! Looks like Modernizr is ideal. – CYMR0 Feb 07 '12 at 12:43

bradbarbin · Answer 4 · 2014-01-23T21:07:52.893

Suppose you have a three column desktop layout like this:

<body>
  <div id="ad-1">
  //javascript1 goes here
  </div>
  <div id="content">
  //content goes here
  </div>
  <div id="ad-2">
  //javscript2 goes here
  </div>
</body>

And suppose that you've created a responsive site such that:

@media screen and (max-width: 1024px) {
  #ad-1{ display: none; }
}
@media screen and (max-width: 768px) {
  #ad-2{ display: none; }
}

You don't want to load the scripts if they aren't visible, so here's a way to solve that:

var ResponsiveScriptsLoader = {

onAdsReady: function() {
  console.log('success');
},

addScripts: function(scripts, callback) {
  for (var i = 0; i < scripts.ads.length; i++) {
    this.include(scripts.ads[i].src, scripts.ads[i].selectorID);
    if(i==scripts.ads.length-1) callback();
  }
},

include: function(what, where) {
    var deferred = new $.Deferred(), place;
    var e = document.createElement('script');
    e.onload = function () { deferred.resolve(); };
    e.src = what;
    place = document.getElementById(where);
    if(place) {
        place.appendChild(e);
    }
    return deferred.promise();
},

init: function(){
if(screen.width > 768){ 
    if(screen.width > 1024){
        this.addScripts({
        ads: [
        {
            src: "http://ads.script1.js",
            selectorID: "ad-1"
        }, 
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
    } else{ // Screen size is between 769 and 1023
        this.addScripts({
        ads: [
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
      }
    }
}
}   

ResponsiveScriptsLoader.init();

Responsive Design - How not to load certain scripts?

4 Answers4