Slick: HTML5 validation fail with lazy load

[ghost]

The lazy load feature uses the data-lazy attribute of the IMG tag. Unfortunately, this means that the src attribute is missing, which causes HTML5 validation to fail.

Error message from W3C validator:
Element img is missing required attribute src.

Reference paragraph from HTML5 spec:
The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

A possible solution, is to use a src attribute with a place-holder image (low res thumb, animated loader, small icon, etc). For example, another script which support lazy loading, uses the following IMG tag format:

<img src="icon.png" data-src="image250x.jpg" data-src-retina="image500x-retina.jpg">

[simeydotme]

This is not a bug, and you've solved your own problem :smile:
HTML Validation is not relevant today :confused:

[ghost]

I did not solve the problem, I only offered a possible solution. If we try to use the src attribute, then it breaks the lazy load engine. I also tried using a small place-holder image and it completely broke the slider height.

Why is HTML5 validation not relevant? I believe it is more relevant than before, even google gives higher marks in their search engine to sites with valid HTML5 code, over others.

[simeydotme]

Looking through the code, adding a src attribute doesn't break the lazy-loading; it just doesn't add the slick-loading class (https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L498)

And actually even if you supply a src it will override that with the data-src attribute (https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1148-L1160) meaning you can still apply a low-res on load. Which is the solution you mentioned :smile:

If you can provide a JSFiddle detailing the problem you're having I'll be happy to look at it :)

Regarding your statement that Google cares about valid HTML5:

"So Google does not penalize you if you have invalid HTML because there would be a huge number of webpages like that and some people know the rules and then decided to make things a little bit faster or to tweak things here there and so their pages don't validate and there are enough pages they don't validate that we said OK this would actually hurt search quality if we said only the pages that validate are allowed to rank or rank those a little bit higher."

http://searchenginewatch.com/sew/how-to/2297152/does-google-penalize-for-invalid-html-matt-cutts-says-no

My comment about valid HTML is that browsers are now super forgiving and web apps have got to do some pretty crazy things outside of the HTML5 validation engine's scope in order to give users responsive feeling experiences :cry: - It's not about writing websites to satisfy a syntax-checking algorithm anymore, that's not relevant. Today it's about giving your users a good experience.

[Stolzenhain]

I'm chiming in on this: It's pretty common to supply a src tag to lazyloaders, because this way you can easier style the unloaded element and speed up page rendering times. (e.g. a blank png the same dimensions as the final image)

This is actually common for lazyloaders and hasn't got to do with validation at all (which would be still nice; HTML5 is pretty forgiving anyway).

[v3nt]

+1,

common to supply a src tag to lazyloaders

[akolinski]

On the topic of HTML validation as of 21 August 2018. You are correct in saying that HTML validation has no immediate effect on giving your website a boost in search.

Google said in 2009 "Pages that validate do not get a ranking boost". Google said in July 2015 that "Bad HTML validation doesn't hurt rankings but can impact structured data".

• https://www.seroundtable.com/google-invalid-html-concern-21556.html

  Either way Google states:

“We do recommend using valid HTML, it’s not likely to be a factor in how Google crawls and indexes your site.”

• https://www.searchenginejournal.com/google-valid-html/258881/ (2018 relevant article)

Conclusion: Run your site through W3C validator and get rid of any mistakes. The 2018 article above goes through many other benefits for doing so.

[tomaszpoliszuk]

<noscript> tag exists for a reason :)