Introduction :
No one wants a slow website, in this article I will introduce some tips for speeding up website using “lazy loading” on images. In order to provide a better user experience for your audience, a faster website is needed.
What is Lazy loading ?
Lazy loading loading is a concept that accepting the content of the website when it requires, instead of doing it all at once. It is called Lazy loading because, as a lazy person, you continue to postpone the performance of something that you do not want. The contradiction is Eager Loading, where you immediately download something, long before you need it.
Why Lazy loading ?
No need to waste your time, memory, bandwidth, etc. you might not need. Then, when you need it, it will take more time, but it is normal. Consider also an application that requires a lot of time. This application can work with lots of eager loadings, images from disk and doing calculations and what is not long before it is ever needed.
How lazy loading works ?
If you notice that pictures takes time to load it onto the site when compared with other items in any website. If you add more pictures to an article, each picture enhances the time of page load. Instead of loading all the pictures at the same time, “lazy-loading” is just the picture displayed on the user’s screen, and replaces all the other pictures with the picture placeholder.
How to implement lazy loading ?
There are many libraries and plugins that allow you to be lazy loading to your site. but here I used the simple jQuery libraries Lazy Load XT and jQuery Lazy to add lazy loading to your site, please follow the code snippets below. To perform these tasks, enter this code into the current theme function.php or add it to the new plugin or click the github button below to get the full source code.
1.We are going to use jQuery library to implement lazy loading,i have provided here two options any one we can use, each one have there own pros and cons, you can enhance this code your self based on your need, here the options – “lazy_xt” or “lazy”
|
1 2 3 4 5 6 7 8 9 |
/** * We are going to use jQuery library to implement lazy loading, * i have provided here two options any one we can use, each one have there own pros and cons, * you can enhance this code your self based on your need. * jQuery Lazy Load XT url : https://github.com/ressio/lazy-load-xt * jQuery Lazy url : http://jquery.eisbehr.de/lazy/ * jQuery libraries Options - "lazy_xt" or "lazy" */ define('SH_LAZY_LOAD_LIBRARY',"lazy"); |
2.Create a “js/custom.js” file based on usage (i.e theme or child theme or plugin), example if your going to use on theme just create an js folder on active them and create a custom.js and place following code on it.
|
1 2 3 4 5 6 7 8 |
(function($) { //library check if(lazy.library =='lazy'){ $(".lazy").lazy(); }else{ $(".lazy").lazyLoadXT(); } })(jQuery); |
3.Enqueue required JavaScript libraries to implement lazy loading, make sure here we need set custom js script file path properly based on script usage, i have provide usage options coden with comments.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/** * Enqueue required javascript libraries to implement lazy loading hook */ add_action('wp_enqueue_scripts', 'sh_lazy_load_enqueue_scripts'); /** * Enqueue required javascript libraries to implement lazyloading callback */ function sh_lazy_load_enqueue_scripts() { //check if jquery not loaded already your plugins /theme load it due lazy libraries are jQuery dependents if(!wp_script_is('jquery')) { wp_enqueue_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1', true); } //check libraray option and load accordingly if(SH_LAZY_LOAD_LIBRARY == "lazy"){ wp_enqueue_script('jquery-lazy', '//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js', array('jquery'), '1.7.4', true); }else{ wp_enqueue_script('jquery-lazy-load-xt', '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.j', array('jquery'), '1.0.0', true); } //if your using in code in plugin uncomment this line and comment other two custom js files $custom_js_url = plugin_dir_url( __FILE__ )."js/custom.js"; //if your using in code in theme uncomment this line and comment other two custom js files //$custom_js_url = get_template_directory_uri() ."js/custom.js"; //if your using in code in child theme uncomment this line and comment other two custom js files //$custom_js_url = get_stylesheet_directory_uri() ."js/custom.js"; // Register the custom script wp_register_script('lazy-custom', $custom_js_url, array('jquery'), '1.0.0', true); //Localize the script with based on library wp_localize_script( 'lazy-custom', 'lazy', array('library'=>SH_LAZY_LOAD_LIBRARY)); // Enqueued script with localized library data. wp_enqueue_script( 'lazy-custom' ); } |
4.Find the images on WordPress content and add lazy load image placeholders on it, to implement lazy loading, thats all lazzzy loading …. loading …. images applied to your WordPress website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/** * Add image placeholders to post or page content,avatar and thumbnail images using "wp_head" hook callback */ function sh_lazy_load_setup_filters_callback(){ //add image placeholders to post/page content add_filter( 'the_content', 'sh_add_lazyload_placeholders_callback' , 99 ); //run this later, so other content filters have run, including image_add_wh on WP.com add_filter( 'post_thumbnail_html','sh_add_lazyload_placeholders_callback' , 11 ); add_filter( 'get_avatar', 'sh_add_lazyload_placeholders_callback' , 11 ); } /** * Find the images on content and add lazy load image placeholders on it callback */ function sh_add_lazyload_placeholders_callback($content) { //init dom object $dom_obj = new DOMDocument(); //load content @$dom_obj->loadHTML($content); //loop html objects which contains image tag foreach ($dom_obj->getElementsByTagName('img') as $node) { //getting original image source path $original_img_src = $node->getAttribute('src'); //set a new attribute to image "i.e data-src" tag and set image source path $node->setAttribute("data-src", $original_img_src ); //init default load image path $default_load_img_src = 'http://localhost/wp/wp-content/uploads/2018/01/sun-300x225.gif'; //set or replace a src attribute value to default load image path $node->setAttribute("src", $default_load_img_src); //check for responsive post data if ( $node->hasAttribute( 'sizes' ) && $node->hasAttribute( 'srcset' ) ) { //getting original image sizes $sizes_attr = $node->getAttribute( 'sizes' ); //getting original image srcsets $srcset = $node->getAttribute( 'srcset' ); //set a new attribute to image "i.e data-sizes" tag and set original image sizes $node->setAttribute( 'data-sizes', $sizes_attr ); //set a new attribute to image "i.e data-srcset" tag and set original image srcsets $node->setAttribute( 'data-srcset', $srcset ); //remove original image sizes $node->removeAttribute( 'sizes' ); //remove original image srcsets $node->removeAttribute( 'srcset' ); } //check for any class included for image tag append class, if not add our class name i.e "lazy" if ( $node->hasAttribute( 'class' ) ) { $class = $node->getAttribute( 'class' ); $class .=" lazy"; $node->setAttribute( 'class',$class ); }else{ $node->setAttribute( 'class', "lazy" ); } } //save modification $newContent = $dom_obj->saveHtml(); //return return $newContent; } |
Hopefully, in this article, you have learned how to add “lazy loading” for your WordPress website, then please Subscribe to ScriptHere.Com by Email. You can also find us on Facebook and Twitter
