All of our Shopify optimization services help to improve your page load time… but sometimes we uncover a bottleneck and score a huge win.
This is a highlight of a big win we scored for a customer to cut their load speed in half.
- Service ordered: Entrepreneur Package
- Page template tested: Product Page
- Testing tool: WebPageTest.org
|Page load speed
How We Did It
This customer ordered our Entrepreneur Package, which allows our devs more time to dive into the resources and analyze/optimize the full site.
Here are the steps the developer on the project (Paul) took to locate and solve this issue:
- Observed requests and resources loading in Chrome Dev Tools
- Investigated individual elements
- Observed increased number of assets after document was fully loaded
- Tested other pages for similar behavior
- Traced root cause back to related products carousel on product pages
- Commented out the code block and re-tested with changes
- Consulted with client and removed the image carousel completely
The main culprit here was a leaky related products carousel.
A normal related products widget, loading 10 products, might add 10 – 15 resources. This is acceptable given the functionality it provides. In this case it was loading almost 500 haha whaaaaaaat 😮
This customer decided to remove it completely, but you can also just use a better plugin/app, or better yet hard code in a related products widget for the fastest speed.
Tested using webpagetest.org with mobile LTE 12Mbs connection speed.
A Look Into Paul’s thought process
I decided to idle on the page and that’s when I noticed a massive number of images were loading (actually 946 of 965 requests after this step).
When I looked at the individual image elements, I saw they were coming from the related products carousel. I also noticed that, while only the first product image would appear on the page as a thumbnail, the carousel loaded every other image for that product on the page (including “color” variations – in this case different wood stain texture files).
Bam. After commenting it out, the number of requests dropped down and all the extra images and scripts disappeared.
The client agreed that it was too heavy for an otherwise slim site so it was removed.
A Note About Related Products Carousel
I like related products widgets because they increase engagement, so I recommend using them.
Carousels can sometimes be pretty resource heavy, but here’s how you can achieve the functionality while keeping performance tight:
- Code a widget directly into the theme (contact us if you need help with this)
- Try a new app/widget and compare the resources loaded / page weight
- If you’re loading more than 10 items in your carousel, I would cut that down to single digits for a good balance of performance/usability.
If you want to learn more about Shopify performance optimization, Click here.
If you want to check out our optimization services, Click here.