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:
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.
Solved! Go to the solution
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.
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!
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.
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
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 email@example.com and I could take a look.
|2 hours ago|
|2 hours ago|
|3 hours ago|
|4 hours ago|