Invisible images SEO optimization

Solved
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

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!

 



Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? ? Let me solve it for you: rumen@rumendimitrov.com

Buy me a coffee? ☕ paypal.me/braiv

Want to increase revenue? $ First find where your store is leaking money rumendimitrov.com/bfcm/
1 Like

Success.

Tourist
10 2 0

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

Success.

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.

 

 



Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? ? Let me solve it for you: rumen@rumendimitrov.com

Buy me a coffee? ☕ paypal.me/braiv

Want to increase revenue? $ First find where your store is leaking money rumendimitrov.com/bfcm/
1 Like
Highlighted
Tourist
10 2 0

How can I turn on Lazy-Loading?

0 Likes

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.



Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? ? Let me solve it for you: rumen@rumendimitrov.com

Buy me a coffee? ☕ paypal.me/braiv

Want to increase revenue? $ First find where your store is leaking money rumendimitrov.com/bfcm/
0 Likes