Kill the Loader – How to Improve Your Magento 2 Product Page Load Time
I knew from the moment I laid eyes on it I hated it. The spinny thing just sitting there making the page look oh so damn slow. Yuck!! Surely when the images are loaded in the cache and I see a page refresh it will go away, right? Nope. still there and still as clunky looking as ever. Oh my, how did it take me this long to try and kill it? This is why I had to fix the Magento 2 image loader speed. This is what it looks like in the Magento 2 Demo store.
Magento Fotorama Image loading Default via GIPHY Now there is a lot of motion on this page and most of it does not do much good. The most offending is the image loading, instead of loading the first image it loads a spinner. Not a great user experience if you ask me. Now let’s take a look at what it looks like if we replace the loading image with the first one in the list.
Magento Fotorama Image loading Optimized via GIPHY Much better! I still think we can improve this more by trying to remove almost all motion from the page, like the breadcrumb ajax load. But we can deal with that at another time. Now there are still a few issues with the Fotorama gallery. It flashes when the Fotorama js applies the logic that makes the gallery come to life. We will try and work on that later. See it live here.
The Core Problem
I went looking to see if there was any solution anyone else came up with and there were none that looked interesting. We found sites that have fixed it themselves. I also came across this in the Magento 2 GitHub issue repository. There seemed to be some misunderstanding in the thread of the core issue here. It’s basically built like this:
1. The HTML is built with a spinner gif as the primary image in the product image location in gallery.phtml.
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <div data-role="loader" class="loading-mask"> <div class="loader"> <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>" alt="<?= /* @escapeNotVerified */ __('Loading...') ?>"> </div> </div> </div>
2. The page is loaded by the browser and loads the spinner in the page in place of a product image.
4. Finally when all that is complete the spinner is removed and the real images are shown (maybe after 3-8 seconds)
With other scripts competing on the page, it could take a while after the page is loaded to fully complete. Worse yet is that even if the images are cached, it sill needs to process the page build and js before the spinner goes away since it is basically loaded as the core image in step 1.
Perception and Performance Are the Same Things
How can you kill your loader?
Here is how you can fix your Magento 2 image loader speed.
- If you’re a developer you can check out our git hub project. You surely will need to make some adjustments in your theme though.
- Email us [email protected] we are putting together a program where we can help merchants out by fixing their loader starting at about $500 US.
- Beg your theme developer to fix the issue by sending them a link to this post
- “But my developer said it was not possible to fix this?” Well, they were wrong. Let us know if you need help.
Join the Movement, Kill the Loader!
As I look around at other sites, themes and trends the practice of adding image loaders are all too prevalent. It’s bad UX! It seems someone came up with the concept as part of some widget and then everyone copied this bad construct. Over, and over and over again!!!! Additionally with AJAX here to stay many features of pages pop in after the initial load, so pages end up with a lot of motion. That may be OK for an app, but for consumer-facing websites, you want rock solid page load time with a solid stable viewport. I get very picky on motion, we need to eliminate as much as possible, don’t push things down, over across or up. Load the page in the viewport and it should stay as solid as possible. Motion is awkward at best but surely will kill the perception of speed as things move and change on the page, it looks incomplete (because it is) to the user. #killtheloader