Help regarding issues of optimization speed

[luckydead]

Hello i'm trying to solve issues with website speed optimizations but i'm newbie to that point.
I have issue with background image loading largest contentful element using : This is the largest contentful element painted within the viewport

it shows me the problems is here: <div class="image-layer" style="background-image: url
so i found out that code and check it out

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;
    }

and here is my css code:

.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;
}

Can someone help me how to improve it to load fast?
I have read instead div to use img but i fail the background image become like 100x100 size