{"id":22089,"date":"2020-06-11T20:28:02","date_gmt":"2020-06-11T20:28:02","guid":{"rendered":"http:\/\/lazy_loading_javascript_for_high_speed_webpage_performance"},"modified":"2023-12-16T05:06:01","modified_gmt":"2023-12-16T13:06:01","slug":"lazy_loading_javascript_for_high_speed_webpage_performance","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance","title":{"rendered":"Lazy-Loading JavaScript for High-Speed Webpage Performance"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>JavaScript is a popular programming language, typically for building interactive web apps,  thanks to its ease of use and ability to run in any browser with no \u201cJavaScript turned off\u201d setting. The language is easy to learn, accelerating app development. However, to avoid performance issues, be sure to optimize your JavaScript apps for media loading. You can do that by adopting techniques for optimizing website images, such as <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">lazy loading<\/a>.<\/p>\n<p>This post addresses the following topics:<\/p>\n<ul>\n<li>\n<a href=\"#what-javascript\">What is JavaScript?<\/a>\n<\/li>\n<li>\n<a href=\"#why-javascript\">Why are JavaScript libraries widely used?<\/a>\n<\/li>\n<li>\n<a href=\"#what-lazy-load\">What is lazy loading?<\/a>\n<\/li>\n<li>\n<a href=\"#intersection-observer-api\">What is the Intersection Observer API?<\/a>\n<\/li>\n<li>\n<a href=\"#simplify-lazy-load\">Can you simplify the lazy-loading process?<\/a>\n<\/li>\n<li>\n<a href=\"#how-lazy-load\">How do you lazy-load in JavaScript with Intersection Observer?<\/a>\n<\/li>\n<li>\n<a href=\"#lazy-load-cloudinary\">How do you lazy-load with Cloudinary?<\/a>\n<\/li>\n<\/ul>\n<h3 id=\"what-javascript\">What Is JavaScript?<\/h3> \n<p>JavaScript (JS) is multiparadigm, i.e., ideal for procedural, functional, and object-oriented programming. Originally designed for the client side only, JS is increasingly being used on the server side as the back-end for websites and web apps through frameworks, such as Node.js.<\/p>\n<h3 id=\"why-javascript\">Why Are JavaScript Libraries Widely Used?<\/h3>\n<p>For efficiency, in addition to using libraries when developing back-end APIs, many JS programmers leverage frameworks, which offer convenient shortcuts for common capabilities and methods. Frameworks help standardize programming and can significantly boost productivity.<\/p>\n<p>Part of what makes frameworks easy to use in JS is its huge user base, which works with many tools. The most popular frameworks have extensive documentation, robust communities, lots of illuminating dialog on implementation, and tips and suggestions for best practices. Additionally, strong community support means that bugs and security issues tend to be found and fixed quickly.<\/p>\n<h3 id=\"what-lazy-load\">What Is Lazy Loading?<\/h3>\n<p>Lazy loading is a practice that delays the initialization of web elements, e.g., you can prevent a video at the bottom of a page from loading until the viewer has clicked the Play button or scrolled over there.<\/p>\n<p>\nIn practice, lazy loading identifies non-critical resources such as off-screen images and loads them only when they are needed. This means a page might only load images that are visible, and then load more as the user scrolls down. This approach leads to improved web performance, less traffic load for the host, and a decreased bounce rate. \n<\/p>\n<p>\nHowever, there can be drawbacks. The user experience may be affected due to delayed loading, and additional code might be needed when integrating this technique with JavaScript. Furthermore, if not implemented correctly, lazy loading can have a negative impact on SEO ranking.\n<\/p>\n<p>Lazy loading <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_for_optimal_performance\">improves web performance<\/a> and can help you avoid the following pitfalls:<\/p>\n<ul>\n<li>Page lag created by multiple synchronous requests for content.<\/li>\n<li>Longer load times due to large content files.<\/li>\n<li>Loss of users due to poor site performance, which is especially problematic in case of slow Internet connections.<\/li>\n<li>Bandwidth waste caused by loaded but unviewed content.<\/li>\n<\/ul>\n<p>To head off those issues, most modern browsers support lazy loading. Notably, Google Chrome 76 and higher support lazy loading natively with a <code>loading<\/code> attribute that enables you to defer loading of offscreen images with no additional code. For browsers in which lazy loading doesn\u2019t work, you can often implement it by means of libraries or polyfills with an associated API.<\/p>\n<h3 id=\"intersection-observer-api\">What Is the Intersection Observer API?<\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\">Intersection Observer API<\/a> is a built-in browser tool for manipulating elements on websites and in applications by asynchronously monitoring the intersection of elements with the viewer\u2019s viewport or other elements. With that API, you can\u2014<\/p>\n<ul>\n<li>Lazy-load content as the viewer scrolls through your page.<\/li>\n<li>Implement \u201cinfinite scrolling,\u201d such as that in Instagram and many forums.<\/li>\n<li>Determine and report on the visibility of ads for revenue analysis or user-experience studies.<\/li>\n<li>Reduce resource consumption by withholding tasks or animations until they are relevant for the viewer.<\/li>\n<\/ul>\n<p>To use Intersection Observer, first create a callback, which can be triggered by an element that intersects with a specified element or the viewport. Often, the intersection is with an element\u2019s closest scrollable ancestor. The following code shows a callback with options for intersection elements.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> callback = <span class=\"hljs-function\">(<span class=\"hljs-params\">entries, observer<\/span>) =&gt;<\/span> {\n  entries.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">entry<\/span> =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ Each entry describes an intersection change for one observed<\/span>\n    <span class=\"hljs-comment\">\/\/ target element:<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.boundingClientRect<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.intersectionRatio<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.intersectionRect<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.isIntersecting<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.rootBounds<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.target<\/span>\n    <span class=\"hljs-comment\">\/\/   entry.time<\/span>\n  });\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When defining this intersection, you can specify the overlap, i.e., how close the content is to being accessed. Alternatively, trigger it the first time an event, such as a button click, occurs.<\/p>\n<h3 id=\"simplify-lazy-load\">Can You Simplify the Lazy-Loading Process?<\/h3>\n<p>You can simplify lazy loading with libraries. Below are two examples.<\/p>\n<ul>\n<li>\n<p><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\"><code>Lozad.js<\/code><\/a><\/strong> is an open-source, lightweight library for configuring lazy loading of images, iframes, video, and audio. Based on the Intersection Observer API, <code>Lozad.js<\/code> adds no dependencies to your projects. You can use it with either static or dynamically loaded elements.<\/p>\n<p>To install <code>Lozad.js<\/code>, type:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">$ npm install --save lozad\n<\/code><\/span><\/pre>\n<p>or:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">$ yarn add lozad\n<\/code><\/span><\/pre>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\"><code>Yall.js<\/code><\/a><\/strong> is also an open-source library for configuring lazy loading of various media, including <code>&lt;img&gt;<\/code>, <code>&lt;picture&gt;<\/code>, <code>&lt;video&gt;<\/code>, and <code>&lt;iframe&gt;<\/code> elements; and CSS background images. <code>Yall.js<\/code> works with not only JS but also with the  <code>&lt;noscript&gt;<\/code> tag. Based on the Intersection Observer API, <code>Yall.js<\/code> can monitor changes in the Document Object Model (DOM) with <a href=\"https:\/\/hacks.mozilla.org\/2012\/05\/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance\/\">Mutation Observer<\/a>.<\/p>\n<p>To install <code>Yall.js<\/code>, type:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install yall-js\n<\/code><\/span><\/pre>\n<\/li>\n<\/ul>\n<h3 id=\"how-lazy-load\">How Do You Lazy-Load in JavaScript with Intersection Observer?<\/h3>\n<p>Below is a simplified tutorial on how to implement lazy loading with Intersection Observer. For more details, see the <a href=\"https:\/\/blog.bitsrc.io\/lazy-loading-images-using-the-intersection-observer-api-5a913ee226d\">full tutorial by Chidume Nnamdi<\/a>.<\/p>\n<ol>\n<li> <p style=\"font-weight:bold;\">Define the `image` tag with lazy-load attributes.<\/p>\n<pre><code>&lt;p&gt;Define the `image` tag with a shared class that identifies lazy-loaded images, e.g.,  `lzy_img`. That tag must contain two attributes:&lt;\/p&gt;\n&lt;ul&gt;\n&lt;li&gt;The regular `src` attribute, which refers to the original image.&lt;\/li&gt;\n&lt;li&gt;The `data-src` attribute, which refers to the image shown after lazy loading.&lt;\/li&gt;\n&lt;\/ul&gt;\nSee this example:\n<\/code><\/pre>\n<div class=\"code-holder\"><div class=\"copy_container tooltip\"><a class=\"copy_icon\"><\/a><span class=\"tooltiptext\">Copy to clipboard<\/span><\/div><div class=\"code_inner\"><pre>&lt;img class=\"lzy_img\" src=\"lazy_img.jpg\" data-src=\"real_img.jpg\" \/&gt;\n<\/pre><\/div><\/div>\n<\/li>\n<li><p><strong>Instantiate Intersection Observer.<\/strong> <\/p><p>First, create an instance of the Intersection Observer with two arguments: an array of elements shown in the browser\u2019s viewport and an <code>imageObserver<\/code> instance.<\/p><p>Next, loop through entries and perform lazy loading on each of them. For each entry, check if it is intersecting with the viewport, i.e., if it is currently displayed there. If so, set the <code>src<\/code> attribute to the value of the data-src attribute.<\/p><p>See this example:<\/p><div class=\"code-holder\"><div class=\"copy_container tooltip\"><a class=\"copy_icon\"><\/a><span class=\"tooltiptext\">Copy to clipboard<\/span><\/div><div class=\"code_inner\"><pre>const imageObserver = new IntersectionObserver((entries, imgObserver) =&gt; {\nentries.forEach((entry) =&gt; {\n    if(entry.isIntersecting) {\n        const lazyImage = entry.target\n        lazyImage.src = lazyImage.dataset.src\n    }\n});<\/pre><\/div><\/div><\/li>\n<li><p><strong>Observe and lazy-load images with <code>ImageObserver<\/code>.<\/strong><\/p><p>Call <code>imageObserver<\/code> and pass to it all the image elements in the document with <code>document.querySelectorAll('img.lzy_img')<\/code>. <code>imageObserver<\/code> listens on the images to detect when they intersect with the browser viewport.<\/p><div class=\"code-holder\"><div class=\"copy_container tooltip\"><a class=\"copy_icon\"><\/a><span class=\"tooltiptext\">Copy to clipboard<\/span><\/div><div class=\"code_inner\"><pre>imageObserver.observe(document.querySelectorAll('img.lzy_img'));<\/pre><\/div><\/div><\/li>\n<li><p><strong>Verify that lazy loading works.<\/strong><\/p><p>Create a few initial images and real images for lazy loading and then create an <code>index.html<\/code> file that includes the <code>image<\/code> tags in step 1. Space out the images so that some of them will initially be outside the viewport.<\/p><p>Here\u2019s an example of a configured <code>image<\/code> tag:<\/p><div class=\"code-holder\"><div class=\"copy_container tooltip\"><a class=\"copy_icon\"><\/a><span class=\"tooltiptext\">Copy to clipboard<\/span><\/div><div class=\"code_inner\"><pre>&lt;img class=\"lzy_img\" src=\"lazy_img.jpg\" data-src=\"img_1.jpg\" \/&gt;<\/pre><\/div><\/div><p>Within the <code>index.html<\/code> file, run a script with Intersection Observer and <code>imageObserver<\/code>, as in the following example.<\/p><div class=\"code-holder\"><div class=\"copy_container tooltip\"><a class=\"copy_icon\"><\/a><span class=\"tooltiptext\">Copy to clipboard<\/span><\/div><div class=\"code_inner\"><pre>&lt;script&gt;\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const imageObserver = new IntersectionObserver((entries, imgObserver) =&gt; {\n            entries.forEach((entry) =&gt; {\n                if (entry.isIntersecting) {\n                    const lazyImage = entry.target\n                    console.log(\"lazy loading \", lazyImage)\n                    lazyImage.src = lazyImage.dataset.src\n                }\n            })\n        });\n        const arr = document.querySelectorAll('img.lzy_img')\n        arr.forEach((v) =&gt; {\n            imageObserver.observe(v);\n        })\n    })\n&lt;\/script&gt;<\/pre><\/div><\/div><p>Place the files on a web server and test them on a web browser.<\/p><\/li>\n<\/ol>\n<h3 id=\"lazy-load-cloudinary\">How Do You Lazy-Load With Cloudinary?<\/h3>\n<p>Cloudinary is a cloud-based service that simplifies and automates the process of manipulating, optimizing, and delivering images and videos, optimized for any device at any bandwidth. Those capabilities are offered through the Cloudinary JavaScript SDK, which you can seamlessly integrate with your JS apps.<\/p>\n<p>Hearteningly, lazy loading now works in all modern browsers, meaning that you can lazy-load media by merely adding the <code>loading<\/code> option to the Cloudinary SDK\u2019s image tag (<code>cl.imageTag<\/code>), like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> img = cl.imageTag(<span class=\"hljs-string\">'sample.jpg'<\/span>, {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">300<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"scale\"<\/span>, <span class=\"hljs-attr\">loading<\/span>: <span class=\"hljs-string\">\"lazy\"<\/span>}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Afterwards, reduce the image size as much as possible to accelerate page loading by adopting one or more of the following Cloudinary features:<\/p>\n<ul>\n<li>\n<strong>Smart quality optimization,<\/strong> which automatically compresses images without sacrificing quality. Just add <code>q_auto<\/code> to your URLs, as explained in this <a href=\"https:\/\/cloudinary.com\/blog\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size\">post<\/a>.<\/li>\n<li>\n<strong>Automated file formatting,<\/strong> which serves the correct file format for your browser. Just add <code>f_auto<\/code> to your URLs. For details, see this <a href=\"https:\/\/cloudinary.com\/blog\/adaptive_browser_based_image_format_delivery\">post<\/a>.<\/li>\n<li>\n<strong>Progressive image optimization,<\/strong> which renders images with the correct method. You have four options: nonprogressive, steep-progressive, semiprogressive, and default progressive (<code>fl_progressive<\/code>). Refer to this <a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">post<\/a> for the particulars.<\/li>\n<\/ul>\n<p>Why not try out all that magic? Start with <a href=\"https:\/\/cloudinary.com\/pricing\">signing up for a free Cloudinary account<\/a>. We offer generous free plans to get you started.<\/p>\n<h2>Want to Learn More About Lazy-Loading?<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">Lazy Loading: Choosing the Best Option<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_get_killer_page_performance_with_angular_lazy_loading\">How to Get Killer Page Performance With Angular Lazy Loading<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\">Lazy-Load React and Boost Page Performance for Your Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_for_optimal_performance\">Lazy Loading for Optimal Performance<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/progressive_web_apps_architecture_and_examples\">Progressive Web Apps: Architecture and Examples<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22090,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,177,186],"class_list":["post-22089","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-javascript","tag-lazy-loading"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Lazy-Loading JavaScript for High-Speed Webpage Performance<\/title>\n<meta name=\"description\" content=\"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy-Loading JavaScript for High-Speed Webpage Performance\" \/>\n<meta property=\"og:description\" content=\"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-11T20:28:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-16T13:06:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Lazy-Loading JavaScript for High-Speed Webpage Performance\",\"datePublished\":\"2020-06-11T20:28:02+00:00\",\"dateModified\":\"2023-12-16T13:06:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Javascript\",\"Lazy Loading\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\",\"url\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\",\"name\":\"Lazy-Loading JavaScript for High-Speed Webpage Performance\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA\",\"datePublished\":\"2020-06-11T20:28:02+00:00\",\"dateModified\":\"2023-12-16T13:06:01+00:00\",\"description\":\"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lazy-Loading JavaScript for High-Speed Webpage Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy-Loading JavaScript for High-Speed Webpage Performance","description":"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance","og_locale":"en_US","og_type":"article","og_title":"Lazy-Loading JavaScript for High-Speed Webpage Performance","og_description":"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.","og_url":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance","og_site_name":"Cloudinary Blog","article_published_time":"2020-06-11T20:28:02+00:00","article_modified_time":"2023-12-16T13:06:01+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance"},"author":{"name":"","@id":""},"headline":"Lazy-Loading JavaScript for High-Speed Webpage Performance","datePublished":"2020-06-11T20:28:02+00:00","dateModified":"2023-12-16T13:06:01+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA","keywords":["Asset Management","Javascript","Lazy Loading"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance","url":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance","name":"Lazy-Loading JavaScript for High-Speed Webpage Performance","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA","datePublished":"2020-06-11T20:28:02+00:00","dateModified":"2023-12-16T13:06:01+00:00","description":"Learn about Javascript lazy loading and the procedure for leveraging that technique to optimize webpage performance.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Lazy-Loading JavaScript for High-Speed Webpage Performance"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719961\/Web_Assets\/blog\/Lazy-Loading-JavaScript_22090f21a4\/Lazy-Loading-JavaScript_22090f21a4.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22089"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22089\/revisions"}],"predecessor-version":[{"id":32171,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22089\/revisions\/32171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22090"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}