Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy load all possible embeds in WordPress Editor #18

Open
4 of 8 tasks
pradeep910 opened this issue Dec 26, 2022 · 4 comments · Fixed by #29 · May be fixed by #31
Open
4 of 8 tasks

Lazy load all possible embeds in WordPress Editor #18

pradeep910 opened this issue Dec 26, 2022 · 4 comments · Fixed by #29 · May be fixed by #31
Assignees

Comments

@pradeep910
Copy link
Collaborator

pradeep910 commented Dec 26, 2022

The default youtube codes are loaded all at once. Making it load youtube scripts on page load.

Making it lazyload will reduce performance impact at the time of loading.

Handle above the fold embeds/iframe differently because it needs to be loaded asap, whereas below the elements can be lazyloaded.

  • Youtube
  • Reddit
  • Twitter
  • Instagram
  • Facebook
  • Spottify
  • Vimeo
  • Dailymotion

and so on..

pradeep910 added a commit that referenced this issue Dec 26, 2022
Fix `loadCSS` JavaScript file enqueue error
@Souptik2001 Souptik2001 self-assigned this Dec 27, 2022
Souptik2001 added a commit that referenced this issue Dec 28, 2022
Load iframes through Javascript
Souptik2001 added a commit that referenced this issue Dec 28, 2022
Souptik2001 added a commit that referenced this issue Dec 29, 2022
Check for empty URLs in iframes
Souptik2001 added a commit that referenced this issue Dec 30, 2022
Add lazy loading for twitter and Reddit embeds
pradeep910 added a commit that referenced this issue Jan 3, 2023
Load iframes through Javascript
@pradeep910 pradeep910 changed the title Lazy load youtube embeds Lazy load all possible embeds in WordPress Editor Jan 10, 2023
@hbhalodia
Copy link

Hi @pradeep910, I checked this issue on local and identified that,

  1. Instagram and Facebook embeds are not available by default by the WordPress. We need to manually enter embed as custom HTML or need to use any third party plugin which provide embed feature. In this case we do not have any control over markup which Souptik used to add text/rtscript-noautoload to the script and further with intersection observer as wrapper for blockqoute embed.
  2. I have raised PR for some fix like, Iframe lazy load was happening for all type of iframes not only youtube as per this comment. Further, I have added an array in which we can add which iframe we want to lazy load in the PR Feat: Add lazy load to remaining embeds #29. This PR adds the lazy loads to embed video such as vimeo and dailymotion.
  3. I am also further checking embeds that are not listed on the issue and are provided by WordPress and would update the issue list if needed.

Thanks.

@hbhalodia
Copy link

hbhalodia commented Feb 1, 2023

hbhalodia added a commit that referenced this issue Feb 1, 2023
Feat: Add lazy load to remaining embeds
hbhalodia added a commit that referenced this issue Feb 2, 2023
Feat: Add instagram embed to lazy load
@pavanpatil1
Copy link

Verified the Lazy load for the embeds added here. It is working fine. It is loading on the scroll. Just the facebook embed is not possible so that not able to verify. Rest all other embeds are working fine.

lazy.mp4

cc: @pradeep910 @hbhalodia

@hbhalodia hbhalodia linked a pull request Feb 2, 2023 that will close this issue
@hbhalodia
Copy link

Thanks @pavanpatil1, I have raised PR for the main branch - #31

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants