Is there any way to speed up three js sites like mine with 3 models?

I am having a website for my academic project -See My Website- but it loads really slow. You can see the below image it has Total Blocking Time - 11,940 ms I tried compressing the models and the code but still the total file size is around 14MB.
Google-page-speed-insight-of-website

I also have a preloader to atleast show users something before they get to see the complete website. This is the code

#preloader {transition: 1s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: rgb(28, 28, 28);
        
        font-family: "Outfit", sans-serif;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }

    .logo {
        display: flex;
        align-items: center;
        font-size: 0.7em;
        gap:11px;
        font-weight: 600;
    }

    .logo .animated-a {
        display: inline-block;
        animation: swing 1.1s infinite;
        color: white;
    }

    @keyframes swing {
        50% {
            color:  #809bb9;
           transform: rotate(-85deg); opacity: 0;padding-right: 5px;
        }
    }

    .logo .static-man {
        color: white;
    }
    body {
    overflow: hidden; /* Prevent scrolling */
}

body.loaded {
    overflow: auto; /* Allow scrolling after preloader */
}
    /* Hide the preloader after loading */
    body.loaded #preloader {opacity: 0;pointer-events: none;  
       
    }</style>
<!-- Preloader HTML -->
<div id="preloader">
    <img src="https://blue-gerrilee-6.tiiny.site/Images/ancient-greek%20-%20Copy.jpg" style="
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.1;
    filter: blur(12px);
">
    <div class="logo" bis_skin_checked="1">
        <div class="animated-a" bis_skin_checked="1">¤</div>
        <div class="static-man" bis_skin_checked="1">¤</div>
    <div class="static-man" bis_skin_checked="1">¤</div></div>
</div>
<!-- Preloader JS -->
<script>
    window.addEventListener('load', function () {
        setTimeout(function () {
            document.body.classList.add('loaded');
        }, 500); // 1500 milliseconds = 1.5 seconds
    });
</script>

A lot of times when preloader ends but still models are not loaded and thus we get to see a blank space there. I got to know from internet that we could somehow zip models on the server and unzip on client side to load it faster. Is it possible?

I want to load the preloader only when complete page including all models loads completely. And is there any way i could have a percentage of how much page is loaded in the preloader?

I tried draco compression but still it takes a lot to load.

If you open these models in https://gltf.report/ and click around a bit, you'll find that two of the models are 7 MB each, and that most of that size is from the PNG textures. I'm not sure what compression you tried on the models before, but note that codecs like Draco will compress geometry — not textures.

There are a number of things you could do about the textures, including:

1. use lower texture resolution
2. pack texture channels, e.g. combing occlusion/metal/rough textures into one
3. compress the textures with a different format like JPEG or WebP

A quick option to compress textures with WebP would be:

gltf-transform optimize scene.glb scene_opt.glb --compress quantize --texture-compress webp

This should reduce the size of each model to 1–2 MB. See https://gltf-transform.dev/cli for installation steps.