skip to Main Content

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;
    }
.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 tried to set up widht and height options but still the same.

2

Answers


  1. Compress the image to smaller size, Use tools like Tinypng. you can upload the image in tinypng website & make it smaller in size withough losing the image quality

    Login or Signup to reply.
  2. Remember to convert your photos/images to JPEG/JPG format with medium compression.
    Crop each of your images to obtain images suitable for all uses (responsive images).

    • This will reduce the weight of your photos/images,
    • You’ll also reduce the loading time of your pages thanks to appropriate photos/images,
    • Then use the responsive properties to adapt your photos/images as you wish in your page.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search