{"id":13433,"date":"2019-06-25T14:36:16","date_gmt":"2019-06-25T18:36:16","guid":{"rendered":"https:\/\/www.knownhost.com\/blog\/?p=13433"},"modified":"2020-03-23T16:13:59","modified_gmt":"2020-03-23T20:13:59","slug":"how-lazy-loading-images-can-speed-up-your-site","status":"publish","type":"post","link":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/","title":{"rendered":"How Lazy Loading Images Can Speed Up Your Site"},"content":{"rendered":"

Updated June 25, 2019<\/h2>\n

 <\/p>\n

Lazy loading images is a technique to greatly speed up website loading times by only loading what’s immediately visible, saving other images below the scroll for loading later, as the person scrolls down.\u00a0 Done correctly, web visitors would never notice this lazy loading was happening.\u00a0 They would notice pages load much quicker<\/strong> – improving satisfaction with your site.<\/p>\n

 <\/p>\n

Nothing annoys a web user more than a site that takes forever to load. By forever, we mean three seconds or more<\/strong>. Research shows that the rise of devices in the digital age has resulted in the decline in human attention span, which is now less than the ill-focused goldfish.<\/p>\n

 <\/p>\n

What this means for you is that you cannot afford a second of delay<\/strong> in load times. Users tend to care more about speed than aesthetic design, nifty functionality, and other things people add to websites. So, generally, your goal should be to deliver a user-friendly experience that leaves users feeling nice about visiting your site \u2013 and load times contributed to that.<\/p>\n

 <\/p>\n

Load time is a significant contributing factor to page abandonment<\/strong> \u2013 the average visitor has no patience for a page that takes more than three seconds to load. However, with large payloads and many requests, it may be impossible to achieve this level of speed. In fact, research by Google revealed that an average mobile landing page takes 22 seconds to load fully. This can be discouraging, considering 53% of people leave a mobile page if it takes longer than three seconds<\/strong> to load.<\/p>\n

 <\/p>\n

There\u2019s an effortless way to increase the load speed of your website by an amazing amount<\/strong> \u2013 a way to offload or even avoid loading page assets until they are required<\/strong>. This can give your site an edge over your peers because both search engines and your users will like your pages better.<\/p>\n

 <\/p>\n

 <\/p>\n

Lazy Loading Explained<\/h2>\n

 <\/p>\n

Lazy loading (or on-demand loading) is the practice of delaying initialization or load of objects or resources until they are actually needed<\/strong> to save system resources and improve performance<\/strong>. For instance, if a web page has an image that the visitor has to scroll down to view, you can put a placeholder and lazy load the whole picture only when the visitor gets to the browser\u2019s viewpoint. So basically, on-demand loading helps in loading only the needed section and delays the other parts, until the user needs to use them.<\/p>\n

 <\/p>\n

You\u2019ve probably seen lazy loading in action on platforms like Medium, Pinterest, or Facebook and it goes something like this:<\/p>\n

1)<\/strong> You click on a page and scroll<\/strong> down through the content<\/p>\n

2)<\/strong> When you get to an image, you see a blurry image that acts as the placeholder<\/strong><\/p>\n

3)<\/strong> But once the image gets to the browser\u2019s viewpoint, the blurry image gets swapped with the actual image immediately<\/strong><\/p>\n

 <\/p>\n

Using Lazy Loading On Your Blog<\/strong><\/h3>\n

 <\/p>\n

Implementing lazy loading of images on a WordPress site is a breeze.\u00a0 Simply install the Lazy Load by WP Rocket plugin<\/strong> from the WordPress repository, activate and away you go.<\/p>\n

 <\/p>\n

The lazy loading plugin will automatically handle all the behind the scenes, swapping images in as necessary, and slashing your page load times.<\/p>\n

 <\/p>\n

Lazy Savings<\/b><\/h2>\n

 <\/p>\n

