Need a 2nd set of eyes - crazy load time

[zacaman (Mark Rushton)]

Hey everyone - we just held a large academic conference and have committed to hosting the presentations (slide decks and audio) for a period afterward, giving anyone interested free access to the proceedings.

I’m doing a quick-and-dirty upload of the material ahead of a larger renovation. So what we have here isn’t pretty, but it is meant to be accessible. I’ve simply taken our online program rundown and added inline media players.

None of the audio, nor the PPTs (soon to be PDFs) are held within the resource library; they’re all within the same website hosting directory, but called directly (e.g., http://cuba60.ca/audiofiles/speaker1.mp3"

So here’s my challenge - for the life of me I can’t figure out why it’s taking on average 36 seconds for the page to load, particularly as the landing page has no audio, no presentations, minimal graphics and only one small animated effect.

The entire Hype-created site is only 3mb in total (again, not counting the MP3s and PPTs which are separate).

What am I missing that is obvious?

http://cuba60.ca

[TKDblackbelt (Ken Heins)]

Just a quick check shows that Flicker items are slow. everything else is good

[Daniel]

So here’s my challenge - for the life of me I can’t figure out why it’s taking on average 36 seconds for the page to load, particularly as the landing page has no audio, no presentations, minimal graphics and only one small animated effect.

I recommend turning off preload for all images except for the first image that you want to appear. 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.

By default, Hype will preload all images and only begin displaying your document after all images have been loaded. You can control this behavior on a per-image basis by disabling the Preload option that’s presented in your document’s Resource Library when an image is selected. You can select multiple images by selecting the first image, holding shift, and selecting the last image and unchecking ‘Preload’ at the bottom.

Also, all audio files are being preloaded, which is likely not necessary – these concurrent downloads of the mp3 files are due to the preload="auto" property on audio. You can use preload=“none” so that the audio is preloaded only when clicking play.

[jonathan (Jonathan Deutsch)]

Looking at the Network tab of the Safari web inspector, I see some seriously weird loading on the audio files. It might be a server misconfiguration issue. Would it be possible to post/send a zip of your .hype document?

[zacaman (Mark Rushton)]

Jonathan, thanks for the reply.

ZIPped Hype document (4.7mb) available at:

Cuba60-POST-v11.hype.zip

As for the server configuration - we’re saving a little $$ (we’re underfunded academics) by redirecting our domain to a sub-directory of an existing site, which works fine in general (i.e., didn’t seem to affect load times). We’re using stealth domain masking, hosting is with MacHighway. Domain registrar is EasyDNS.

The loooong load delay of the landing page is a relatively recent phenomenon. But I can’t identify what has changed.

[Daniel]

Converting the audio files to preload as ‘none’ in addition to reducing the preloaded images seems to help. Here’s an updated doc.

Quick temporary hosting demo: https://cloudfrontzone.s3.us-east-1.amazonaws.com/2019/Cuba60-POST-v11.html

This will have the effect of reducing the load on your server, so audio files will only be downloaded when someone hits a play button.

[zacaman (Mark Rushton)]

Your demo works fine - as it should. I guess I’m not understanding Hype’s “preload” feature - I assumed it only applied to anything within the resources library, and that all the external audio would be loaded on demand.

So - all I need to do is edit the html in the player to turn “preload” to “off” (currently on “auto”).

Thanks - glad it was something so simple.

Now I’m going to explore a way to make the audio preload, but only after the landing page animation has loaded and is underway, since - anticipating the impatience of visitors - people will want those clips to be available upon click.

Much appreciated, Daniel!

[Daniel]

I guess I’m not understanding Hype’s “preload” feature - I assumed it only applied to anything within the resources library, and that all the external audio would be loaded on demand.

If you dragged the MP3 file into the resources library, there is a preload option – but yeah since you’re just referencing audio as a <audio> element, then adjusting the preload value to be ‘none’ seems to help. I did that for you in the doc I sent.

Now I’m going to explore a way to make the audio preload, but only after the landing page animation has loaded and is underway, since - anticipating the impatience of visitors - people will want those clips to be available upon click.

You can simulate a slow network connection in Chrome’s developer tools. I found that the mp3 files play almost immediately, so I think you’re good