Lazy load all possible embeds in WordPress Editor

[pradeep910]

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.

• [x] Youtube
• [x] Reddit
• [x] Twitter
• [ ] Instagram
• [ ] Facebook
• [x] Spottify
• [ ] Vimeo
• [ ] Dailymotion

and so on..

[hbhalodia]

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 #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]

• On successful merge of above PR #29, the below embeds would be lazy loaded.
  • [x] Vimeo
  • [x] Dailymotion

[pavanpatil1]

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.

https://user-images.githubusercontent.com/44057535/216252632-05ad1c38-ab56-45b4-b170-7168a31eb57d.mp4

cc: @pradeep910 @hbhalodia

[hbhalodia]

Thanks @pavanpatil1, I have raised PR for the main branch - https://github.com/rtCamp/rt-optimizer/pull/31