Feature #88442

Allow iframe / video (youtube) javascript loading with "defer"

Added by Christian Hackl about 1 year ago. Updated 2 months ago.

Status:
Needs Feedback
Priority:
Should have
Assignee:
Category:
Fluid Styled Content
Target version:
-
Start date:
2019-05-26
Due date:
% Done:

0%

PHP Version:
Tags:
fluid video defer
Complexity:
Sprint Focus:

Description

Allow loading a video through a kind of "defer" loading.
For example, the f:media viewhelper with an additional attribute defer = "true".

This makes it necessary to include additional JavaScript, as described here:
https://varvy.com/pagespeed/defer-videos.html

This could potentially improve the load time of the website.

History

#1 Updated by Christian Hackl about 1 year ago

  • Subject changed from Allow Iframe / Video javascript loading with "defer" to Allow iframe / video (youtube) javascript loading with "defer"

#2 Updated by Christian Eßl 8 months ago

This would be a very helpful addition.
Just recently I created a very similar solution by overriding the YouTubeRenderer, but other video media types would also benefit from this feature. I will try to create a patch later.

#3 Updated by Christian Hackl 8 months ago

my current solution is: https://extensions.typo3.org/extension/hh_video_extender/

currently not the best code, but it does what it should

#4 Updated by Georg Ringer 2 months ago

  • Status changed from New to Needs Feedback

this is already possible by default using

<f:media class="video-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" additionalConfig="{additionalAttributes:{defer:'defer'}}" />

is that solution ok for you?

#5 Updated by Christian Eßl 2 months ago

No, there is no native "defer" attribute for html videos, so the browser wouldn't know from that information alone, that the video needs to be "lazyloaded".
For doing so, you would also need to override the "src" attribute to something like "data-src" and handle the lazyloading logic, that replaces "data-src" with "src" in some custom javascript. Otherwise the src would always be fetched

Question is: Should the core viewhelper support that (to override the attribute name for "src") or should this not be done in the core and better be done by third-party extension code, that implement their own video viewhelper solutions?
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video#for_video_acting_as_an_animated_gif_replacement
Lazy loading videos is still a bit "tricky" to support all browsers and scenarios well enough.

#6 Updated by Christian Hackl 2 months ago

Yes, unfortunately you're right, especially now with all the privacy data stuff and the needed javascript.
Maybe it's not wise to put something like that into the core - it could be a bit tricky with the CookieConsent plugins, at least for users in the EU.
Hmm stupid... or?!

Also available in: Atom PDF