Online store performance and site speed optimization
Hi! I am looking to add videos to my product pages and was wondering it is is a better user experience to embed the videos via Youtube or to upload the videos directly.
For reference, here is one product page with video: https://oneblushingbride.net/products/celestial-gold-cape?_pos=1&_psq=cel&_ss=e&_v=1.0
In general, when I upload video to my website is there something I can do to keep my website fast? Right now, my website is loading slow and "Page Speed Insights" from Google gives me confusing insight as I am not technically savvy.
Thank you for your help!
Solved! Go to the solution
This is an accepted solution.
Hi @Alisha_Jemelian ,
To improve load time, the best option would be to upload to and embed from YouTube. By doing this, it offset's the resources necessary to play the video from Shopify and puts the load on YouTube.
Hope this helps.
This is an accepted solution.
@Alisha_Jemelianit depends on on your visual preference + the location of the videos. With either case, you should also defer the loading of the video so it doesn't contribute to the initial page load.
Option A)
Defer video loading completely (put a placeholder image and user presses play to load the video). There's a little bit of technical work but once you get it you can enjoy massive page load savings (videos are heavy).
Here's a guide + demo for that: https://speedboostr.com/deferred-video-loading.
Option B)
If they're below the fold (can't see them when first loading a page) and you prefer the look of only video, then you could upload directly and lazy load the video, then it would not load until the user scrolls.
You can do this too with Youtube but Youtube adds extra resources that will still be loaded even if the video is not played. For lazy loading (videos or images) check this guide: https://speedboostr.com/shopify-lazy-loading.
I prefer Option A, it's the best move for performance.
We try to write our guides so a non developer can implement the tactics, but if you get stuck or prefer to have a pro handle it contact us (Shopify performance experts) at speedboostr.com/contact.
Note about Google PSI, while videos and other page elements can affect it, it's largely based on the 3rd party apps you have loading. If you want to do a deep dive into performance for Shopify specifically (and the various tools and how to interpret them), see Understanding Load Speed + Analysis Tools on Shopify.
Enjoy your optimization journey 🙂
This is an accepted solution.
Adding video does not automatically decrease load time, as is often said. There are cases where one page can have more than 20MB of image data and the next page adds a video that adds another 2MB of image data, with the perception being that the video caused a slower load time. There are also technical factors involved such as if you're on a shared server, if the resources are already maxed out and when you've reached your quota.
This is an accepted solution.
Hi @Alisha_Jemelian ,
To improve load time, the best option would be to upload to and embed from YouTube. By doing this, it offset's the resources necessary to play the video from Shopify and puts the load on YouTube.
Hope this helps.
This is an accepted solution.
@Alisha_Jemelianit depends on on your visual preference + the location of the videos. With either case, you should also defer the loading of the video so it doesn't contribute to the initial page load.
Option A)
Defer video loading completely (put a placeholder image and user presses play to load the video). There's a little bit of technical work but once you get it you can enjoy massive page load savings (videos are heavy).
Here's a guide + demo for that: https://speedboostr.com/deferred-video-loading.
Option B)
If they're below the fold (can't see them when first loading a page) and you prefer the look of only video, then you could upload directly and lazy load the video, then it would not load until the user scrolls.
You can do this too with Youtube but Youtube adds extra resources that will still be loaded even if the video is not played. For lazy loading (videos or images) check this guide: https://speedboostr.com/shopify-lazy-loading.
I prefer Option A, it's the best move for performance.
We try to write our guides so a non developer can implement the tactics, but if you get stuck or prefer to have a pro handle it contact us (Shopify performance experts) at speedboostr.com/contact.
Note about Google PSI, while videos and other page elements can affect it, it's largely based on the 3rd party apps you have loading. If you want to do a deep dive into performance for Shopify specifically (and the various tools and how to interpret them), see Understanding Load Speed + Analysis Tools on Shopify.
Enjoy your optimization journey 🙂
Thank you so much for your help! I am not really tech savvy. So I would be interested in your services.
Would this particular product with the video here be considered "below the fold"? https://oneblushingbride.net/products/celestial-gold-cape?_pos=1&_psq=cel&_ss=e&_v=1.0
I am going to be uploading a lot more videos to my website (on the product pages). So would it be better to hire you to make these changes before or after I do so?
Thank you again for your guidance.
@Alisha_Jemelianyes it looks like it to me, I had to scroll down to see the video (assuming it's the video that's set as the 2nd product image).
If you're planning to upload more videos, do customizations, add apps, etc then I would do that first to maximize your value so the developer can optimize those additions.
Hi ,
Welcome here.
You can connect me on vial or skype and What's App.
We will create free audit report for you.
And we will guide you with best suggestions.
Welcome to the Shopify Community!
I am Alex From MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore ) I helped 1000+ Shopify Store owners to Optimize their website loading speed for both mobile and desktop and increase their conversion rate.
I will love to help you with some experts feedback here
- Kindly Provide your Store Url,
- Also Mention Which Shopify theme you are using
- How many Apps you are using?
Note: If your store is protected with ‘store Font password’ please Send it here or DM me.
If you have any concerns feel free to ask me!
Regards,
Alex
Hi Alex!
Absolutely. My Url is: https://oneblushingbride.net
I use about 7 apps.
Thank you in advance.
I have checked your store in page insight tool.
3rd party apps & codes which take time to load and their size . They decrease the speed.
Need to work on following points
See where exactly google speed index tools want you to target your code to optimize the site .
By fixing these issues, your website speed score can definitely improve.
And we will provide an assured guarantee plan for the website speed optimization.
For more details please check the link below.
https://www.oscprofessionals.com/shopify-performance-optimization/
If anything is missed out or unclear then don't hesitate to ask. Email us or Connect with us on Skype
Have a nice day !
This is an accepted solution.
Adding video does not automatically decrease load time, as is often said. There are cases where one page can have more than 20MB of image data and the next page adds a video that adds another 2MB of image data, with the perception being that the video caused a slower load time. There are also technical factors involved such as if you're on a shared server, if the resources are already maxed out and when you've reached your quota.
Hello @Alisha_Jemelian
I hope you are doing very well!
Site speed depends on many factors where we can talk about the points which we use to optimize the speed boost.
The following things would be done to optimize your store speed: -
1. Full speed optimization Audit.
2. Check and fix all halting Java scripts if any.
3. Check and remove apps' obsolete code if any.
4. Check and optimize all website assets (images, CSS, JS, etc.)
5. Images optimization & compression.
6. Optimize the video section to an optimized version if any.
7. Apply Lazy loading per section wherever required.
8. Check and defer scripts wherever required.
9. Improve liquid rendering time.
10. Improve Largest Contentful Paint LCP [Web Vitals] as per Gtmetrix.
11. Improve Cumulative Layout Shift [Web Vitals] as per Gtmetrix.
12. Improve TBT - Total blocking time as per GTmetrix.
13. Improve FID - First Input delay
14. Pre Load critical assets.
15. Handle third-party script [ app ].
16. Font loading.
17. Compress js and CSS files.
18. Apply CDN where required.
19. Lazyload images and iframes.
20. Remove unused JavaScript from the theme.
21. Preload assets where required.
22. Optimize videos and Gif
23. Improve overall page loading time
24. Implement AMP pages if required.
25. Improver overall core web vitals score based on lighthouse policy.
In Site Performance and speed, we will work on the overall performance of the website and not only the Homepage.
It will include image compression and optimization, lazyload images, video, & product description, Compressing & Minify HTML, CSS, jQuery, and Our favorite response-based loading technology of our own, Removing obsolete JavaScript, Improve Liquid Rendering speed, Removing scripts of uninstalled apps, Fix any halting JavaScript.
Regards
Adarsh Tripathi
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024