JQuery Sliders and JavaScript Deferment

I have for the past few months been working on jQuery sliders and Document Object Model (DOM) manipulation with JavaScript. A lot of this work has been related to SEO (Search Engine Optimisation), particularly page speed. As well as working with the main jQuery libraries I have been experimenting with two different sliders. One is the bxSlider the other is called Slick. Both sliders are fully responsive. An important consideration that is raised by the developers of Slick is to include the jQuery migrate plugin. This allows deprecated jQuery functions in older code to be restored.

JavaScript Deferment

The inclusion of links to JavaScript libraries in the head of any HTML document without a ‘defer’ tag is frowned upon by Google. Anybody who is familiar with their Page Speed Insights tool will be aware of notices to `remove render blocks`. CSS can be inline and deferment applied to external style sheets via JavaScript. However in order for deferment to work with JavaScript I have found it necessary to compile jQuery libraries and vanilla JavaScript in a single file. This file can be placed in the bottom of the HTML document and have its loading deferred.

A Single File?

There are three essential jQuery libraries/plugins. These are jQuery, jQuery Migrate and jQuery UI. The jQuery UI website allows you to compile your own download. You can include all the elements you require or just the ones you need for your project. So for example if you are compiling jQuery UI for working with sliders you might just want to include the effects part of the library. Anyway after obtaining the required scripts my advice would be to create a single file, such as `allinone.js`. Then copy and paste minified versions of these three libraries and plugins into that file. The order I use is jQuery, jQuery UI and then jQuery migrate.

Sliders and Vanilla JavaScript

If you are using a slider framework such as Slick or the bxSlider you can include their JavaScript dependencies in the same `allinone.js` file. Just make sure they are listed after the jQuery code. The final part to getting everything to run from a deferred script is the actual process of calling jQuery into action. There is a simple way of doing this. All you need to do is make sure the component you are calling has a unique identifier. This will allow you to use a small bit of vanilla JavaScript to check for its presence in the DOM. If it does exist you can call the slider and invoke other necessary jQuery actions. How to do this is detailed in the code snippet below. The snippet is designed to call the Slick slider. If you want to call the bxSlider the process is pretty much the same. All you need to make sure of is that you include this code in the `allinone.js` file after the content detailed in the previous paragraph. Obviously there are more details about slider specifics on the pages of the relevant sliders.

if(window.document.getElementById('homepage')){ 
//vanilla code check for element
(function($){  
$(".homeslider").on('init',function(slick){
console.log('working'); 
//log to the console to check script
$("#homepage").fadeIn(4000); 
//fade In slider if you are using an overlay
$('#loading_div').fadeOut(4000); 
//fade Out loading animation (if you are using one)
})
.slick({
  lazyLoad: 'ondemand', 
//lazyLoad reduces page loading time
  dots: false,
  infinite: true,
  speed: 2000,
  autoplay: true,
  arrows: false,
  adaptiveHeight:false
});})(jQuery);
}