Good morning, the page https://easyzanzibar.com/dove-alloggiare-a-zanzibar/ loads a large image even when opened on mobile. In your test, you show me that it should use a 218 Kb image in the desktop slide, while my optimized image is 141 kb. If it then always uses the large image on mobile, what kind of optimization is that?

The technical programmers who are trying to solve the problem of a very slow site and CPU that exceeds the limit have sent me reports stating: ‘Enfold is a heavy and outdated theme for a site like yours.’

If this is the case, I have to eliminate Enfold from all four of my websites and completely redo them.

Does it turn out that Enfold creates problems with slow loading and high CPU demand for sites like ours?

AI answers:
Regarding your question about Enfold:
Yes, it is a known issue that the Enfold theme can sometimes cause slow loading times and high CPU usage for some websites. This can be due to several factors:
Theme Features: Enfold is a feature-rich theme, and while this offers a lot of flexibility, it can also lead to more code and assets that need to be loaded, potentially slowing down the site. Some of these features, if not used, can still contribute to the load.
Image Handling: As you’ve noticed, how the theme handles images across different devices can impact performance. If the theme isn’t correctly serving optimized images for mobile, it can significantly slow down loading times on those devices.

I would like to understand from you if there is anything that can be done to avoid redoing everything

see here on very small screens: https://webers-web.info/datenschutz/
that sidebar menu on the left goes to a hamburger on top right on small screen width.

you see on the link above (https://jonsuh.com/hamburgers/) – and (on enfold main burger DOM ) what are the class names – i used them too – because then a predefined look is allready present.:
and the script to manage the burger is allready loaded

(page-id-3 – is my privacy page)

add_action('ava_after_main_menu', function() {
	if ( is_page(3)){
		echo '<nav class="datenschutz-menu" role="navigation">';
		echo '<div class="container av-menu-mobile-active">';
		echo '<a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="av-current-placeholder">Datenschutz</span>';
		echo '<span class="subnav-hamburger subnav-hamburger--spin-r"><span class="subnav-hamburger-box"><span class="subnav-hamburger-inner"></span></span></span>';
		echo '</a>';
		echo do_shortcode('[menu name="datenschutz"]');	
	 	echo '</div>';
		echo '</nav>';
	}
});

on that line: echo do_shortcode('[menu name="datenschutz"]'); you see the usage of that menu shortcode

now i got that extra subnav-hamburger (this name is set by me – it only reminds me that this is subnavigation on privacy page )
now i have to have the same behaviour on that second burger menu:

function subnav_hamburger_first(){
if(is_page(array( 3))){ 
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}}
add_action('wp_footer', 'subnav_hamburger_first');

This is not a trivial request, which is why there are several paid plugins available. To grasp the complexity of a multilevel burger menu, take a look at the avia-snippet-hamburger-menu.js code.