Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Product Page Product Images Slow to Load #14667

Closed
chattertech opened this issue Apr 12, 2018 · 89 comments
Closed

Product Page Product Images Slow to Load #14667

chattertech opened this issue Apr 12, 2018 · 89 comments

Comments

@chattertech
Copy link

@chattertech chattertech commented Apr 12, 2018

Preconditions

  1. Running on a very fast Magento centric server (MageMojo)
  2. Magento 2.2.3, PHP 7.026, MYSQL 5.6.35-80.0

Steps to reproduce

  1. Clean setup of Magento 2.2.3 via composer
  2. Imported products and created new products
  3. Used both Magento Luma and Ultimo Themes
  4. Images are 500x500 or similar jpegs and properly compressed
  5. Same behaviour in all modes
  6. Same behaviour with Magento cache and Varnish cache

Expected result

  1. Product image should open very quickly with page (same exact page and images open instantly on same server on Magento V1.9.3)

Actual result

  1. All pages are opening very fast however,
  2. Product image/images take 2-4s to load with spinning loader icon before image shows

magento-2-slow-image-load-screenshot

@AirmanAJK
Copy link

@AirmanAJK AirmanAJK commented Apr 12, 2018

I've noticed this as well. I suspect it's because of Magento 2's heavy use of requireJS. All of the many "x-magento-init" and "data-mage-init" parts need to be executed, and the gallery.js code doesn't seem to be very quick anyway.

It would be nice if the primary image was shown instead of a spinner, since that could simply be an tag on the page.

@subbu-d
Copy link

@subbu-d subbu-d commented Apr 18, 2018

Yes, I have noticed the same issue as it took more time to load the product's primary image.

@utklasad
Copy link

@utklasad utklasad commented Apr 25, 2018

Same issue here even if the source file of the picture is just 400kb. I've not noticed this before so it might be an issue with the latest version of Magento 2.2?

I will try to debug the code to find out where the bottleneck is.

@Ylmzef
Copy link

@Ylmzef Ylmzef commented May 18, 2018

Same here!

@utklasad
Copy link

@utklasad utklasad commented May 18, 2018

The issue is definitely related to Chrome.

@seanspcm
Copy link

@seanspcm seanspcm commented May 23, 2018

did anyone find a solution to the product images loading slow on the product pages?

@dankoz51
Copy link

@dankoz51 dankoz51 commented Jun 11, 2018

I have been looking for a solution to this, let me know if anyone comes up with something otherwise its will be a few weeks before i get back to it

@harrigo
Copy link

@harrigo harrigo commented Jun 28, 2018

Has anyone noticed with this that if you flush the browser cache the problem goes away?

For me at least, flushing my cache in chrome leads to images loading in less than a second (rather than 4+ seconds) and am unsure how to get the problem to come back. It will however come back as it has the past few times.

@dankoz51
Copy link

@dankoz51 dankoz51 commented Jul 6, 2018

Ok so this issue is simply how the loader is designed, I have outlined why this is in the blog post. https://xumulus.com/kill-the-loader-how-to-improve-your-magento-2-product-page-load-time/

There is also a solution provided in a GitHub project

@uk28881785
Copy link

@uk28881785 uk28881785 commented Jul 6, 2018

Which Magento mode are you using? This could also have an effect....

@harrigo
Copy link

@harrigo harrigo commented Jul 6, 2018

Thanks Dankoz, I am halfway deciding to use Magic Zoom as after testing it seems a far bit better however that blog post looks interesting and may reconsider.

It's happening for me in production mostly with bundling and merging on however is not great in either mode. The problem seems to occur after a while of not flusing client cache tho and in dev i disable that most the time on browser so wouldn't notice it. When this goes slow on one occasion ive seen it take a few mins and eating all the ram until i flushed the cache. Think i have only seen this on chrome so far however.

@chattertech
Copy link
Author

@chattertech chattertech commented Jul 6, 2018

Thanks Dankoz!

