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

Question

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.

the "load" event on the window will not wait for your models to be loaded. Use something like the LoadingManager to keep track of loading and remove the preloader — 2pha
– 2pha, Commented Oct 27, 2024 at 22:28

Don McCurdy · Accepted Answer · 2024-10-28 17:37:02Z

1

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:

use lower texture resolution
pack texture channels, e.g. combing occlusion/metal/rough textures into one
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.

answered Oct 28, 2024 at 17:37

Don McCurdy

12.2k4 gold badges46 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aman Yadav Over a year ago

Thanks. I would try compressing textures

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related