How to defer inline Javascript?

The scripts with the defer attribute load in the order they are specified, but not before the document itself has been loaded. As defer has no effect on script tags unless they also have the src attribute, the first script that gets executed is your inline script. So at that time jQuery is not loaded yet.

You can solve this in at least two ways:

• Put your inline script in a .js file and reference it with a src attribute (in addition to the defer attribute which you already had there), or

• Let your inline script wait for the document and the deferred scripts to be loaded. The DOMContentLoaded event will fire when that has happened:

  <script>
      window.addEventListener('DOMContentLoaded', function() {
          (function($) {
              //do something with b-lazy plugin, lightbox plugin and then with flexslider
          })(jQuery);
      });
  </script>
  

NB: Notice that in the latter case $(document).ready(function() is not included any more, as that would wait for the same event (DOMContentLoaded). You could still include it like you had in your original code, but then jQuery would just execute the callback immediately, which makes no practical difference.