Speed optimisation of the Theme

hi There,
Basel contains a lot of scripts. By default, they are loaded on all pages (shop, blog), delaying DOM ready, full page load, and in some cases even the TTFB.
I would like to have your insights re. the options of defer / unload the following js that Basel is using:

1. I am not using countdown, 360 view, popups and parallax. Are you OK for me to desactivate those?
jquery.countdown.min.js
jquery.magnific-popup.min.js
jquery.parallax.min.js
jquery.parallax-scroll.min.js
threesixty.min.js

2. What is the specific purpose of the following in the theme?
moment.min.js
moment-timezone-with-data.min.js
packery-mode.pkgd.min.js
jquery.panr.min.js
device.min.js
fastclick.min.js
imagesloaded.pkgd.min.js
jquery.justifiedGallery.min.js
vc_font_awesome_5_shims

3. How can I know if I use these specific carousels?
owl.carousel.min.js
slick.min.js

4. Are you OK that I have to keep the following and that they are kind of “must have”:
photoswipe.min.js
photoswipe-ui-default.min.js
jquery.pjax.min.js
style.css
waypoints.min.js
bootstrap.min.css
vivus.min.js
jquery.autocomplete.min.js
functions.js

Those 2 js seem to be Deprecated? I have issues with the 2nd one. Do you confirm?
TweenMax.min.js
jquery.nanoscroller.min.js

My understanding is that this one is for users of deprecated IE. Correct?
html5.min.js

Waiting for your feedback
Kind regards

Hello,

1. Yes, you can disable these scripts if you are not using them. Note that they may cause JS errors in functions.js file so you will have to customize this file and remove their “calls”.

2.

moment.min.js
moment-timezone-with-data.min.js

– this part is for the countdown timer
packery-mode.pkgd.min.js – masonry grid option
jquery.panr.min.js – hover on banners
device.min.js – required library
fastclick.min.js – can be removed. Needed to compensate 300ms delay on click for mobile devices
imagesloaded.pkgd.min.js – required library
jquery.justifiedGallery.min.js – justify script for WordPress media library.
vc_font_awesome_5_shims – not related to our theme.

3. OWL Carousel is used on all carousels. The slick library is for vertical carousel of thumbnails on the single product page.

4. Yes, you need to keep them.

5. These libraries are required.

6. html5.min.js can be removed.

Kind Regards

Hi,

Clear, concise, 200% appreciated.

Re. risk on JS errors in functions.js … well, not being a Tech, I don’t understand, but thank you for the warning. I plan to use the plugin “cleanup assets” … Let’s see if it works.

Other question: by defaut, there is this hover effect in woocommerce shop and category view. It’s nice on desktop but on mobile (cc 60% of my visits), it doubles the number of images to load, without benefit for this device, and with a significant prejudice on speed. How could that be managed?

Kind regards

Hello,

The only way to manage this hover extra image is to disable it globally. You can’t load it on desktop and don’t load on mobile, unfortunately.

Kind Regards

Hello,
I am fine with stopping it totally, there is a cost and no benefit for me.
You wrote earlier that jquery.panr.min.js is hover on banners.
So, how to totally stop this hover on products in woocommerce?
Kind regards

It is not used for products but for banners. If you don’t use this hover then you can remove the library.

Hi,

Sorry, I was not clear apparently: how to desactivate the hover on products? Not talking about banner.

Kind regards

You can disable this function in Theme Settings -> Shop -> Hover image.

Hello,
Sorry, I missed it 🙁
Thank you 🙂
Kind regards

No problem! You are welcome 🙂

[Author]

Posts