Images play a critical role in websites. A study by HTTP Archive<\/a> revealed that photos make more than 60% of data loaded on web pages. Considering their role in sites \u2013 whether its fashion, news, e-commerce, blog or travel website \u2013 image optimization is essential<\/strong>, and maybe the lowest hanging fruit when seeking for ways to speed up your image-packed platform. Among the different ways of speeding up a site, loading fewer resources offer the easiest and fastest way to get incredible results<\/strong>.<\/p>\n

 <\/p>\n

 <\/p>\n

Optimizes Response Time<\/strong><\/h3>\n

 <\/p>\n

Response time is the amount of time it takes the UI interface to be responsive to visitors and the website application to load. Lazy loading boosts the response time by splitting into multiple bundles and loading them when desired.<\/p>\n

 <\/p>\n

Minimizes Resource Consumption<\/strong><\/h3>\n

 <\/p>\n

Slow load times cause frustration for site users because people are used to having web pages load in three or fewer seconds. Research shows that more than 53%<\/a> of mobile users will give up beyond the three second mark. But thanks to lazy loading, you can reduce the page time because it reduces the number of resources loading<\/strong>, and only loads the code bundle that\u2019s required at a time.<\/p>\n

 <\/p>\n

When you send the user code that\u2019s not needed, you not only waste the resources from your end but from the user\u2019s end as well. Besides, you will need more bandwidth to move the data, more CPU to analyze and process them, and more memory to store the data. These assets consume resources from other crucial assets that require it urgently, consequently slowing up a site.<\/p>\n

 <\/p>\n

If you think about it, what\u2019s the point of loading resources that the visitor won\u2019t need, like images they won\u2019t scroll down to?<\/p>\n

 <\/p>\n

Conclusion<\/h2>\n

 <\/p>\n

Using lazy loading of images is a technique, like image compression, that lets you speed up the performance of your website without spending more on hardware, software, or administrative time.\u00a0 Lazy loading is an approach that you can put in place which will speed up every page of the site.<\/p>\n

 <\/p>\n

