Case Study: shoptapfit.com

Shoptapfit is selling a workout system called "TapFit" and "Slip-on Taps" product as well as other merchandise items. The site's homepage and main product page (Complete Home System product) was loading a whopping 30 seconds due to many factors.

I couldn't guarantee 3 sec loading speed, because it is likely impossible with the video this large. After initial analysis I've figured out we could aim for 5-7s first and iterate later if needed. Due to product specifics, removing the video from the top of homepage wasn't an option.

Optimization results for shoptapfit.com
Homepage Before After
Load speed ≈20-30s ≈5-7s
Page size 12.7MB 12.3MB
Requests 194 55
Click to view GTMetrix.com report
Optimization results for shoptapfit.com
Product page (Shogun) Before After
Load speed ≈20-30s ≈5-7s
Page size 3.38MB 1.83MB
Requests 194 76
Click to view GTMetrix.com report
Optimization results for shoptapfit.com
Product page (other) Before After
Load speed ≈10s ≈5s
Page size 1.30MB 1.35MB
Requests 108 98
Click to view GTMetrix.com report
Optimization results for shoptapfit.com
Collection page Before After
Load speed ≈8s ≈5s
Page size 1.22MB 1.20MB
Requests 81 56
Click to view GTMetrix.com report

The biggest issue were the videos - there were 3 of them on the homepage, all set to autoplay. To make things worse, videos were loading using Vimeo players. All external 3rd party players are always loading a bunch of resources. The video duration is 38 secs and weights close to 11 MBs. Similar situation was with the Complete Home System product page, in addition to the fact that it is built using Shogun page builder (significant performance bottleneck). There was some junk code in the theme too, leftovers from installed-uninstalled apps like Bold Recurring Orders among others. Lazyloading for images wasn't working correctly.

First thing I did was to replace all Vimeo player instances with standard operating systems player. Nowadays all devices support HTML5 video player, which is a better solution for performance and load speed. For all videos except the main one at the top of homepage, it would make sense to disable autoplaying. "Play" button was placed instead with the poster image. This way the videos are still available for users who'd like to watch them and at the same time they weren't affecting the load speed anymore.

Similar thing was done on the product page. Shogun page builder and similar apps will always be worse than natively coded pages inside Shopify, because it involves loading resources from 3rd party servers. An ideal solution for this would be to re-do the page completely inside Shopify, however this option would remove the possibility of editing it by the client. Instead I've implemented Lazy loading (on demand loading technique - loading elements only when they're scrolled to) for all Vimeo videos in Shogun. It worked great and was enough to make page loading speed closer to 5s.

Lazy loading was implemented for many other images across all pages. Images on the homepage, Related products section on product pages, collection pages, all of them are now loading on demand. Additionally, this same technique was applied for the Loox reviews widget at the bottom of homepage.

Some set of images, like the one with 5 logos on the homepage, were combined into so called "CSS sprites", a technique that allows to combine several small images into one - this saves precious requests.  

Scripts and Styles files were concatenated and minified wherever was possible. A few small design glitches were fixed, like different paddings on some containers on mobile screens.

Conclusion

Even in complicated cases it is possible to significantly boost load speeds. The videos are very bandwidth intensive, they're large and heavy and take forever to load, especially when played on site using 3rd party video players. Fortunately with smart approach it is still possible to make loading speed acceptable even without giving up on videos.

Shogun page builder is another risk factor and whenever possible you should stick with native implementation with Pages.

Whenever possible, when deleting apps from the admin, you should make sure none of app's code is left in the theme. You can message app developer for help with this.