Lazy media

Lazyload is an indispensable feature in website optimization. We use the library (lazysizes) to create lazyload effects for images & iframes. Check my example as bellow for <img tag before & after lazy loaded:
<!-- before -->
<img src="/wp-content/uploads/2020/04/7476274750363710967-1.png">
<!-- after -->
<img loading="lazy" class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/wp-content/uploads/2020/04/7476274750363710967-1.png">
If you wish to remove lazy feature on some images or iframe, please use this hook:
add_filter('hpp_should_defer_media_in_text', function($pass, $str){
if(strpos($str, 'xx')!==false) return false;
return $pass;
}, 10, 2);

Lazy iframe/video

You known the video is loaded through iframe when page loaded, this is taboo in website optimization. Instead of displaying the Youtube embed code, we will only display the thumbnail of the video with the play button in the middle.
However, many people do not want to use this optimally, meaning they want to keep the iframe tag. You can disable this feature with the following code:
//turn off lazy for all video
add_filter('hpp_allow_lazy_video', '__return_false');
*@param $ok - 0/false: disable lazy
*@param $str - embed code
add_filter('hpp_allow_lazy_video', function($ok, $str){
return $ok;
}, 10,2);
Alternatively, you may want to tweak the video embed code in your own way. With help of the hook named oembed_result
add_filter('oembed_result', function($iframe_html, $video_url, $frame_attributes){
//leave iframe tag but use lazyload feature
return hpp_lazy_video($iframe_html, 2);
}, 20, 3);

Lazysizes Event

custom Lazysizes library. see example:
//add simple support for <picture class='lazy'><img:
document.addEventListener('lazybeforeunveil', function(e){
var i,img ='img');
for(i=0;i< img.length;i++){
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg ='data-src');
if(bg &&'a'){ = 'url(' + bg + ')';
see details here.


Disallow lazyload for specific tag.
add_filter('hpp_disallow_lazyload', function($ok, $tag){
//class,src,srcset,.. ->attributes
if(strpos($tag, 'logo.png')!==false) return 1;
return $ok;
add_filter('hpp_disallow_lazyload_attr', function($ok, $attr){
if(strpos($tag['src'],'logo.png')!==false) return 1;
return $ok;
},10, 2);