I read your blog and it is an excellent explanation of this behaviour. Surprised that this issue has not been addressed by Magento themselves yet. ( I haven't tried V2.2.5 yet )

I will try the fast page load module you suggest.

@Johan-Trp
Copy link

@Johan-Trp Johan-Trp commented Jul 12, 2018

I can confirm this is also happening for us, M EE 2.2.4. Upon loading a product detail page, we see the fotorama spinning icon and for some people, it takes extremely long before the image is shown. According to the Chrome Network tab, banner/ajax/load/?sections hangs, I've seen myself for as much as 13 seconds, before the image displays. The header on the image says it's eventually fetched from browser cache with status 200. So that shouldn't be delayed at all.

As harrigo mentioned, as soon as you flush the browser cache, then reload the product detail page, you barely see the spinner, the image is there near instantly.

Dankoz51's solution may well make the first product image display faster, by removing the spinner, but I'm concerned this may not actually fix this degrading performance of the AJAX call. We might just not notice it as much anymore, but should still strive to find out why the performance of that AJAX call is negatively impacted by a filled up browser cache.

@snoroozi
Copy link

@snoroozi snoroozi commented Jul 13, 2018

@chattertech I updated to 2.2.5 and I don't see any improvement in the image loading as advertised. This shouldn't still be a lingering issue since 2016. Pretty fucking ridiculous to be honest.

@chattertech
Copy link
Author

@chattertech chattertech commented Jul 13, 2018

I tried Dankoz51's solution at https://github.com/xumulus/magento2-fast-product-images. It does indeed make the initial image load much faster. However the rest of the page is then delayed and stalls by the same amount that the image was spinning before.

Like Johan-Trp said there is a major issue delaying product page renders. There is no delay in category or CMS pages btw.

Also this is not just a Chrome issue as i see a delay in Safari and Firefox as well. They are a bit faster but still very noticeable.

@dankoz51
Copy link

@dankoz51 dankoz51 commented Jul 13, 2018

@snoroozi
Copy link

@snoroozi snoroozi commented Jul 22, 2018

Any new updates to this issue. I tried @dankos51 solution but didn't seem to do anything in my case.

@dankoz51
Copy link

@dankoz51 dankoz51 commented Jul 23, 2018

@harrigo
Copy link

@harrigo harrigo commented Jul 23, 2018

Dankoz's module is an improvement it atleast looks like the page loads fast so thanks a lot for that. I will also keep using it even if fotorama does speed up as would rather see the image than a loading spinning wheel. With mine however scrolling and java script becomes jumpy while fotorama is still loading. Don't think it will be possible to hide this unless we actually fix it.

@dankoz51 the Redis locking idea sounds interesting but why would this be affected by a client cache flush? Is this the 'disable_locking' => '1' part of the redis config for sessions in env.php? I will test this but need the problem to resurface on a computer for me first and i wont flush the cache this time.

@snoroozi
Copy link

@snoroozi snoroozi commented Jul 23, 2018

@dankoz51 Thanks, that was the issue. Appreciate the extension.

@ghost ghost self-assigned this Jul 30, 2018
@ghost
Copy link

@ghost ghost commented Jul 30, 2018

Hi @chattertech I'm tested but, the image load fastly, see attachments,
frame- 43d

@ghost ghost added the Progress: needs update label Jul 30, 2018
@harrigo
Copy link

@harrigo harrigo commented Jul 30, 2018

@engcom-backlog-nazar It doesn't always load slow and this is why this is going to be very difficult to debug. Once it does start loading slow it will load incredibly slow on that client PC until cache is flushed.

@siliconalchemy
Copy link

@siliconalchemy siliconalchemy commented Aug 6, 2018

@engcom-backlog-nazar It's heavily dependent on browser CPU speed - on slower/older computers/devices it's very, very bad - up to 45 seconds on an older desktop in my case. Try using Chrome Developer tools to throttle your CPU (Developer Tools -> Performance -> CPU -> Throttle -> 6x or slowest setting).

@siliconalchemy
Copy link

@siliconalchemy siliconalchemy commented Aug 6, 2018

This is the same issue that celebrated it's second birthday yesterday which was stupidly closed by @guz-anton and has thus languished ever since:
#6018
This is a terrible, terrible bug in Magento frontend, I'm sure a lot of people would really appreciate it if you took it seriously and looked into it. Thank you!

@snoroozi
Copy link

@snoroozi snoroozi commented Oct 18, 2018

@wontroba666
Copy link

@wontroba666 wontroba666 commented Oct 20, 2018

This is a critical bug. Please do not make us wait until 2.3

@Rickertje
Copy link

@Rickertje Rickertje commented Oct 29, 2018

Same here. Dev team please give us an update.

@DrewML
Copy link

@DrewML DrewML commented Nov 1, 2018

The 2.3.0 release branch is already closed off and going through regression, so this will not be addressed in 2.3.0 unfortunately, but is tentatively planned for 2.3.1 (cannot give a 100% guarantee, but that's the current plan). The issue will be addressed when we swap out Fotorama.

For the time being, several folks in this thread have mentioned https://github.com/xumulus/magento2-fast-product-images as a temporary solution to the problem. I personally can't comment on the efficacy of it, though.

@snoroozi
Copy link

@snoroozi snoroozi commented Nov 1, 2018

@CristiLodor
Copy link

@CristiLodor CristiLodor commented Nov 1, 2018

Because non of the solutions worked for me I installed https://www.magictoolbox.com/magiczoomplus/ (hope will not be interpreted as ad).
Now the product page image appears in about 1-2 seconds which is very much improvement.
Really can't understand why this was not fixed by now and isn't included in a strict plan.

Any way, thx for hard work @magento-team

@siliconalchemy
Copy link

@siliconalchemy siliconalchemy commented Nov 1, 2018

@DrewML Honestly, Magento/Adobe is doing your flagship product a long-lasting harm in not addressing this in a major release. Any sane development/management team should see this as a critical UX bug. The fact it is not being addressed in the first major release in over a year is embarrassing.

@harrigo
Copy link

@harrigo harrigo commented Nov 1, 2018

Although i'm not a massive fan of fotorama the problem is not fotorama for a lot of people here i believe. I completely ripped it out and still had massive problems with my pages when product data storage overloaded. See the issue and fix here: #17813 modify the 2 files as suggested and drop them in a theme. Your product pages will drop to 1-2 seconds and everything will be fine and it wasn't any Fotorama code modied. Do that with the Xumulus Fast Gallery Load and you will have instant product pics i've done it a few times and it works a charm.

@sskharate
Copy link

@sskharate sskharate commented Nov 30, 2018

Thanks @dankoz51 your solution have worked for me on 2.2.5 and image loading is much faster.
I had to merge your logic in theme overridden gallery.phtml.

@kombi77
Copy link

@kombi77 kombi77 commented Jan 5, 2019

DrewML I found your Huge "product_data_storage" in localStorage hangs the shop #17813 post Thanks for that information. I do have a question I hope you can assist with.

Being new to Magento 2.3.0 your post indicated to edit the ids-storage.js via path "Magento_Catalog/js/product/storage/ids-storage.js". When I search for ids-storage.js ( Two files come up) and open the files I do not find " if (!utils.compare(data, localStorage).equal) {" . Am I just way off base in where to find the file?

ids-storage.js files I did find.
/vendor/magento/module-catalog/view/frontend/web/js/product/storage/ids-storage.js
/pub/static/frontend/Magento/luma/en_US/Magento_Catalog/js/product/storage/ids-storage.js

2019-01-05 09_29_39

@DrewML
Copy link

@DrewML DrewML commented Jan 5, 2019

Hey @kombi77. This issue was actually fixed and included in 2.3.0. If you're still seeing performance problems on product pages, they should be unrelated.

@PiroozMB
Copy link

@PiroozMB PiroozMB commented Feb 15, 2019

Hi @DrewML
Can I apply the fix to magento 2.2.3 please? it's really frustratig on mobile phones and tablets.

@snoroozi
Copy link

@snoroozi snoroozi commented Feb 15, 2019

@vzabaznov
Copy link
Contributor

@vzabaznov vzabaznov commented Apr 9, 2019

Hi guys, @chattertech
I'm happy to announce that issue was fixed, many thanks to @Igloczek , we used his code as basic solution for our fix. Fix will be delivered into latest 2.3 release, most likely 2.3.2.
Right now we are rendering the first image on server side and then initialize the gallery. I'm sure this will resolve the main user experience problem on product detail page, more complex solution will come along with magento/architecture#33, it will include fotorama deprecation and change gallery initialization approach
Im closing this issue for now, if you still have problems with this case, don't hesitate to open a new one or reopen this

@hostep
Copy link
Contributor

@hostep hostep commented Apr 9, 2019

In case anyone's curious (as I was) about what the fix from Magento is. It looks like it was this PR: https://github.com/nickolasburr/magento2/pull/58 which got merged in this merge commit: 56e56ce

Thanks @vzabaznov!

@AndyJAllen
Copy link

@AndyJAllen AndyJAllen commented Jun 4, 2019

Magento 2.3.1 and we're still slow as ever with gallery.phtml....

@Igloczek
Copy link
Contributor

@Igloczek Igloczek commented Jun 4, 2019

@AndyJAllen It's in 2.3-develop branch, not released yet, please check mentioned commit.

@AndyJAllen
Copy link

@AndyJAllen AndyJAllen commented Jun 4, 2019

@AndyJAllen It's in 2.3-develop branch, not released yet, please check mentioned commit.

Yes I applied it in my installation and it seems to have helped.

@visitdigital
Copy link

@visitdigital visitdigital commented Jun 13, 2019

This fix cannot come quick enough, it is impacting Organic Search Engine performance and Conversion rates of any Magento 2 site that has this functionality. You can see it manifesting itself here, all backend metrics are incredibly quick but the front end load time is incredibly slow.
image

@suilillo
Copy link

@suilillo suilillo commented Jun 13, 2019

I'm using https://github.com/xumulus/magento2-fast-product-images (with some changes) as a workarond and the psychological perception is better.

@olgamukovoz
Copy link

@olgamukovoz olgamukovoz commented Aug 9, 2019

I'm using https://github.com/xumulus/magento2-fast-product-images (with some changes) as a workarond and the psychological perception is better.<
I use also but not all thumbnail images is showing as at once page was loaded
any thoughts?

@PiroozMB
Copy link

@PiroozMB PiroozMB commented Aug 9, 2019

You can make magento load an image of the product before all images load. In this way you people don't have to wait on the page to see at least one image of the product. This of course don't fix the slow loading of products images on the product pages. This is just as a workaround to show at least one image much faster until all images load. Take a look at this page to check what it looks like.
https://www.amanvida.eu/en/amanprana-coconut-oil-organic-extra-virgin
I did it with some js functions.

@olgamukovoz
Copy link

@olgamukovoz olgamukovoz commented Aug 9, 2019

You can make magento load an image of the product before all images load. In this way you people don't have to wait on the page to see at least one image of the product. This of course don't fix the slow loading of products images on the product pages. This is just as a workaround to show at least one image much faster until all images load. Take a look at this page to check what it looks like.
https://www.amanvida.eu/en/amanprana-coconut-oil-organic-extra-virgin
I did it with some js functions.

thanks a lot, now i am taking a look

@briancblog
Copy link

@briancblog briancblog commented Nov 15, 2019

But the images load faster in Firefox's private mode.

Anyone know how to disable the tracking to speed up the images loading?

@ashish-madankar-born
Copy link

@ashish-madankar-born ashish-madankar-born commented Jul 4, 2020

You can make magento load an image of the product before all images load. In this way you people don't have to wait on the page to see at least one image of the product. This of course don't fix the slow loading of products images on the product pages. This is just as a workaround to show at least one image much faster until all images load. Take a look at this page to check what it looks like.
https://www.amanvida.eu/en/amanprana-coconut-oil-organic-extra-virgin
I did it with some js functions.

This is not working now can you please check @PiroozMB

@vishalpatel19862
Copy link

@vishalpatel19862 vishalpatel19862 commented Dec 8, 2020

@DrewML having same issue with 2.3.1. any solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet