有什么办法可以用3个模型来加速像我这样的3个js站点吗？

Question

我正在为我的学术项目建立一个网站 - 查看我的网站 - 但加载速度非常慢。你可以看到下面的图片 总阻塞时间 - 11,940 毫秒 我尝试压缩模型和代码，但总文件大小仍然约为 14MB。
Google 页面速度洞察网站

我还有一个预加载器，至少可以在用户看到完整的网站之前向他们展示一些内容。这是代码

#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>

很多时候，预加载器结束但模型仍未加载，因此我们会看到那里有一个空白区域。我从互联网上了解到，我们可以以某种方式在服务器上压缩模型并在客户端解压缩以更快地加载它。可以吗？

我只想在包含所有模型的完整页面完全加载时加载预加载器。有什么方法可以让我知道预加载器中加载的页面量的百分比吗？

我尝试了 draco 压缩，但仍然需要很多时间来加载。

Answer 1

如果您在 https://gltf.report/ 中打开这些模型并单击一下，您会发现其中两个模型各有 7 MB，并且大部分大小来自 PNG 纹理。我不确定您之前在模型上尝试过什么压缩，但请注意，像 Draco 这样的编解码器会压缩几何图形 - 而不是纹理。

您可以对纹理做很多事情，包括：

1. 使用较低的纹理分辨率
2. 打包纹理通道，例如将遮挡/金属/粗糙纹理合二为一
3. 使用不同的格式（如 JPEG 或 WebP）压缩纹理

使用 WebP 压缩纹理的快速选项是：

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

请参阅 https://gltf-transform.dev/cli 了解安装步骤。