I've got a lot of videos on our homepage describing a product. The videos are rather necessary to deliver the message of the product. However, the page load speed is not good at all on desktop and mobile. The videos at the moment are Vimeo (don't know if that matters or not). Is there a tool similar to something like Rocket for wordpress that could help with the pageload speed?
Thanks so much!
Let's take a step back and look at the platforms:
The videos at the moment are Vimeo (don't know if that matters or not)
There are pros and cons to this.
The pros for Vimeo videos: their video player won't show random suggestions like YouTube embeds do. This will help people stay on your page after watching the video, instead of being sucked in the rabbit hole of their YouTube recommendations.
The cons for Vimeo video embeds: Vimeo has a cap on your maximum monthly traffic. So, if you are running a high-traffic website (10k+ people per month viewing your product page) you may get to a point when your Vimeo videos stop loading and instead will show a message that you've reached your monthly traffic limit.
As to speed optimization of your homepage full of videos...
There is definitely a way to speed it up, even with all the videos on page. I've done it.
The solution here is to load the videos only when a visitor clicks on a thumbnail. This way you save around 500k per video, just from not loading the video player directly. At least, that's how it works with YouTube.
There is a solution that works well with youtube videos. Why and how it works is explained here: https://www.labnol.org/internet/light-youtube-embeds/27941/
And here you can find the code for same type solution, but modified to work for vimeo: https://gist.github.com/laradevitt/dc33da840375592be01fd8e83e3dca0c
Sadly, these solutions don't work "out of the box" like an app on Shopify or a wordpress plugin would.
They require you to change your theme's code a bit and use a modified video embed code.
Still, once done, this will shave MEGABYTES off your homepage weight and seconds from the total page load time.
So, go ahead, get it done. It is worth fixing as every second saved increases your conversion rate by 7-10%.
Hope this helps!
If the above pointers are not enough, contact me and I can help you implement this on your store.
This is Song Fei from Giraffly company which develops apps for Shopify. We developed a Page Speed Boost app for your situation.
The app uses the cheating latency which helps you preloading a page right before a user clicks on it. There is a time between a user hover the mouse over a link and actually click on it. That time is so quick and people won't even notice while our App detects and takes a good advantage of that time and do a just-in-time preloading for that page. So when you click on that link, that pre-loaded page opens instantly. This principle works on mobile as well, as when a user touching a link and before releasing it leaves PageSpeed Boost a good time to preload that page.
And it works on both desktop and mobile version on your website. As consumers continue to spend more time on mobile devices, mobile page load speeds are critical to a good user experience. Therefore, have a mobile-friendly website is critical for your business.
Caching creates an ultra-fast load time, essential for improving Search Engine Optimization and increasing conversions, but you are probably aware of it since you are familiar with WP.
I'm one of the PWA by AmpifyMe app founders, our app is quite similar to the Rocket plugin you mentioned and it scores 5 at the Shopify app store. Upgrading to PWA can be crucial for you because you don't need to move videos at all or have coding knowledge to increase the speed.
Glad if I helped! :)