You can take a deep dive into exactly what’s slowing things down by pressing ⌘ + option + i in Chrome to open up developer tools, then switch to the Network tab. Then, reload ( ⌘ + r).
This will show you a ‘waterfall’ of all network requests made:
This is for this document: https://tumult.com/hype/gallery/AlphaPod/AlphaPod.html from our gallery.
The key numbers at the bottom:
DOMContentLoaded: 403ms - This is how long it takes for the initial html page to download and be parsed.
- Load: 1.73s: All images and resources have fully finished downloading.
If you hover over one of the requests (an image, for example) you can see exact timing:
So if you do this with your video, you’ll see what effect that has on your document. My guess is that it is preloaded images that are causing the slow down, not your video, since videos load asynchronously. By that I mean that it won’t slow down the ‘page’, it will download alongside other resources at the same time.
If I were you, I would drop your video file into: https://handbrake.fr/ … And use a web-optimized format: https://handbrake.fr/docs/en/latest/advanced/web-optimised.html. If you are placing your video in a box with a height around 720pixels high, you should encode it with a 720 pixel height. This will keep file sizes low, and ensure the video starts playing as quickly as possible.