I’m tweaking my first Hype website and have it up and running on my server, but it’s loading hellishly slowly and I’m troubleshooting differences between different browsers. My landing page has an mp4 video set to autoplay and is the main culprit.
I’ve had advice to try it as a WebM file instead, and I’m wondering how I can upload the new file without having to upload the whole website again?
If you are just changing a video file, the only thing you would need to replace is the video file and the generated .js file. (And for backups sake, the restorable.plist file). Those 3 files would be in your resource folder exported from Hype. You could optionally delete the video file, but there might be some cases where people would have the old generated js file cached in their browser and they would be looking for the other video file.
Not sure you got the best advice? I recommend encoding with a lower bitrate MP4. The MP4 / h264 codec is the most widely supported video codec and is very compressed. Webm is great, but not as supported as mp4. Of course you can do both! But don't remove your mp4.
We've put together a guide to decreasing the file size of your document here: Decreasing load times and optimizing performance: Preparing a Large project in Hype which might help you get things moving faster.
Thanks Daniel! That’s great. Sorry to keep pushing, but are there other steps I can take to investigate slow loading? My friend is a web developer but not familiar with Hype so I’m sort of being the middle man here. The video file is 100MB which is apparently not big enough to cause problems, so I don’t think it’s that that’s causing the problem.
I have an video set to auto-play on my landing page and the page is incredibly slow to load. There are other videos on other pages that load instantly (and they’re bigger in size) so not sure what’s going on. The landing page video loads very slowly on safari and chrome (and occasionally not at all), whereas it doesn’t even load on Firefox.
I tried turning off autoplay in case that was the issue but the only change is that a thumbnail loads on firefox but the video still won’t play…
(the video is in mp4 format, with H.264 codec)
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: AlphaPod 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: HandBrake Documentation — Web Optimised. 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.
Thanks Daniel! I’ve just done that and on first glance what I’m noticing is that the browser seems to be pre-loading a huge amount of content from the whole of the website (i.e media that isn’t needed for the landing page) before displaying anything. Long audio files and so on that aren’t needed until later. I’m having a look in Hype now but is there a quick way to adjust that kind of thing?
(The DOMcontentloaded is only 257ms but the Load is 26.9 seconds)
Images & audio are preloaded by default, you can disable that pretty quickly though: Decreasing load times and optimizing performance: Preparing a Large project in Hype
If you have an image that must be ready to display when switching to a scene (and it isn’t preloaded), you can always include it off scene on the first scene to encourage the browser to cache it.
Thanks Daniel, this was really helpful. I have it loading much faster now. There’s one audio file I need to keep pre-loaded that seems to really slow things up even though it’s only 5MB, but I can’t figure it out and it’s liveable. Ta!