{"id":22095,"date":"2020-07-15T16:09:26","date_gmt":"2020-07-15T16:09:26","guid":{"rendered":"http:\/\/lazy_load_react_and_boost_page_performance_for_your_apps"},"modified":"2023-08-11T13:26:22","modified_gmt":"2023-08-11T20:26:22","slug":"lazy_load_react_and_boost_page_performance_for_your_apps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps","title":{"rendered":"Lazy-Load React and Boost Page Performance for Your Apps"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/reactjs.org\/\">React<\/a> is a popular open-source JavaScript library for creating user interfaces (UIs) for <a href=\"https:\/\/cloudinary.com\/glossary\/spa-single-page-application\">single-page web applications<\/a>, with React Native slated for building mobile apps. Helpfully, React organizes UIs into collections of reusable components, rendering feature management a cakewalk. However, to boost user engagement, conversion, and SEO ranking, you must optimize your app for fast page loads.<\/p>\n<p>This article shows you how to perform <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">lazy-loading<\/a> with React components and then optimize images with Cloudinary to further enhance page performance. Here are the topics:<\/p>\n<ul>\n<li>\n<a href=\"#what-lazy-load\">What is lazy loading?<\/a>\n<\/li>\n<li>\n<a href=\"#what-react\">What is React and what are its components?<\/a>\n<\/li>\n<li>\n<a href=\"#react-components\">What are the lazy-loading components in React?<\/a>\n<\/li>\n<li>\n<a href=\"#how-react\">How do you lazy-load in React with <code>React.lazy<\/code> and <code>React.Suspense<\/code>?<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">How do you boost page performance with Cloudinary?<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"what-lazy-load\">What Is Lazy Loading?<\/h2> \n<p>Lazy loading, sometimes called on-demand loading, is a practice for improving the performance of websites and web apps. With lazy loading, you prevent users from loading your site all at once, displaying only the content that is currently or will soon be visible. As the user moves through your site and scrolls into the viewpoint, lazy loading loads only the content that is relevant at that point.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_for_optimal_performance\">Lazy loading<\/a> yields numerous benefits, especially if your sites or apps are image or media heavy. In particular, load times are shorter because less content is transferred at the same time, minimizing issues caused by limited bandwidth and requiring fewer resources from the user\u2019s device, web servers, and networks.<\/p>\n<h2 id=\"what-react\">What Is React and What Are Its Components?<\/h2> \n<p>Again, <a href=\"https:\/\/reactjs.org\/\">React<\/a> is an open-source <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\">JavaScript<\/a> library for building interactive UIs. It was developed by Facebook and has been adopted by a wide range of projects and companies, frequently in combination with other libraries to build single-page web apps.<\/p>\n<p>Recall that React divides UIs into collections of reusable components with which you as developers can modify the various aspects of your UI and monitor the status of its capabilities. According to Dan Abramov, creator of Redux and a member of React\u2019s core team, the Facebook codebase contains <a href=\"https:\/\/ru.react.js.org\/blog\/2016\/04\/07\/react-v15.html#upgrade-guide\">over 20,000 React components<\/a>.<\/p>\n<p>React components are JavaScript functions or classes that accept input and return React elements, which define how a portion of the UI appears to users.<\/p>\n<h3>Functional Components<\/h3>\n<p>Sometimes called stateless or dumb components, functional components are presentational, predictable, and concise. Given specific input, these components always return the same output\u2014a reliability that makes them the preferred implementation method.<\/p>\n<p>Here\u2019s an example of a simple functional component:<\/p>\n<p><code>const Greeting = () =&gt; &lt;h1&gt;Hi, I\u2019m a functional component!&lt;\/h1&gt;;<\/code><\/p>\n<h3>Class Components<\/h3>\n<p>Sometimes referred to as smart, stateful, or container components, class components are implemented through classes, enabling you to add logic for event handling, to manage local states, and to add lifecycle methods.<\/p>\n<p>Use class components only for managing local states.<\/p>\n<p>Here\u2019s an example of a simple class component:<\/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-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Greeting<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">React<\/span>.<span class=\"hljs-title\">Component<\/span> <\/span>{\n  render(){\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hi, I\u2019m a class component!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/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>For details on React libraries, see the post <a href=\"https:\/\/cloudinary.com\/blog\/how_to_develop_a_react_library\"><em>How to Develop a React Library<\/em><\/a>.<\/p>\n<h2 id=\"react-components\">What Are the Lazy Loading Components in React?<\/h2> \n<p>Built into React are two components for lazy loading, <code>React.lazy<\/code> and <code>React.Suspense<\/code>.<\/p>\n<h3>React.lazy<\/h3>\n<p><code>React.lazy<\/code> is a method for defining a dynamically loaded component so that you can code-split components within an application with dynamic imports.<\/p>\n<p>Typically, React applications contain many components, such as standalone ones that serve as libraries for reuse by developers. Code-splitting helps <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_for_optimal_performance\">boost the performance<\/a> of React applications by significantly reducing the number of components that are loaded simultaneously.<\/p>\n<p>To use <code>React.lazy<\/code>, first add a <code>React.Suspense<\/code> component higher in your rendering tree.<\/p>\n<h3>React.Suspense<\/h3>\n<p><code>React.Suspense<\/code> is a component for specifying loading indicators when components that are lower in the tree have not yet rendered. To define indicators with React.Suspense, specify a <code>fallback<\/code> property, such as a spinner.<\/p>\n<p>You can wrap multiple lazy components in a single <code>React.Suspense<\/code> component, and components can reside deep inside your tree. In general, use <code>React.Suspense<\/code> to add a loading indicator and  <code>React.lazy<\/code> to split code.<\/p>\n<h2 id=\"how-react\">How Do You Lazy-Load in React With `React.lazy` and `React.Suspense`?<\/h2> \n<p>The procedure below walks you through the steps of lazy loading in React with <code>React.Suspense<\/code> and <code>React.lazy<\/code> through an example of lazy-loading the <code>Login<\/code> component located at <code>.\/Components\/Login<\/code>. Be sure that you\u2019re running React version 16.6.0 or higher. For more details, see the <a href=\"https:\/\/medium.com\/datadriveninvestor\/lazy-loading-in-react-5c747b323509\">full tutorial<\/a> by Abhimanyu Chauhan. The <a href=\"https:\/\/github.com\/devAbhimanyu\/LazyLoadind_In_ReactJS\">source code<\/a> for that tutorial is on GitHub.<\/p>\n<p>As a preliminary step, export the module with the following commands:<\/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\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Login;\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> abc = className; **Not Valid **\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><strong>Step 1.<\/strong> Import the <code>Login<\/code> component with <code>React.lazy<\/code>.<\/p>\n<p><code>React.lazy<\/code> accepts the <code>import()<\/code> function and returns a promise from the dynamic import-invocation. Later on, the promise is resolved to lazy-load the module as required, returning a new bundle with the <code>Login<\/code> component added to the previous code.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Login = React.lazy(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">import<\/span>(\u2018.\/Components\/Login\u2019));\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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><strong>Step 2.<\/strong> Display the fallback content with <code>React.Suspense<\/code>.<\/p>\n<p>This step defines the fallback content for display while <code>Login<\/code> is being loaded.<\/p>\n<p>First, import the <code>Suspense<\/code> module from React:<\/p>\n<p><code>import React,{Suspense} from \u2018react\u2019;<\/code><\/p>\n<p>Now use the Suspense component to wrap the <code>Login<\/code> component, which is dynamically imported by <code>React.lazy<\/code>. In this case, show the message \u201cLoading \u2026\u201d when content loading is in progress, like this:<\/p>\n<p><code>&lt;Suspense fallback={&lt;div&gt;Loading \u2026&lt;\/div&gt;}&gt;&lt;Login \/&gt;&lt;\/Suspense&gt;<\/code><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>The <code>React.Suspense<\/code> API might undergo several revisions before becoming relatively stable.<\/p><\/div>\n<p><strong>Step 3.<\/strong> Verify that lazy loading is working.<\/p>\n<p>Test with the developer tools in Chrome on a live page to see if lazy loading is working, as follows:<\/p>\n<ol>\n<li>Look for <code>0.chunk.js<\/code>, a bundle that is initially loaded without the dynamic import performed by <code>React.lazy<\/code>.<\/li>\n<li>Look for <code>1.chunk.js<\/code>, which is called when <code>React.lazy<\/code> imports the <code>Login<\/code> component.<\/li>\n<\/ol>\n<h2 id=\"cloudinary\">How Do You Boost Page Performance With Cloudinary?<\/h2> \n<p>Cloudinary is a cloud-based service that simplifies and automates the process of transforming, optimizing, and delivering images and video, optimized for every device, at any bandwidth. The Cloudinary React SDK provides image and video transformation, optimization, and delivery capabilities that integrate seamlessly with your existing React application. Now that Lazy Loading is supported through modern browsers, you can use our SDK Image tag to Lazy Load your resources.<\/p>\n<p>It is as simple as adding the attribute loading=\u201clazy\u201d. For example:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> \n  <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"sample\"<\/span> \n  <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span>\n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"400\"<\/span>\n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"300\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After you optimize performance with lazy loading, you should strive to reduce image size as much as possible, to further reduce page load time. Cloudinary can help with the following features:<\/p>\n<ul>\n<li>\n<strong>Smart quality optimization<\/strong>\u2014enables you to automatically compress images without losing quality. You can achieve that by adding <code>q_auto<\/code> to your URLs, as explained in this guide about <a href=\"https:\/\/cloudinary.com\/blog\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size\">automated image compression<\/a>.<\/li>\n<li>\n<strong>Automated file formatting<\/strong>\u2014enables you to serve the correct file format for your browser. You can do that by adding Cloudinary\u2019s <code>f_auto<\/code> flag to your URL, as explained in this guide about <a href=\"https:\/\/cloudinary.com\/blog\/adaptive_browser_based_image_format_delivery\">automated image reduction<\/a>.<\/li>\n<li>\n<strong>Optimize progressive images<\/strong>\u2014enables you to render with the correct method. Cloudinary provides four different options: non progressive, steep progressive, semi progressive, and default progressive (<code>fl_progressive<\/code>). You can find more information in this guide about <a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">Progressive JPEGs and green Martians<\/a>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/cloudinary.com\/pricing\">Sign up for Cloudinary<\/a> today\u2014we offer generous free plans to get you up and 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_loading_javascript_for_high_speed_webpage_performance\">Lazy-Loading JavaScript for High-Speed Webpage Performance<\/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":22096,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,186,246],"class_list":["post-22095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-lazy-loading","tag-react"],"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-Load React to Enhance Page Performance for Your Apps<\/title>\n<meta name=\"description\" content=\"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.\" \/>\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_load_react_and_boost_page_performance_for_your_apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy-Load React and Boost Page Performance for Your Apps\" \/>\n<meta property=\"og:description\" content=\"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-15T16:09:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-11T20:26:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\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_load_react_and_boost_page_performance_for_your_apps#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Lazy-Load React and Boost Page Performance for Your Apps\",\"datePublished\":\"2020-07-15T16:09:26+00:00\",\"dateModified\":\"2023-08-11T20:26:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Lazy Loading\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\",\"url\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\",\"name\":\"Lazy-Load React to Enhance Page Performance for Your Apps\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA\",\"datePublished\":\"2020-07-15T16:09:26+00:00\",\"dateModified\":\"2023-08-11T20:26:22+00:00\",\"description\":\"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lazy-Load React and Boost Page Performance for Your Apps\"}]},{\"@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-Load React to Enhance Page Performance for Your Apps","description":"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.","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_load_react_and_boost_page_performance_for_your_apps","og_locale":"en_US","og_type":"article","og_title":"Lazy-Load React and Boost Page Performance for Your Apps","og_description":"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps","og_site_name":"Cloudinary Blog","article_published_time":"2020-07-15T16:09:26+00:00","article_modified_time":"2023-08-11T20:26:22+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04-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_load_react_and_boost_page_performance_for_your_apps#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps"},"author":{"name":"","@id":""},"headline":"Lazy-Load React and Boost Page Performance for Your Apps","datePublished":"2020-07-15T16:09:26+00:00","dateModified":"2023-08-11T20:26:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA","keywords":["Asset Management","Lazy Loading","React"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps","url":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps","name":"Lazy-Load React to Enhance Page Performance for Your Apps","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA","datePublished":"2020-07-15T16:09:26+00:00","dateModified":"2023-08-11T20:26:22+00:00","description":"Learn what lazy loading is and how React components work; also how to lazy-load in React and further enhance page performance with Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Lazy-Load React and Boost Page Performance for Your Apps"}]},{"@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\/v1649726043\/Web_Assets\/blog\/Lazy-Loading-React_2209601c04\/Lazy-Loading-React_2209601c04.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22095","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=22095"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22095\/revisions"}],"predecessor-version":[{"id":30877,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22095\/revisions\/30877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22096"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}