The Text in Slideshow on my Shopify store loads very late

[Abhinav_Mohan]

In my shopify store, the slideshow image loads fine, but the text in the slideshow (which has a fadein animation) loads very slowly. So the slideshow image is displayed for 3-4 secs on first load without the text.

I see that the rating on pagespeed insights is generally in 70-90 range for this page. But unable to find out why there is the delay in text loading.

Any help is appreciated.

[shahrozbabar5]

Thanks for your question — this is a common issue related to how animations and render-blocking scripts load on first visit.

Likely Causes:1. Text is set to fade in using CSS animations, which are triggered after the image fully loads, causing a delay.

1. Render-blocking JavaScript or fonts (like Google Fonts) may delay when the text appears.

2. Lazy loading or LCP optimizations may prioritize the image over the text.

Suggestions:- Check animation delay in your theme CSS (e.g., animation-delay or transition-delay settings).

• Try removing or reducing the fade-in duration temporarily to test if that’s causing the lag.

• Use PageSpeed Insights > Diagnostics > “Avoid large layout shifts” to see if layout/animation timings are flagged.

• Use font-display: swap for any custom fonts to speed up text rendering.

Please share:

• Your store URL

• The theme name and version you’re using

That way, I can inspect and give you a more specific fix.

If it resolves your issue, please mark my answer as a solution, are you comfortable to do it at your own or need detailed guide? or if you want to hire an expert to do it for you, I’m here Please DM.

[Website_Speedy]

Hey @Abhinav_Mohan , Thanks for sharing the issue with the slideshow text loading. It’s definitely frustrating when your images load quickly, but the text with animations is delayed, especially when it’s critical for the first impression of your page.

Based on what you’ve described, here are some specific steps that can help fix the delay:

1. Preload Important Resources

If the animation script or the CSS related to the slideshow text is critical, preload these resources to ensure they are ready by the time the image loads.

2. Optimize CSS for Text Fade-In

• Ensure that the fade-in effect is handled efficiently using CSS transitions instead of JavaScript, which can be slower to load.Here’s an example of how to implement a CSS-based fade-in effect for your slideshow text:

.slideshow-text {

opacity: 0;

transition: opacity 1s ease-in-out;

}

.slideshow-text.visible {

opacity: 1;

}

• Then, use JavaScript to add the class visible after the page has loaded:

document.addEventListener(“DOMContentLoaded”, function() {

var text = document.querySelector(‘.slideshow-text’);

text.classList.add(‘visible’);

});

3. Defer Non-Critical JavaScript (Animation Scripts)
If you’re using JavaScript for the animation, ensure it doesn’t block rendering:

• Add the defer attribute to the JavaScript file that controls the fade-in animation:

Alternatively, If you want to explore automatic optimizations, you can try Website Speedy, which can automatically optimize lazy loading , defer javascript and improve your overall performance.

(Disclaimer : We are the developers of this app)

[Abhinav_Mohan]

Hi, the store link is - https://aurbo.in
Would really appreciate if you can take a look and share how to solve this. Also, for the above probable solutions, is there any app that i can use to get those done, or is custom coding required.
I have tried my best to optimize image sizes to reduce load times (though my mobile pagespeed insights score keeps fluctuating between 67-95)

[SEOAnt-Jeffery]

Hi @Abhinav_Mohan

I have taken a look at your website and what you mentioned about text content in a slideshow on the homepage. It seems like it is related to the order of loading on the backend, and the text content loads slowly or at a lower level compared with slideshow images.

Concerning this situation, it is better to check it under the Customize page status and see if it is from the admin directly or other third-party APPs. If it is from the admin, try to adjust the settings of this block and make text and images display together, or contact the theme developers for further check. If it is from other external apps, you can contact their support team for further assistance and report this situation, as it will affect the page performance and make elements not load correctly.

Meanwhile, I noticed another unusual situation when checking your store elements. You seem to set the store logo as H1 on the homepage, and to be honest, it is not good for store SEO under this situation, as Google prefers real text content as H1 rather than a logo or image. Better optimize this part as well from the admin page. If you feel uncertain whether the store page contents meet the demand of SEO properly, you can also click here to do a thorough SEO check, and with this examination report, it will be more helpful for you to know better the situation of your store, I believe. Thank you!