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
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
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).