All things Shopify and commerce
How to fix this
<div class="line-child" style="display: block; text-align: center; position: relative; translate: none;">
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
Please check i have added both codes still same error i have added it in theme.liquid or its wrong ?
but the error is in the hero slider video title
@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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025