Invisible images SEO optimization

Solved
Highlighted
Tourist
10 2 0

So I was checking my SEO scores and I noticed that I have a lot of invisible images that are delaying the connection from the user to the website as you can see in the image:

Screenshot from 2019-11-10 20-26-39.png

But I can find these images in the code and I dont know how to remove them. My theme is Paralax and my webiste is www.eden-mix.com.

0 Likes
Highlighted
Shopify Partner
77 8 21

These so-called invisible images are actually pre-loaded because you have "quick shop" functionality turned on for your collection pages.


You should turn it off, because:
1. Quick Shop slows down your website (as you already know)

2. Confuses people that they are on the actual product page.

 

From users’ point of view, ‘Quick View’ adds an intermediary layer between the product listing and the product page. A step that may very well introduce unnecessary friction. 

Source: Baymard Institute advises you to Avoid Quick View overlays 

But these are just the tip of the iceberg! I wrote extensively on the negative impacts of Quick Shop on shopping here: The Impact of Quick Shop on Your Store

 

Hope this helps!

Saúde!

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/braiv
1 Like
Highlighted
Tourist
10 2 0

This is an accepted solution.

Hey I disabled that but I still have 3s of invisible images in the Google report. Basicly taking Quick Shops of tock out 3s of loading time

0 Likes
Highlighted
Shopify Partner
77 8 21

This is an accepted solution.

Hey, congrats! That's a huge improvement :)

 

Now, to reduce the impact of offscreen images you can:

1. Reduce the number of products shown on a collection page.

You don't need to list everything as most people look at just the first few "screenfuls of products"  to determine if they are on the right place or not. With your design that's about 18-24 products.

 

2. Turn on lazy-loading for your Parallax theme, if you haven't done that already.

If there are any options around speed, try them. I've used Turbo the most, so I don't know what the menus are like in Parallax.

 

What is your end goal?

Make the whole site blazing fast or just improve the image loading? 

If the latter, the above should be enough.

 

If you are looking to get your store faster you have more work to do though.

You'd better lazyload the CSS, generate critical css that you embed on every page and see if that JS you are loading really needs to load that early. For example that Yandex Metrika script could go to the bottom as it provides the biggest processing blocking at the moment.

 

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/braiv
1 Like
Highlighted
Tourist
10 2 0

How can I turn on Lazy-Loading?

0 Likes
Highlighted
Shopify Partner
77 8 21

My bad, lazy load is on. It is just not as aggressive as I like it to be. When I lazy-load images I use a library that doesn't load anything until the image is in the viewport.

 

In the case of parallax theme—you may want to reduce the initial dimensions of the loaded image by editing the 300x size to something else, or better yet, replace src property with

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAMAAAAGcixRAAAAt1BMVEViYWJjY2NmZmZnZ2dubm57e3uFg4SKiImMjIyOjIyQkJGRkpKWlJWdm5yenJyhn6CgoKCjoaGlpKSop6epp6iqqqqurK2ura6wsLCysLGzsbKzsrK0srO2tbW4t7e5t7i6ubq6uru7urq7u7u8vLy8vL3CwcLDwsLDwsPGxcbIx8fMzc3Ozs7R0dHT09PT1NTU09PY19fZ2tro6Ojr6+vr6+zw8PD29vb4+Pj7+/v7/Pz9/f3+/v7UgH5EAAAAUklEQVQI12OwsbIBAgsgZjC1MOLgFuUWFTRl0NFTZGJkZmBlMWYw01HR11MWlVA1Z5AVkpcR4hcTk9BhMNDU0FCUV9TQMmSQERSR4GVn4+HkAwCH8gjqzNof/wAAABJ0RVh0RVhJRjpPcmllbnRhdGlvbgAxhFjs7wAAAABJRU5ErkJggg=="

That's a 1px transparent png. So it won't show the "missing image icon". When the image comes in view (or before that, depending on the browser) an adequate sized image will be loaded.

 

Look for the image tag in the product loop snippet, which should be included in a collection-template section. I'm guessing here as I haven't touched Parallax to confirm these locations. If you have a local copy of the theme you can search for data-src and find all lazyload-enabled image tags. Then use your best judgement which to swap.

 

Hope this helps! If that's not enough—contact me on rumen@rumendimitrov.com and I could take a look.

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/braiv
0 Likes
Highlighted
Explorer
109 3 7

Hi You definitely need this app - SEO master. One of its features is

Automated Template
Don't want to manually edit SEO for every single pages? Simply set a preferred template for Image Alt Text, Title Tag or Meta Description and sync to the pages you want to make the changes which can save much of your time.

0 Likes
Highlighted

I can't help you remove those pictures, but I know that "SEO Image Optimizer" can compress all the pictures in your shop to achieve the purpose of increasing the speed of the website.I hope it helpful for you.

Help you understand SEO in an easy way - SEO Master (Shopify App)
https://apps.shopify.com/seo-master-1
0 Likes