Some problem in code one line

Some problem in code one line

learningdesign
Shopify Partner
205 1 24

How to fix this 

<div class="line-child" style="display: block; text-align: center; position: relative; translate: none;">

learningdesign_0-1725596899088.png

 

learningdesign_1-1725596937889.png

 

Replies 8 (8)

Sweans
Shopify Partner
429 88 125

Hi @learningdesign,

The <div class="line-child" style="display: block; text-align: center; position: relative; translate: none;">

could be contributing to the Largest Contentful Paint (LCP) issue if it contains large elements, such as images, text blocks, or other media that are taking time to render.

Here are possible reasons this specific div might cause LCP issues:

 

1. Heavy Content Inside the Div

Problem: If the <div> contains large images, videos, or complex graphics, it could take time to load.

Solution: Optimize images or videos within this div by reducing their size, compressing them, and using more efficient formats (e.g., WebP for images).

 

2. External Fonts or Slow Text Rendering

Problem: If custom fonts are used for the text inside this div, it might delay rendering, especially if the fonts are not cached or optimized.

Solution: Preload important fonts or use the font-display: swap property to show fallback fonts while the custom fonts load.

 

How to Diagnose LCP for This Div:

Use Chrome DevTools:

 

Right-click on the page, select Inspect, and go to the Performance tab.

Start a recording and reload the page.

Look at the "Largest Contentful Paint" event to see if this div is contributing to the delay.

 

Please like the solution to let me know.

If you need further assistance, feel free to reach out!

 

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

learningdesign
Shopify Partner
205 1 24

@Yuparkoti  where should i paste this code please

learningdesign
Shopify Partner
205 1 24

@Yuparkoti     i have pasted the code but still same error is comming

learningdesign_0-1725613173972.png

 

learningdesign
Shopify Partner
205 1 24

learningdesign_0-1725616471197.png

 

learningdesign_1-1725616507833.png

Please check i have added both codes still same error  i have added it in theme.liquid  or its wrong ?

 

learningdesign
Shopify Partner
205 1 24
learningdesign
Shopify Partner
205 1 24

but the error is in the hero slider video title

learningdesign
Shopify Partner
205 1 24

@Yuparkoti  Sir please help me to fix this problem

learningdesign
Shopify Partner
205 1 24

@Yuparkoti  its still the same this is my slideshow.js code please have a look

