feat(youtube-player): improve initial load performance using a placeholder image #28207
Conversation
crisbeto
added
P3
crisbeto
requested review from
devversion,
josephperrott and
andrewseguin
as code owners
|
Deployed dev-app for 27c9ff5 to: https://ng-dev-previews-comp--pr-angular-components-28207-dev-wmb3qpc4.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
crisbeto
force-pushed
the
yt-placeholder
branch
from
7692d1c to
96a83e7
Compare
| By default the `<youtube-player/>` will show a placeholder element instead of loading the API | ||
| up-front until the user interacts with it. This speeds up the initial render of the page by not | ||
| loading unnecessary JavaScript for a video that might not be played. Once the user clicks on the | ||
| video, the API will be loaded and the placeholder will be swapped out with the actual video. |
There was a problem hiding this comment.
Is it worth mentioning that the placeholder:
- has a lower quality of the thumbnail (as I can see in the visual diff?)
- does not show the title of the video? (or should we show that as part of the placeholder)
There was a problem hiding this comment.
Yeah good point, I'll call them out in the doc. I think that generally users won't notice the difference since they won't get to see the YouTube placeholder.
There was a problem hiding this comment.
Actually it seems like we can use the maxresdefault.jpg placeholder instead. When I was testing earlier the highest-quality webp videos didn't have placeholders, but the jpg ones do. I'll switch it to the high quality one and we can revisit it later if it's problematic.
There was a problem hiding this comment.
Okay I ended up over-engineering it a bit 😅. Now users can choose between 3 different options since some super-old videos only have really low-quality thumbnails.
…older image Currently the `youtube-player` component loads the YouTube API and sets up the video on initialization. This can slow the page down a lot, because it loads and executes ~150kb of JavaScript, even though the video isn't playing. These changes rework the `youtube-player` component to show the thumbnail of the video and a fake button instead. When the button is clicked, the API will be loaded and the video will be autoplayed, thus moving the YouTube API out of the critical path. There are a few cases where the placeholder won't be shown: * A video that plays automatically. * When the `youtube-player` is showing a playlist, rather than a single video.
crisbeto
force-pushed
the
yt-placeholder
branch
from
96a83e7 to
27c9ff5
Compare
…older image (angular#28207) Currently the `youtube-player` component loads the YouTube API and sets up the video on initialization. This can slow the page down a lot, because it loads and executes ~150kb of JavaScript, even though the video isn't playing. These changes rework the `youtube-player` component to show the thumbnail of the video and a fake button instead. When the button is clicked, the API will be loaded and the video will be autoplayed, thus moving the YouTube API out of the critical path. There are a few cases where the placeholder won't be shown: * A video that plays automatically. * When the `youtube-player` is showing a playlist, rather than a single video.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Currently the
youtube-playercomponent loads the YouTube API and sets up the video on initialization. This can slow the page down a lot, because it loads and executes ~150kb of JavaScript, even though the video isn't playing.These changes rework the
youtube-playercomponent to show the thumbnail of the video and a fake button instead. When the button is clicked, the API will be loaded and the video will be autoplayed, thus moving the YouTube API out of the critical path.There are a few cases where the placeholder won't be shown:
youtube-playeris showing a playlist, rather than a single video.