Search code examples
javascriptjqueryhtmlperformance

Improve website speed defer JS


i am having troubles with defer and async js files. My website is loading JQuery and Jquery-UI libraries and they are kind of big files even .min files When i am moving those libraries to the bottom of website or just defering - asyncing them, my website stops rendering most of elements, for example

  • Select2 plugin not working properly on mobile phones
  • Jquery range slider not dragging
  • Some other custom elements like infinite load are not working as well

So i am trying to improve my website speed, but those 2 libraries render blockers and with them i got only 53 rating on PageSpeed Insights.

So another way to make Website run faster is merging(combine) JS files, but after combine website stops rendering also, so i guess only some of them are able to be combined. Can someone help me resolve this problem ? below i will give a list of all JS that is used on my website

jquery-2.1.1.min.js
greensock.js
layerslider.transitions.js (actually trying to find some lightweight alternative)
layerslider.kreaturamedia.jquery.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
select2.min.js
jquery.tooltipster.min.js
bootstrap.min.js
placeholders.js
jquery.magnific-popup.min.js
owl.carousel.min.js
html5shiv.js

What i already did

  • Browser Caching - On
  • GZip on the fly - On

    1. So and the main question is how to move jquery to the bottom without losing functionality
    2. Which libraries i am able to merge, to reduce HTTP requests

Solution

  • In addition to what @Dr.Web said you can also combine them into one file and make sure that the plugin code is added at the bottom of jQuery