Improve your website loading speed, enjoy better search rankings, love the enhanced user engagement<\/a><\/strong> (user experience) – and let that help fuel improved website conversions<\/strong> and profitability.\u00a0 Minimum effort, maximum gain<\/strong>.<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Updated June 25, 2019   Lazy loading images is a technique to greatly speed up website loading times by only loading what’s immediately visible, saving other images below the scroll for loading later, as the person scrolls down.\u00a0 Done correctly, web visitors would never notice this lazy loading was happening.\u00a0 They would notice pages load […]<\/p>\n","protected":false},"author":157,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1452],"tags":[1900,2287,474],"class_list":["post-13433","post","type-post","status-publish","format-standard","hentry","category-basics","tag-images","tag-lazy-loading","tag-speed"],"yoast_head":"\nHow Lazy Loading Images Can Speed Up Your Site - KnownHost<\/title>\n<meta name=\"description\" content=\"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Lazy Loading Images Can Speed Up Your Site - KnownHost\" \/>\n<meta property=\"og:description\" content=\"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/\" \/>\n<meta property=\"og:site_name\" content=\"KnownHost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/KnownHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-25T18:36:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-23T20:13:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.knownhost.com\/blog\/wp-content\/uploads\/2019\/05\/Jets-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Robb Sands\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@KnownHost\" \/>\n<meta name=\"twitter:site\" content=\"@KnownHost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robb Sands\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/\"},\"author\":{\"name\":\"Robb Sands\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6a7331d51d3c6e434f490e4a4de2f44\"},\"headline\":\"How Lazy Loading Images Can Speed Up Your Site\",\"datePublished\":\"2019-06-25T18:36:16+00:00\",\"dateModified\":\"2020-03-23T20:13:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/\"},\"wordCount\":934,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#organization\"},\"keywords\":[\"images\",\"lazy loading\",\"speed\"],\"articleSection\":[\"Basics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/\",\"url\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/\",\"name\":\"How Lazy Loading Images Can Speed Up Your Site - KnownHost\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-06-25T18:36:16+00:00\",\"dateModified\":\"2020-03-23T20:13:59+00:00\",\"description\":\"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/how-lazy-loading-images-can-speed-up-your-site\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Lazy Loading Images Can Speed Up Your Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/\",\"name\":\"KnownHost.com\",\"description\":\"Quality Managed Web Hosting by KnownHost\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#organization\",\"name\":\"KnownHost, LLC\",\"url\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/logo.png\",\"width\":1200,\"height\":400,\"caption\":\"KnownHost, LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/KnownHost\\\/\",\"https:\\\/\\\/x.com\\\/KnownHost\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/knownhost\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6a7331d51d3c6e434f490e4a4de2f44\",\"name\":\"Robb Sands\",\"url\":\"https:\\\/\\\/www.knownhost.com\\\/blog\\\/author\\\/rsands\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Lazy Loading Images Can Speed Up Your Site - KnownHost","description":"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.","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:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/","og_locale":"en_US","og_type":"article","og_title":"How Lazy Loading Images Can Speed Up Your Site - KnownHost","og_description":"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.","og_url":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/","og_site_name":"KnownHost","article_publisher":"https:\/\/www.facebook.com\/KnownHost\/","article_published_time":"2019-06-25T18:36:16+00:00","article_modified_time":"2020-03-23T20:13:59+00:00","og_image":[{"width":750,"height":500,"url":"https:\/\/www.knownhost.com\/blog\/wp-content\/uploads\/2019\/05\/Jets-3.jpg","type":"image\/jpeg"}],"author":"Robb Sands","twitter_card":"summary_large_image","twitter_creator":"@KnownHost","twitter_site":"@KnownHost","twitter_misc":{"Written by":"Robb Sands","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/#article","isPartOf":{"@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/"},"author":{"name":"Robb Sands","@id":"https:\/\/www.knownhost.com\/blog\/#\/schema\/person\/e6a7331d51d3c6e434f490e4a4de2f44"},"headline":"How Lazy Loading Images Can Speed Up Your Site","datePublished":"2019-06-25T18:36:16+00:00","dateModified":"2020-03-23T20:13:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/"},"wordCount":934,"commentCount":1,"publisher":{"@id":"https:\/\/www.knownhost.com\/blog\/#organization"},"keywords":["images","lazy loading","speed"],"articleSection":["Basics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/","url":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/","name":"How Lazy Loading Images Can Speed Up Your Site - KnownHost","isPartOf":{"@id":"https:\/\/www.knownhost.com\/blog\/#website"},"datePublished":"2019-06-25T18:36:16+00:00","dateModified":"2020-03-23T20:13:59+00:00","description":"Lazy loading images can be the perfect solution to boost your websites speed. Learn how and why lazy loading images might be the solution for you.","breadcrumb":{"@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.knownhost.com\/blog\/how-lazy-loading-images-can-speed-up-your-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knownhost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Lazy Loading Images Can Speed Up Your Site"}]},{"@type":"WebSite","@id":"https:\/\/www.knownhost.com\/blog\/#website","url":"https:\/\/www.knownhost.com\/blog\/","name":"KnownHost.com","description":"Quality Managed Web Hosting by KnownHost","publisher":{"@id":"https:\/\/www.knownhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.knownhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.knownhost.com\/blog\/#organization","name":"KnownHost, LLC","url":"https:\/\/www.knownhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.knownhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.knownhost.com\/blog\/wp-content\/uploads\/2021\/04\/logo.png","contentUrl":"https:\/\/www.knownhost.com\/blog\/wp-content\/uploads\/2021\/04\/logo.png","width":1200,"height":400,"caption":"KnownHost, LLC"},"image":{"@id":"https:\/\/www.knownhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/KnownHost\/","https:\/\/x.com\/KnownHost","https:\/\/www.linkedin.com\/company\/knownhost"]},{"@type":"Person","@id":"https:\/\/www.knownhost.com\/blog\/#\/schema\/person\/e6a7331d51d3c6e434f490e4a4de2f44","name":"Robb Sands","url":"https:\/\/www.knownhost.com\/blog\/author\/rsands\/"}]}},"_links":{"self":[{"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/posts\/13433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/users\/157"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/comments?post=13433"}],"version-history":[{"count":0,"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/posts\/13433\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/media?parent=13433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/categories?post=13433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knownhost.com\/blog\/wp-json\/wp\/v2\/tags?post=13433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}