为什么我的光滑 slider 需要很长时间才能加载？

Question

所以我有一个网站My Website ，在某些页面上它有一个光滑的 slider。 我从Contentful获取内容并使用 javascript 呈现它，如下所示。 昨天的负载并没有花太长时间，但为什么现在花了这么长时间？ 网站上的更多资源有什么影响吗？ 有没有办法加快加载时间？ javascript 渲染图应该有调整吗？

async function renderWidget () {
    await Promise.all(state.widget.map((item, id) => {
        let md = window.markdownit();
        // console.log(state.widget[id])
            if(state.widget[id]) {
                $("#main-widget").append(`${
                    state.widget[id] ?
                        state.widget[id].includes('slider:') ?
                            `<div class='content-container slider' data-nopadding="none" id="${state.widget[id].split(':')[1]}"></div>` :
                        state.widget[id].includes('slider-nopadding-top:') ?
                            `<div class='content-container slider' data-nopadding="top" id="${state.widget[id].split(':')[1]}"></div>` :
                        state.widget[id].includes('slider-nopadding-bt-only:') ?
                            `<div class='content-container slider' data-nopadding="bt" id="${state.widget[id].split(':')[1]}"></div>` :
                        state.widget[id].includes('slider-nopadding-bottom:') ?
                            `<div class='content-container slider' data-nopadding="bottom" id="${state.widget[id].split(':')[1]}"></div>` :
                        state.widget[id].includes('slider-nopadding-side:') ?
                            `<div class='content-container slider' data-nopadding="side" id="${state.widget[id].split(':')[1]}"></div>` :
                        state.widget[id].includes('slider-nopadding-all:') ?
                            `<div class='content-container slider' data-nopadding="all" id="${state.widget[id].split(':')[1]}"></div>` :
                        // state.widget[id].includes('collection') ?
                            // `<div data-colid="${3}" class='content-container collection' id="${state.widget[id].split(':')[1].replaceAll("/", "-")}"></div>`
                            // : ''
                        state.widget[id].includes('collection') ?
                            `<div data-colid="${state.widget[id].split(':')[1].replaceAll("/", "-")}" data-idx="${id}" class='content-container collection' id="${state.widget[id].split(':')[1].replaceAll("/", "-")}"></div>`
                            : ''
                    : ""
                }`);
            }
        }));
    $(".slider").each(async function() {
        const sliderId = $(this).attr('id');
        $(`#${sliderId}`).append(await getBanners(sliderId, $(this).data('nopadding'), $(this)));
    })
    $(".collection").each(function() {
        let that = this;
        $.ajax({
            url : `/collection/${$(that).attr('id')}?col-limitMode=true&idx=${$(that).data("idx")}`,
            type: 'GET',
            success: function(data){
                $(`#${$(that).attr("id")}`).html(data);
            }
        });
    })
}


async function getBanners(id, type="none", that) {
    const _banners = await client.getEntries({
    content_type: 'imageList',
    'sys.id[in]': id
    })


    const banners = _banners.items[0].fields.images.map(banner => ({banner: banner.fields.image.fields}))
    const result = banners.forEach((banner, id) => {
        if(banner.banner.title) {
            that.append(`<a href="${banner.banner.title}"><img
                        style="padding:${
                                    type == "all" ? '0px' :
                                    type == "top" ? "0px 0px 5px" :
                                    type == "bt" ? "0px 5px" :
                                    type == "bottom" ? '5px 0px 0px' :
                                    type == "side" ? "5px 0 5px" : '5px'};"
                        alt="${banner.banner.title}" src="https:${banner.banner.file.url}"  /></a>`);
        } else {
            that.append(`<div><img
                        style="padding:${
                                    type == "all" ? '0px' :
                                    type == "top" ? "0px 0px 5px" :
                                    type == "bt" ? "0px 5px" :
                                    type == "bottom" ? '5px 0px 0px' :
                                    type == "side" ? "5px 0 5px" : '5px'};"
                        alt="${banner.banner.title}" src="https:${banner.banner.file.url}"  /></div>`);
        }
    });
    return result;
}