if(!customElements.get("slide-show")){class SlideShow extends HTMLElement{constructor(){super();const slideshow=this;let parent_section=slideshow.closest(".shopify-section"),dots=slideshow.dataset.dots==="true",slideshow_slides=Array.from(slideshow.querySelectorAll(".carousel__slide")),autoplay=slideshow.dataset.autoplay=="false"?!1:parseInt(slideshow.dataset.autoplay,10),align=slideshow.dataset.align=="center"?"center":"left",fade=slideshow.dataset.fade=="true",pageDots=slideshow.dataset.dots=="true",prev_button=slideshow.querySelector(".flickity-prev"),next_button=slideshow.querySelector(".flickity-next"),header=document.querySelector("theme-header"),custom_dots=slideshow.querySelector(".flickity-custom-dots"),custom_navigation=slideshow.querySelector(".flickity-custom-navigation"),autoplay_progress=slideshow.querySelector(".slideshow--autoplay-progress"),progress_bar=slideshow.parentNode.querySelector(".flickity-progress--bar"),animations=[],animations_enabled=document.body.classList.contains("animations-true")&&typeof gsap<"u",selectedIndex=0,tick=autoplay?window.setInterval(autoplay,10):!1,args={wrapAround:!0,cellAlign:align,pageDots,contain:!0,fade,autoPlay:autoplay,prevNextButtons:!1,cellSelector:".carousel__slide",on:{}};if(this.paused=!1,custom_dots&&(args.pageDots=!1),slideshow.classList.contains("image-with-text-slideshow--content")){let main_slideshow=slideshow.parentNode.querySelector(".image-with-text-slideshow--image");args.draggable=!1,args.asNavFor=main_slideshow}if(slideshow.classList.contains("image-with-text-slideshow--image")){let image_slideshow_slides=slideshow.querySelectorAll(".image-with-text-slideshow--image-media");image_slideshow_slides.length&&image_slideshow_slides[0].classList.contains("desktop-height-auto")&&(args.adaptiveHeight=!0)}(slideshow.classList.contains("image-with-text-slideshow--content")||slideshow.classList.contains("customer-reviews--content")||slideshow.classList.contains("customer-reviews--image"))&&(args.adaptiveHeight=!0),slideshow.classList.contains("customer-reviews--carousel")&&(args.wrapAround=!1,args.adaptiveHeight=!1,args.resize=!0,args.on.ready=function(){let flkty2=this;flkty2.resize(),document.fonts.ready.then(function(){flkty2.resize()})}),slideshow.classList.contains("collection-grid__carousel")&&(args.wrapAround=!1),slideshow.classList.contains("main-slideshow")&&(animations_enabled&&slideshow.prepareAnimations(slideshow,animations),args.on={staticClick:function(){this.unpausePlayer()},ready:function(){let flkty2=this;header.classList.contains("transparent--true")&&Array.from(document.querySelector("#main-content").querySelectorAll(":scope > .shopify-section")).indexOf(parent_section)==0&&slideshow.classList.contains("section-spacing--disable-top")&&slideshow.classList.add("slideshow--top"),animations_enabled&&slideshow.animateSlides(0,slideshow,animations),autoplay&&autoplay_progress&&slideshow.setupAutoplayProgress(slideshow),document.fonts.ready.then(function(){flkty2.resize()});let video_container=flkty2.cells[0].element.querySelector(".slideshow__slide-video-bg");video_container&&(video_container.querySelector("iframe")?video_container.querySelector("iframe").onload=function(){slideshow.videoPlay(video_container)}:video_container.querySelector("video")&&(video_container.querySelector("video").onloadstart=function(){slideshow.videoPlay(video_container)}))},change:function(index){let flkty2=this,previousIndex=fizzyUIUtils.modulo(flkty2.selectedIndex-1,flkty2.slides.length);animations_enabled&&(slideshow.animateReverse(previousIndex,slideshow,animations),slideshow.animateSlides(index,slideshow,animations));let color_text=getComputedStyle(this.selectedElement).getPropertyValue("--color-text");autoplay_progress&&autoplay_progress.style.setProperty("--color-body",color_text);let dots2=slideshow.querySelector(".flickity-page-dots");dots2&&dots2.style.setProperty("--color-body",color_text),custom_navigation&&(custom_navigation.querySelector(".flickity-custom-navigation--current").innerHTML=this.selectedIndex+1),autoplay&&flkty2.player.state!=="paused"&&(flkty2.stopPlayer(),flkty2.playPlayer()),autoplay&&autoplay_progress&&(slideshow.autoPlayProgressTL.progress(0),flkty2.player.state!=="paused"&&slideshow.autoPlayProgressTL.play());let video_container_prev=flkty2.cells[previousIndex].element.querySelector(".slideshow__slide-video-bg");video_container_prev&&slideshow.videoPause(video_container_prev);let video_container=flkty2.cells[index].element.querySelector(".slideshow__slide-video-bg");video_container&&(video_container.querySelector("iframe")?video_container.querySelector("iframe").classList.contains("lazyload")?(video_container.querySelector("iframe").addEventListener("lazybeforeunveil",slideshow.videoPlay(video_container)),lazySizes.loader.checkElems()):slideshow.videoPlay(video_container):video_container.querySelector("video")&&slideshow.videoPlay(video_container))}},(slideshow.classList.contains("desktop-height-image")||slideshow.classList.contains("mobile-height-image"))&&(args.adaptiveHeight=!0)),slideshow.classList.contains("media-with-tabs--media")&&(args.draggable=!1,args.on={staticClick:function(){this.unpausePlayer()},ready:function(){let video_container=this.cells[0].element.querySelector(".media-with-tabs--media--video");video_container&&(video_container.querySelector("video").onloadstart=function(){slideshow.videoPlay(video_container)})},change:function(index){let flkty2=this,previousIndex=fizzyUIUtils.modulo(flkty2.selectedIndex-1,flkty2.slides.length),video_container_prev=flkty2.cells[previousIndex].element.querySelector(".media-with-tabs--media--video");video_container_prev&&slideshow.videoPause(video_container_prev);let video_container=flkty2.cells[index].element.querySelector(".media-with-tabs--media--video");video_container&&slideshow.videoPlay(video_container)}}),slideshow.classList.contains("announcement-bar--use-colors-true")&&(args.on.change=function(index){const container=slideshow.closest(".announcement-bar");let color_text=this.selectedElement.dataset.color,color_bg=this.selectedElement.dataset.bg;container.style.setProperty("--color-announcement-bar-bg",color_bg),container.style.setProperty("--color-announcement-bar-text",color_text)}),slideshow.classList.contains("products")&&(args.wrapAround=!1,args.on.ready=function(){var flickity=this;next_button&&window.addEventListener("resize.center_arrows",function(){slideshow.centerArrows(flickity,slideshow,prev_button,next_button)}),window.dispatchEvent(new Event("resize.center_arrows"))}),progress_bar&&(args.wrapAround=!1,args.on.scroll=function(progress){progress=Math.max(0,Math.min(1,progress)),progress_bar.style.width=progress*100+"%"}),custom_dots&&(args.on={ready:function(){let flkty2=this,dots2=custom_dots.querySelectorAll("li");dots2.forEach((dot,i)=>{dot.addEventListener("click",e=>{flkty2.select(i)})}),dots2[this.selectedIndex].classList.add("is-selected")},change:function(index){let dots2=custom_dots.querySelectorAll("li");dots2.forEach((dot,i)=>{dot.classList.remove("is-selected")}),dots2[this.selectedIndex].classList.add("is-selected")}}),slideshow.classList.contains("customer-reviews--carousel")&&(args.on.ready=function(){var flickity=this;next_button&&window.addEventListener("resize.center_arrows",function(){slideshow.centerArrows(flickity,slideshow,prev_button,next_button)}),window.dispatchEvent(new Event("resize.center_arrows"))});const flkty=new Flickity(slideshow,args);selectedIndex=flkty.selectedIndex,slideshow.dataset.initiated=!0,prev_button&&(prev_button.addEventListener("click",event=>{flkty.previous()}),prev_button.addEventListener("keyup",event=>{flkty.previous()}),next_button.addEventListener("click",event=>{flkty.next()}),next_button.addEventListener("keyup",event=>{flkty.next()})),Shopify.designMode&&slideshow.addEventListener("shopify:block:select",event=>{let index=slideshow_slides.indexOf(event.target);flkty.select(index)})}setupAutoplayProgress(slideshow){slideshow.autoPlayProgressTL=gsap.timeline({inherit:!1}),slideshow.autoPlayProgressTL.fromTo(slideshow.querySelector(".thb-slideshow-progress--svg circle"),{drawSVG:0},{duration:parseInt(slideshow.dataset.autoplay,10)/1e3,ease:"none",drawSVG:!0}),slideshow.addEventListener("mouseenter",function(){slideshow.autoPlayProgressTL.pause().progress(0)}),slideshow.addEventListener("mouseleave",function(){slideshow.autoPlayProgressTL.play()})}videoPause(video_container){setTimeout(()=>{video_container.querySelector("video").pause()},10)}videoPlay(video_container){setTimeout(()=>{video_container.querySelector("video").play()},10)}prepareAnimations(slideshow,animations){if(!slideshow.dataset.animationsReady){let splittext=new SplitText(slideshow.querySelectorAll(".slideshow__slide-heading, p:not(.subheading)"),{type:"lines",linesClass:"line-child"}),mask=new SplitText(slideshow.querySelectorAll(".slideshow__slide-heading, p:not(.subheading)"),{type:"lines",linesClass:"line-parent"});slideshow.querySelectorAll(".slideshow__slide").forEach((item,i)=>{let tl=gsap.timeline({paused:!0}),button_offset=0;if(animations[i]=tl,slideshow.dataset.transition=="zoom"&&tl.to(item.querySelectorAll(".slideshow__slide-bg, .slideshow__slide-video-bg"),{duration:1.5,scale:1},"start"),item.querySelector(".inline-badge")&&(tl.fromTo(item.querySelector(".inline-badge"),{opacity:0},{duration:.5,opacity:1},0),button_offset+=.2),item.querySelector(".subheading")&&(tl.fromTo(item.querySelector(".subheading"),{opacity:0},{duration:.5,opacity:1},0),button_offset+=.5),item.querySelector("h1")){let h1_duration=1+(item.querySelectorAll(".slideshow__slide-heading .line-child").length-1)*.1;tl.set(item.querySelectorAll(".slideshow__slide-heading"),{opacity:1},0).from(item.querySelectorAll(".slideshow__slide-heading .line-child"),{duration:h1_duration,yPercent:120,stagger:.1,rotation:"3deg"},0),button_offset+=h1_duration}if(item.querySelector("p.split-text")){let p_duration=1+(item.querySelectorAll("p.split-text .line-child").length-1)*.05;tl.set(item.querySelectorAll("p.split-text"),{opacity:1},0).from(item.querySelectorAll("p:not(.subheading) .line-child"),{duration:p_duration,yPercent:"120",stagger:.1,rotation:"3deg"},0),button_offset+=p_duration}item.querySelectorAll(".button, .text-button")&&tl.fromTo(item.querySelectorAll(".button, .text-button"),{y:"100%"},{duration:.5,y:"0%",stagger:.1},button_offset*.2),item.dataset.timeline=tl}),slideshow.dataset.animationsReady=!0}}animateSlides(i,slideshow,animations){let flkty=Flickity.data(slideshow),active_slide=flkty.selectedElement;document.fonts.ready.then(function(){animations[i].restart()})}animateReverse(i,slideshow,animations){animations[i].reverse()}centerArrows(flickity,slideshow,prev_button,next_button){let first_cell=flickity.cells[0],max_height=0,image_height=0;if(first_cell.element.querySelector(".product-featured-image")?image_height=first_cell.element.querySelector(".product-featured-image").clientHeight:first_cell.element.querySelector(".gallery--item")&&(image_height=flickity.cells[1].element.querySelector(".product-featured-image").clientHeight),slideshow.classList.contains("customer-reviews--carousel")&&first_cell.element.querySelector(".customer-reviews--product")&&(image_height=flickity.cells[1].element.querySelector(".customer-reviews--product").clientHeight),image_height>0&&(flickity.cells.forEach((item,i)=>{item.size.height>max_height&&(max_height=item.size.height)}),max_height>image_height)){let difference=(max_height-image_height)/-2;prev_button.style.transform="translateY("+difference+"px)",next_button.style.transform="translateY("+difference+"px)"}}}customElements.define("slide-show",SlideShow)}
//# sourceMappingURL=/s/files/1/0595/9103/3010/t/17/assets/slideshow.js.map?v=1721336717