would lazy-loading img src negatively impact SEO

Question

I\'m working on a shopping site. We display 40 images in our results. We\'re looking to reduce the onload time of our page, and since images block the onload event, I\'m con

Answer 1

I have been added lazyload to my site (http://www.amphorashoes.ro) and i have better pagerank from google (maybe because the content is loading faster) :)

Answer 2

I have to disagree with Alex. Google recently updated its algorithm to account for page load time. According to the official Google blog

...today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

However, it is important to keep in mind that the most important aspect of SEO is original, quality content.

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Answer 3

We display 40 images in our results.

first question, is this page even a landing page? is it targeted for a specific keyword? internal search result pages are not automatically landing pages. if they are not a landingpage, then do whatever you want with them (and make sure they do not get indexed by google).

if they are a landingpages (a page targeted for a specific keyword) the performance of the site is indeed important, for the conversion rate of these pages and indirectly (and to a smaller extend also directly) also for google. so a kind of lazy load logic for pages with a lot of images is a good idea.

i would go for:

load the first two (product?) images in an SEO optimized way (as normal HTML, with a targeted alt text and a targeted filename). for the rest of the images make a lazy load logic. but not just setting the src= to blank, but insert the whole img tag onload (or onscroll, or whatever) into your code.

having a lot of broken img tags in the HTML for non javacript users (i.e.: google, old mobile devices, textviewer) is not a good idea (you will not get a penalty as long as the lazy loaded images are not missleading) but shitty markup is never a good idea.

for general SEO question please visit https://webmasters.stackexchange.com/ (stack overflow is more for programing related questions)

Answer 4

first,don't use src="",it may hunt your page,make a small loading image instead it. second,I think it won't affect SEO, actually we always use alt="imgDesc.." to describe this image, and spider may catch this alt but not analyse this image what id really be.

Answer 5

Images don't block anything, they are already lazy loaded. The onload event notifies you that all of the content has been downloaded, including images, but that is long after the document is ready.

It might hurt your rank because of the lost keywords and empty src attributes. You'll probably lose more than you gain - you're better off optimizing your page in other ways, including your images. Gzip + fewer requests + proper expires + a fast static server should go a long way. There is also a free CDN that might interest you.

I'm sure google doesn't mean for the whole web to remove their images from source code to gain a few points. And keep in mind that they consider anything under 3s to be good loading times, there's plenty of room to wiggle before resorting to voodoo techniques.

Answer 6

I found this tweet regarding Google's SEO

There are various ways to lazy-load images, it's certainly worth thinking about how the markup could work for image search indexing (some work fine, others don't). We're looking into making some clearer recommendations too.

12:24 AM - 28 Feb 2018

John Mueller - Senior Webmaster Trends Analyst

From what I understand, it looks like it depends on how you implement your lazy loading. And Google is yet to recommend an approach that would be SEO friendly.

Theoretically, Google should be running the scripts on websites so it should be OK to lazy load. However, I can't find a source(from Google) that confirms this.

So it looks like crawling lazy loaded or deferred images may not be full proof yet. Here's an article I wrote about lazy loading image deferring and seo that talks about it in detail.

Here's working library that I authored which focuses on lazy loading or deferring images in an SEO friendly way .

What it basically does is cancel the image loading when DOM is ready and continue loading the images after window load event.

...
  <div>My last DOM element</div>
  <script>
    (function() {
      // remove the all sources!
    })();

    window.addEventListener("load", function() {
       // return all the sources!
    }, false);
  </script>
</body>

You can cancel loading of an image by removing it's src value or replacing it with a placeholder image. You can test this approach with Google Fetch You have to make sure that you have the correct src until DOM is ready so to be sure that Google Fetch will capture your imgs original src.