Why does my site display alt text before images load?

[DAGNORAK]

Hello all, if anyone can help me I’ll love you forever.

I have finally filled my homepage with images and product photos, I’ve made sure to compress them so the average image size is around 300kb. Which I think is very small any lower and image quality suffers. 

but now when I load my site for a split second it shows the alt text instead of the image. Which I can’t work out why as my site should still be lightning fast as the images I’ve added as so light, 

site: DAGNORAK.myshopify.com 

[oscprofessional]

Hello @DAGNORAK 

I have checked your site in the page insight tool. your website score is very low.

Below are some factors that might impact the speed of your online store, and how you can address them. 

-- Your images are not in proper size :- 

We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it's pretty complicated for non-technical people.

You need to work on the following points:

• Theme Upgrade if there is a scope and upgraded theme available
• Reduce JS Payload.
• Use Critical CSS.
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third-Party JavaScript & Shopify Apps
• Preload Web Fonts. 

By fixing these issues, your website speed score can definitely improve.

If anything needs to be included or clarified then feel free to ask.  We will surely help you. 

Thank you

Have a nice day!

[flareAI]

Hello @DAGNORAK,

This is Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

There could be several factors contributing to the brief display of alt text instead of the images on your Shopify store. Below listed are a few possibilities to consider.

1. Server or network latency
Even though your images are optimized and have a small file size, there may still be delays in loading them due to server or network issues. This could result in a momentary display of alt text while the images are being fetched.

2. JavaScript or CSS conflicts
It's possible that there might be conflicts with the JavaScript or CSS code on your website, which could lead to a delay in image loading or interfere with their display. Check your code for any errors or conflicts that could affect image loading.

3. Caching issues
If your website caching settings are not properly configured, it could impact the image loading speed. Make sure you have caching enabled and properly set up to optimize the delivery of static content, including images.

4. Third-party apps
Some apps or scripts installed on your Shopify store could be causing conflicts or delays in image loading. Disable any recently added apps one by one to identify if any of them are causing the issue.

To troubleshoot and resolve the issue, you can try the following steps.

- Clear your browser cache and cookies to ensure you're loading the latest version of your website.
- Test your website's performance using different browsers and devices to see if the issue persists across all platforms.
- Monitor the network activity and console logs in your browser's developer tools to identify any errors or issues related to image loading.

By investigating these possibilities and taking appropriate actions, you should be able to resolve the issue of alt text briefly displaying instead of the images on your Shopify store.

Gina

[Speedup_guru]

Hi @DAGNORAK ! You don't need to compress any images on Shopify. It's all a myth from people trying to slip their app in for those who don't understand the subject. Shopify has its own CDN, which generates the required image on the fly (ie automatically compressing and optimizing it). 

For your pictures and LCP to load quickly you need to do:

1.Use <link> preload for your LCP image
2. Add loading="eager” attribute for <img> tag
3. Remove scripts/styles that block rendering (some scripts you also need to preload, some you need to put at the bottom of the page, which will load with lazyloading)