速度网站的背景图片问题

问：

您好，我正在尝试解决网站速度优化的问题，但我在这一点上是新手。

我在使用以下方法加载背景图像时遇到了问题：这是在视口中绘制的最大内容元素。

它向我展示了问题就在这里：所以我找到了该代码并检查了它<div class="image-layer" style="background-image: url

public static function getHomeBannerSliderHtml(){
        $objData= HomeBannerModel::where(['status'=>'enable','location'=>'homePageBanner'])->orderBy('order','ASC')->get();
        $htmlContent="";
        foreach($objData as $val){
            if($val->start_date >= date('Y-m-d') && $val->end_date <= date('Y-m-d')){
                HomeBannerModel::where('id', $val->id)->update(['status' => 'disable']);
                continue;
            }
            $htmlContent .= '<div class="slide-item">
            <div class="image-layer" style="background-image: url('.url('storage/app/home-banners/' . $val->banner_image).');"></div>
            <div class="auto-container">
               <div class="content-box">
                  <h1>'.$val->banner_title.'
                  </h1>
               </div>
            </div>
         </div>';
        }
        return $htmlContent;
    }

.banner-section .banner-carousel .slide-item .image-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 6000ms linear;
    -moz-transition: all 6000ms linear;
    -ms-transition: all 6000ms linear;
    -o-transition: all 6000ms linear;
    transition: all 6000ms linear
}

.banner-section .banner-carousel .active .slide-item .image-layer {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15)
}

.banner-section-two .slide-item .image-layer {
    position: absolute;
    left: 0;
    top: 112px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 6000ms linear;
    -moz-transition: all 6000ms linear;
    -ms-transition: all 6000ms linear;
    -o-transition: all 6000ms linear;
    transition: all 6000ms linear
}

.banner-section-two .slide-item .image-layer {
    top: 0px !important;
}

有人可以帮我如何改进它以快速加载吗？

我尝试设置 widht 和 height 选项，但仍然相同。