Merri/react-lazy

Google bot compatibility

Closed this issue · 2 comments

oyeanuj commented

Hi @Merri, Thank you for putting out this library! I noticed that you use the noscript solution to make content crawlable. Another popular library LazySizes uses the logic described in this link - aFarkas/lazysizes#215 (comment)

Wondering your thoughts on the two solutions, and if it would make sense to switch?

Thank you!

Merri commented

The current logic via noscript works for more than just images "for free", you can load anything lazily with no additional code. "Disabled JavaScript" support also comes for free, and outputted HTML syntax remains as short as possible. One thing I dislike in data-src pattern is that if you want valid HTML you do have to add src with a data image (usually 1x1 pixel transparent gif) which adds bloat to the HTML. This is a non-issue when using noscript.

On downside performance on insertion time is worse as DOM manipulation causes removal of noscript element and rendering new stuff from scratch, where LazySizes can just add attributes to an existing element. Doing everything via React also forces some bloat that can't be easily removed. In the other hand I'm a bit sceptical on LazySizes actually working properly together with React, because I don't see how Virtual DOM would remain synced with DOM manipulated by LazySizes, thus causing errors the next time React does diffing while rendering elements.

So in short:

  • noscript works for any lazy loading with no additional code; data-src pattern requires special cases
  • noscript gives no-JS support; data-src pattern would require duplicating HTML syntax
  • noscript has shorter HTML footprint; data-src pattern results in much more syntax if HTML is kept valid or if no-JS support is added
  • data-src pattern has better DOM performance; noscript has to be replaced by a newly generated image element

So no, I don't see a reason to switch. Although with React you don't need to expose data-src stuff in the first place, you could just have nothing or those 1x1 px images, which would result in short HTML syntax and nice speed. In the other hand writing support specific to Google Bot doesn't sound a great idea to me, I rather write code that is as agnostic of specific vendors as possible and instead prefer code that does things right from the viewpoint of standards.

  • 👍1
oyeanuj commented

@Merri Thank you for the detailed response - that is very helpful to understand. Having been reading up on lazySizes and this blog post made me wonder about the efficacy of solutions. So this response was helpful!