{"id":2833,"date":"2023-07-13T14:42:01","date_gmt":"2023-07-13T09:12:01","guid":{"rendered":"https:\/\/hostkicker.com\/blog\/?p=2833"},"modified":"2023-07-13T14:42:01","modified_gmt":"2023-07-13T09:12:01","slug":"what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site","status":"publish","type":"post","link":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/","title":{"rendered":"What is lazy loading in WordPress: how to enable it on your site?"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">In this fast-paced digital world, a slow-loading website can significantly hamper a website\u2019s performance and its presence on the internet. There could be multiple reasons for a slow-loading website, but images are one of the major contributors. No doubt, images make a valuable addition to the website\u2019s content, making it interesting, engaging, and effective in conveying the message, but they consume much bandwidth and much time to load. Therefore, it\u2019s important for websites to optimize images. If you are looking for an effective solution, consider Lazy loading. Lazy loading in WordPress is a valuable feature that delays the initial image loading time and helps you improve your website performance.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Are you curious to learn more about what lazy loading is and how you can enable it on your website? Continue reading the blog throughout the end to understand the whats and hows of it. In this blog, we\u2019ll cover lazy loading in detail and help you grasp it in an engaging way.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">So, without further ado, let\u2019s dive into the details.\u00a0<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">What is lazy loading in WordPress?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Lazy loading in WordPress is a technique used to optimize the loading speed of a web page and improve the overall page performance.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">It delays the image loading times of a web page compared to other page content, enabling a page to load faster. To put it another way, lazy loading enables a web page to only load the images that are visible to users above the fold and delays the loading time of other images until they are needed, typically when the users scroll to them.\u00a0\u00a0<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">How lazy loading works on a website?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Typically, when a visitor visits a webpage, all the content, including images and videos, is loaded at once. This process is slowed down for web pages that include numerous high-resolution images and videos, impacting the page loading speed, performance, and overall user experience.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Implementing lazy loading in your WordPress website allows browsers to load images that are above the fold, meaning that they are visible on the visitor\u2019s screen. The rest of the images or media files are loaded when the visitor further scrolls down the web page, which can significantly lower the loading times and improve the user experience.<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">Why is lazy loading important?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Till now, you must have understood the value of Lazy loading for a website. However, if you are still confused about implementing it on your site, the following are some valuable points supporting lazy loading in WordPress.\u00a0\u00a0<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Lazy loading reduces page loading times and improves the site speed.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">It lowers bandwidth usage and thus reduces hosting costs.\u00a0<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">It enhances the browsing experience of users<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">It improves the site experience on mobile devices\u00a0<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">It optimizes the Largest Contentful Paint or LCP score.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">It improves search engine optimization, elevating the search ranking of your website.<\/span><\/li>\n<\/ul>\n<h2><strong><span data-preserver-spaces=\"true\">What is native lazy loading?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Besides lazy loading, there is a strategy that is growing in popularity is native lazy loading.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">It\u2019s a new feature in modern web browsers such as Chrome, Firefox, and Opera that implement the lazy loading of images and videos without using JavaScript or plugin. This means that it automatically handles the lazy loading of images and videos without requiring any external code, using an HTML attribute.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This feature is valuable in improving the performance and accessibility of web pages and reducing the JavaScript code.\u00a0<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">How does native lazy loading work?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Native lazy loading is a valuable and easy technique that works by simply adding the \u2018loading\u2019 attribute to the \u2018img\u2019 and \u2018iframe\u2019 tags. The loading attribute primarily has three values, namely, lazy, eager, and auto.\u00a0<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Lazy:\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">When you use the lazy attribute, the browser will load the media, including images and videos, when they are close to the user\u2019s viewport. This means that the media will load when it reaches the set distance from the viewport.<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Eager:\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">When you use the eager attribute, the browser will load the media, including images and videos, immediately, as the page loads without considering its location.<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Auto:\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">When you use the auto attribute, the browser will load the media, including images and videos, by default, as it loads in the absence of the loading attribute. It may be influenced by the user\u2019s network speed and other factors.<\/span><strong><span data-preserver-spaces=\"true\">\u00a0\u00a0<\/span><\/strong><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">How does lazy loading differ from native lazy loading?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Both are valuable in improving the performance of web pages but differ in working. Lazy loading requires JavaScript code or a plugin, whereas native lazy loading is an inbuilt feature of modern browsers and works using the attribute functionality.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Since lazy loading uses Javascript, it gives you more flexibility to customize the lazy loading behavior. On the contrary, native lazy loading is a lightweight and efficient solution as it does not require any coding.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Both solutions are effective on their own, but the only drawback of native lazy loading is that it is not supported on all browsers.<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">How to add lazy loading in WordPress?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Now that you\u2019ve understood everything there is to know about lazy loading, it\u2019s time to implement it on your website. In this section, we\u2019ll cover three effective methods to add lazy loading. You can choose the best that meets your need.\u00a0<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">1. Upgrade to a higher WordPress version.<\/span><\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">To ease the lazy loading concerns of webmasters, WordPress versions 5.4 and higher, by default, come with the in-built image lazy loading feature. Thus, updating to a higher version of WordPress will automatically enable lazy loading on your site.\u00a0\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This is the easiest method of implementing lazy loading on websites. However, this method does not give you customization options, so you won\u2019t be able to control which images to lazy load on your site.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Also, it\u2019s crucial to note that every version starting with 5.4 up to the most recent one has a different lazy loading functionality. For instance, WordPress 5.9 comes with the improved Large Contentful Paint feature, which is not available in older versions. So, users of versions lower than 5.9 won\u2019t be benefited from the advanced features. Thus, it\u2019s preferable to upgrade to WordPress 5.9. Additionally, if you want to have more control over your site\u2019s lazy loading, you can consider the other methods we\u2019ve discussed below.\u00a0<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">2. Enable Native Lazy loading for your images<\/span><\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">We\u2019ve covered native lazy loading in detail above to help you take advantage of this method.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To implement native lazy loading, you need to add the loading attribute, &lt;img loading= \u201clazy\u201d&gt;, to the images you want to lazy load. This will automatically lazy load the image when it is loaded in the supported browsers.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The following is an example that can guide you on how you can use it for your images.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">&lt;img src=\u201dimage-name.png\u201d loading=\u201dlazy\u201d alt=\u201dalt attribute\u201d width=\u201d200\u2033 height=\u201d200\u2033&gt;<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The native lazy loading method is effective but ideal for lazy loading some images, not for a website with large multimedia. This is because implementing native lazy loading for each image can be time-consuming, especially if you have a lot of media files on your site.\u00a0 \u00a0<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">3. Using a WordPress plugin.\u00a0<\/span><\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">The next and most effective method to implement lazy loading in WordPress is to use a lazy loading plugin. This is because all browsers do not support lazy loading for images and videos.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">WordPress plugins allow you to implement lazy loading on your site easily and effectively and also give you more control over which images should be lazy load. Here we\u2019ll cover three WordPress lazy-loading plugins that are featureful and works well.<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">1. Image Optimization &amp; Lazy Load\u00a0\u00a0<\/span><\/strong><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2837\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Image-Optimization-by-Optimole-plugin.png\" alt=\"\" width=\"1230\" height=\"637\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Image-Optimization-by-Optimole-plugin.png 1230w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Image-Optimization-by-Optimole-plugin-300x155.png 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Image-Optimization-by-Optimole-plugin-1024x530.png 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Image-Optimization-by-Optimole-plugin-768x398.png 768w\" sizes=\"auto, (max-width: 1230px) 100vw, 1230px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">The first effective plugin in our list is <a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\">Image Optimization &amp; Lazy Load<\/a> by Optimole. The plugin is free to use and supports all image types. It allows you to optimize your images to ensure optimal user experience.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The plugin is designed in a way that when experiencing a slower network, the plugin itself downgrades the quality of the images. In addition, it saves storage space by storing the images in its cloud library.\u00a0\u00a0<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">2. A3 Lazy Load<\/span><\/strong><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2838\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/a3-lazy-load-plugin.jpg\" alt=\"\" width=\"1348\" height=\"433\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/a3-lazy-load-plugin.jpg 1348w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/a3-lazy-load-plugin-300x96.jpg 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/a3-lazy-load-plugin-1024x329.jpg 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/a3-lazy-load-plugin-768x247.jpg 768w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">The next effective lazy loading plugin in our list is <a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\">a3Lazy Load<\/a>. It\u2019s a free, mobile-oriented plugin that is compatible with major popular tools sucha s AMP and WebP as well as WP 5.9 version.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Along with offering basic image lazy loading features, the plugin also offers video lazy loading features. In addition, the other valuable features of the a3 Lazy loading plugin include WebP image support, iframe lazy load, and multisite support.\u00a0<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">3. Smush<\/span><\/strong><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2839\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Smush-Lazy-Load-Plugin.png\" alt=\"\" width=\"1267\" height=\"636\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Smush-Lazy-Load-Plugin.png 1267w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Smush-Lazy-Load-Plugin-300x151.png 300w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Smush-Lazy-Load-Plugin-1024x514.png 1024w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/07\/Smush-Lazy-Load-Plugin-768x386.png 768w\" sizes=\"auto, (max-width: 1267px) 100vw, 1267px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\">Smush<\/a> is an effective plugin on our list that is very popular and provides you with easy image optimization features and supports lazy loading. It lets you easily configure and set various plugin settings in a few clicks.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In addition, it comes with other valuable features such as multisite support, image size detection, and valuable image compression tools that let you optimize your images effectively.<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">Practical Lazy Loading Tips for your website<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Lazy loading is an effective strategy to improve the loading speed and performance of websites. However, you need to implement it properly to be benefited from it. The following are a few tips that you must focus on while lazy loading your website.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">1. Avoid lazy loading the images that are on the top because they are visible when loading.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">2. Ensure to choose the placeholder smartly, such as a solid color or a low-quality image.\u00a0\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">3. Ensure to add a buffer time for your images so that they are ready before entering the viewport of the visitor.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">4. Consider specifying the dimensions of the image container to avoid sudden layout shifts.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">5. Consider implementing lazy loading with lengthy posts with more images.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">All these will help you implement lazy loading on your site effectively.\u00a0<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">Give your website a boost with Lazy loading!<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">Lazy loading is a valuable technique that helps you increase the performance and loading speed of your website by loading images and other media only when they are required. This helps save valuable resources such as bandwidth and also helps you reduce the loading time, which boosts the user experience as well as improves other SEO factors of the website. In this blog, we\u2019ve covered everything there is to know about lazy loading in WordPress. To implement lazy loading in WordPress, you can either upgrade to the latest WP version, use native lazy loading, or choose a plugin that best meets your needs.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Implement lazy loading on your website if you are willing to enhance the loading speed and performance of a website. This will not only make your site fast and responsive but will provide a seamless experience for your website visitors.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">We hope this guide has helped you understand and assist you in implementing lazy loading in WordPress easily and successfully.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Read Also: <a href=\"https:\/\/hostkicker.com\/blog\/how-to-optimize-images-for-seo\/\">How to do image optimization for SEO.<\/a><\/span><\/p>\n<p>Read Also: <a href=\"https:\/\/hostkicker.com\/blog\/how-to-create-additional-image-sizes-in-wordpress\/\">How to create additional image sizes in WordPress.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this fast-paced digital world, a slow-loading website can significantly hamper a website\u2019s performance and its presence on the internet. There could be multiple reasons for a slow-loading website, but images are one of the major contributors. No doubt, images make a valuable addition to the website\u2019s content, making it interesting, engaging, and effective in [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":2836,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.3 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is lazy loading in WordPress: how to enable it on your site? - Hostkicker<\/title>\n<meta name=\"description\" content=\"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is lazy loading in WordPress: how to enable it on your site?\" \/>\n<meta property=\"og:description\" content=\"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostkicker\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-13T09:12:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"693\" \/>\n\t<meta property=\"og:image:height\" content=\"511\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olivia Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/\"},\"author\":{\"name\":\"Olivia Smith\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\"},\"headline\":\"What is lazy loading in WordPress: how to enable it on your site?\",\"datePublished\":\"2023-07-13T09:12:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/\"},\"wordCount\":1823,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Lazy-Loading-in-WoprPress.jpg\",\"articleSection\":[\"Wp tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/\",\"name\":\"What is lazy loading in WordPress: how to enable it on your site? - Hostkicker\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Lazy-Loading-in-WoprPress.jpg\",\"datePublished\":\"2023-07-13T09:12:01+00:00\",\"description\":\"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Lazy-Loading-in-WoprPress.jpg\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Lazy-Loading-in-WoprPress.jpg\",\"width\":693,\"height\":511,\"caption\":\"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve the performance by delaying the loading times.\u00a0\u00a0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is lazy loading in WordPress: how to enable it on your site?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"name\":\"Hostkicker\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\",\"name\":\"Hostkicker\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"width\":940,\"height\":218,\"caption\":\"Hostkicker\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\",\"name\":\"Olivia Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"caption\":\"Olivia Smith\"},\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/author\\\/olivia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is lazy loading in WordPress: how to enable it on your site? - Hostkicker","description":"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0","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:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/","og_locale":"en_US","og_type":"article","og_title":"What is lazy loading in WordPress: how to enable it on your site?","og_description":"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0","og_url":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/","og_site_name":"Hostkicker","article_published_time":"2023-07-13T09:12:01+00:00","og_image":[{"width":693,"height":511,"url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","type":"image\/jpeg"}],"author":"Olivia Smith","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Olivia Smith","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#article","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/"},"author":{"name":"Olivia Smith","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660"},"headline":"What is lazy loading in WordPress: how to enable it on your site?","datePublished":"2023-07-13T09:12:01+00:00","mainEntityOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/"},"wordCount":1823,"commentCount":0,"publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","articleSection":["Wp tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/","url":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/","name":"What is lazy loading in WordPress: how to enable it on your site? - Hostkicker","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#primaryimage"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","datePublished":"2023-07-13T09:12:01+00:00","description":"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve performance by delaying the loading times.\u00a0\u00a0","breadcrumb":{"@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#primaryimage","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","width":693,"height":511,"caption":"Lazy loading in WordPress is used to optimize the loading speed of a web page and improve the performance by delaying the loading times.\u00a0\u00a0"},{"@type":"BreadcrumbList","@id":"https:\/\/hostkicker.com\/blog\/what-is-lazy-loading-in-wordpress-how-to-enable-it-on-your-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hostkicker.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is lazy loading in WordPress: how to enable it on your site?"}]},{"@type":"WebSite","@id":"https:\/\/hostkicker.com\/blog\/#website","url":"https:\/\/hostkicker.com\/blog\/","name":"Hostkicker","description":"Blog","publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hostkicker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hostkicker.com\/blog\/#organization","name":"Hostkicker","url":"https:\/\/hostkicker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","width":940,"height":218,"caption":"Hostkicker"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660","name":"Olivia Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","caption":"Olivia Smith"},"url":"https:\/\/hostkicker.com\/blog\/author\/olivia\/"}]}},"jetpack_featured_media_url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/06\/Lazy-Loading-in-WoprPress.jpg","_links":{"self":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":3,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2833\/revisions"}],"predecessor-version":[{"id":2841,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2833\/revisions\/2841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media\/2836"}],"wp:attachment":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media?parent=2833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/categories?post=2833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/tags?post=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}