I'm simplifying my challenge with the following jsfiddle.net

I'm adding 3000 icons of a hamster in random places and once the process is completed it is very difficult to zoom in/out.

Question, how should I approach this problem (addImages) if I cannot cluster the icons into groups. Is there a better way (I tried using svg instead of png, same problem)

class Simulation
{
    constructor()
    {
          // center of the map
    var center = [1.8650,  51.2094];

    // Create the map
    var map = L.map('map').setView(center, 2);

    // Set up the OSM layer
    L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
      }).addTo(map);

    
    this.imagesLayer = new L.layerGroup(); 
    this.imagesLayer.addTo(map);
}

addImages()
{
        console.log('ok, add')
    
            for (var i=0; i<3000; i++)
    { 
       var flagIcon = L.icon({
            iconUrl: 'https://cdn-icons-png.flaticon.com/512/196/196817.png',
            iconSize:     [15, 15], // size of the icon
            shadowSize:   [18, 18], // size of the shadow
            iconAnchor:   [18, 18], // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-1, -1] // point from which the popup should open relative to the iconAnchor
        });
             
    
    var randLat = Math.floor(Math.random() * 90);
    randLat *=  Math.round(Math.random()) ? 1 : -1;
    
    var randLon = Math.floor(Math.random() * 180);
    randLon *=  Math.round(Math.random()) ? 1 : -1;
             
    var flag = L.marker([randLat,randLon], {icon: flagIcon})
    this.imagesLayer.addLayer(flag)   
    
    }                        
}

removeImaegs()
{
        console.log('ok removed')
    this.imagesLayer.clearLayers();
}   
}

var simulation = new Simulation();