Idea to make embeds only load if a spoiler is clicked, or to load first only the poster of an HTTP resource

User avatar
Nauru Dolan
Ninja
Posts: 13069
Joined: Sep 17, 2015

Idea to make embeds only load if a spoiler is clicked, or to load first only the poster of an HTTP resource

Post by Dolan »

When a page has a great number of embeds -- especially lots of Twitch streams/clips, YT vids, Imgur pics that were not enclosed in [img] tags, etc -- the page gets very sluggish, since the browser doesn't wait on each resource to fully load before it renders, it just starts the http request and moves on. For example this topic on the 3v3 Royal clan tourney: viewtopic.php?f=982&p=530178#p530178
This leads to a situation in which the page is rendered, but those multiple resources keep loading content, turning the whole page into a slug fest.

I was wondering if such a solution could work:

1. Recommend everyone to post any embeds inside spoiler tags or enforce spoiler tags on every embeds through the forum's PHP templating engine. Whenever it identifies a domain that qualifies as an embed, enclose that link between spoiler tags.
2. Do not automatically inject the PHP/HTML templating code which builds the DOM elements that are needed to create the embed in the forum page and which will also make the HTTP request in order to fetch the media resource.
3. Just embed that resource URL inside a spoiler, that's it, as a URL string. This should avoid having the browser make the HTTP request while the page is loading, which slows down the entire page, if there are multiple embeds and a large number of HTTP requests.
4. Attach an event handler in a JS script to the spoiler button, so that when a user clicks it, it spins a loader animation and templates that embed on the spot, making the HTTP request only if the user wants to load that resource. The resource should stay loaded even after the spoiler button is clicked again to collapse the embed, it would just get hidden through CSS rules.

Pros:
- All the pages on this forum will load instantly, no more pages that load in a very sluggish way.

Cons:
- Content is not available immediately, it requires user input, so there's going to be some clicking work for a user to get through all the embeds in a page.

This latter drawback could be sugarcoated by having the spoiler tag automatically recognise the domain and include a string which labels each embed enclosed in a spoiler.
So users would be able to see from the spoiler button which kind of content they can expect if they expand the spoiler.
This should not apply for very simple embeds like [img] which, under normal conditions, shouldn't take much time to complete. It should apply to Twitch, Youtube, Twitter, Imgur embeds (when the user just pasted the link, which makes your template engine include a lot more than just the image).

An alternative idea would be to load only a poster of the resource in the templated embed, with a Play button on top, so that users would still see something that reflects the content, but it would avoid making a long-polling HTTP request to load the whole resource, which for videos and streams can take a lot of time. Some streaming and media sites APIs might offer this option to serve a poster first, instead of the actual streamed content. This might be a better compromise than the spoiler solution above.

Who is online

Users browsing this forum: No registered users and 3 guests

Which top 10 players do you wish to see listed?

All-time

Active last two weeks

Active last month

Supremacy

Treaty

Official

ESOC Patch

Treaty Patch

1v1 Elo

2v2 Elo

3v3 Elo

Power Rating

Which streams do you wish to see listed?

Twitch

Age of Empires III

Age of Empires IV