One of the largest assets loaded from Elementor plugin is Swiper located in /wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js (this is the minified version which should load in a live environment) which uncompressed (if the server where the website is located doesn’t serve files GZIP compressed) has a size of ~135 KB which is quite a lot for just one file. Sometimes, it’s not needed, depending on the setup of the Elementor page.

The “swiper” handle is connected to the “elementor-frontend” handle via dependency and to make sure that only the Swiper will be deactivated, one needs to tick ‘Ignore dependency rule and keep the “children” loaded‘ as it’s done in the print screen below.

Why are dependency rules added in various plugins/themes?

The reason these handles have dependencies is that in most cases, you need one file to be loaded first, before loading another one that triggers code which was defined in the first file. One of the best examples is jQuery Migrate which is loaded after jQuery. For maximum compatibility, WordPress core developers have made the files connected one to another through dependency. After all, it’s a small price to pay in extra loading to make sure nothing is broken. The file /wp-includes/js/jquery/jquery-migrate.min.js has only 10KB.

However, there are many situations nowadays where jQuery Migrate is not needed anymore and, in this situation, if you’re sure your users will not use “swiper”, then you should be able to unload it without affecting other files at all. After all, /wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js has ~135KB & added up with other unloaded files, it would make a difference in total page size and load time.

How do I know if Swiper is not used at all in the page where I want to unload it?

If you have content such as “Testimonials” with slides that can be swiped to view the next testimonial or an image gallery where an image shows for a few seconds and then the next one shows up or a list of logos (e.g. ‘Our partners’) that won’t fit in a page, thus you have to click on arrows and bullets to move to the next ones and so on. If you do not have anything like that it’s very likely you do not need Swiper. To be extra sure, you can “Inspect” and “View Page Source” (or better use the browser’s console and loo through the DOM elements there if you’re comfortable with that) and look for the following text which should be embedded in a DIV class: “swiper-container” or “elementor-main-swiper“. If they are not on the page, it’s an extra confirmation that you do not need Swiper. In most cases, one is aware if the JS library is needed as they know their website and the elements that were added to that particular page via Elementor.

To make it even easier for you and view this JS library in action, please check the following examples from the Elementor library, with situations when Swiper is needed and when it’s not needed.

Examples of Elementor pages where Swiper JS library IS NEEDED:

Examples of Elementor pages where Swiper JS library IS NOT NEEDED:

If you’re a developer who wants to find out about more about Swiper “Most Modern Mobile Touch Slider” or just curious about it & the way it works, you can check it out here: https://swiperjs.com/

Was this post helpful?