Optimize page speed

[johankj]

The page load is getting quite big when viewing a page with a lot of videos on it. Sending all those requests and loading a bunch of iframes is probably unnecessary on first load, as most people probably won’t start watching 10 or 20 videos in one go.

A thumbnail url for videos on YouTube can be generated from the video id. Thumbnails for Vimeo videos can only be found by making a request to the Vimeo API.

I have a working implementation for lazy loading YouTube videos on the feature-lazy-load branch.
It could be extended to work with other video providers by having a thumbnail-attribute on each video. The build script (or another rake-command) could fetch and add all the missing thumbnails.

[chriseidhof]

That could be very interesting indeed! Pre-fetching the thumbnails also sounds like a good idea.

[eelco]

I like this idea, the page load is indeed a bit heavy.

Another way to generalize it would be to use oEmbed for this, which is supported by both Vimeo (docs, example and YouTube (can’t find docs, but it seems they implement it like described on oembed.com, no other parameters), and many other video sites.

Fetching the thumbnails in advance (to have a cache on pomo.tv) makes sense to me too, but could also be added later, as further optimization.

[johankj]

oEmbed looks pretty nice, but how do you reckon we would use it?
We could send a request for each video on middleman-compilation and then save thumbnail etc.
Or we could do everything client-side, sending requests for each video, fetching thumbnails and loading the video on-click, like in my first proposal. In that case we would have to use something like noembed.com as the YouTube oEmbed API doesn’t have CORS enabled.

Right now, my best idea is to:

• Have a thumbnail for all videos
• Have a Play-icon on top of all embed-able videos’ thumbnails
• When the thumbnail/Play-icon is clicked on, replace it with the embedded video via JavaScript (as a fallback, link to the video)
• For videos without a way to embed content (WWDC) have the thumbnail be a link to the video
• Thumbnails can be fetched and added to events.yml via a rake-task (Although if we use YAML.load and .to_yaml, it will mess up arrays by not using the shorthand syntax)
• Thumbnails may or may not be stored here vs. hot-linking

[chriseidhof]

We could even put the thumbnails on S3, as a "cache". This way, we can store them outside of the repository. We can generate the filename from the video info. This way, we don't have to adjust the yaml.

[eelco]

Love your idea @johankj.

The thumbnails can be saved using the video_id helper I added to make the video pages (it’s kind of fragile, but I think it’s best to try and break it sooner rather than later, because it will be harder to switch to something else the longer we wait).

In terms of data management, I’m not a huge fan of datastores that are separate from repositories, although the data is pretty stable in this case (the thumbnails won’t change). My current favorite coupling to keep the data separate yet still versioned is Git Large File Storage, available for all GitHub repositories (1GB storage and 1GB/month bandwidth per month is free). I’d vote for that.