would lazy-loading img src negatively impact SEO

问题:

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 considering lazy loading them by initially setting img.src="" and then setting them after onload. Note that this is not ajax loading of html fragments. the image html along with the alt text is present. it's just the image src is deferred.

Does anyone have any idea as to whether this may harm SEO or lead to a google penalty box now that they are measuring sitespeed?

回答1:

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.

回答2:

From a pure SEO perspective, you shouldn't be indexing search result pages. You should index your home page and your product detail pages, and have a spiderable method of getting to those pages (category pages, sitemap.xml, etc.)

Here's what Matt Cutts has to say on the topic, in a post from 2007:

In general, we’ve seen that users usually don’t want to see search results (or copies of websites via proxies) in their search results. Proxied copies of websites and search results that don’t add much value already fall under our quality guidelines (e.g. “Don’t create multiple pages, subdomains, or domains with substantially duplicate content.” and “Avoid “doorway” pages created just for search engines, or other “cookie cutter” approaches…”), so Google does take action to reduce the impact of those pages in our index.

http://www.mattcutts.com/blog/search-results-in-search-results/

This isn't to say that you're going to be penalised for indexing the search results, just that Google will place little value on them, so lazy-loading the images (or not) won't have much of an impact.

回答3:

There are some different ways to approach this question.

Images don't block load. Javascript does; stylesheets do to an extent (it's complicated); images do not. However, they will consume http connections, of which the browser will only fire off 2 per domain at a time.

So, what you can do that should be worry-free and the "Right Thing" is to do a poor man's CDN and just drop them on www1, www2, www3, etc on your own site and servers. There are a number of ways to do that without much difficulty.

On the other hand: no, it shouldn't affect your SEO. I don't think Google even bothers to load images, actually.

回答4:

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)

回答5:

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

回答6:

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) :)

回答7:

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.

回答8:

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.