Hi, Gwil (and guys),

and thanks for the plugin, I have eventually gotten myself to trying it out. I have implemented the first basic part and it seems to be working - I have the xml charset, noscript src and the base64 code as well and it seems to be working fine, there is an obvious improvement in page load. However, I see that the Czech characters in alt texts are broken when viewing the page source (although the DOMinspector displas it okay). Does it pose any SEO concerns and if so, can it be fixed, please?

To be more specific, I for instance have a block of 6 <figures> and whether I am applying the <cms:lazy_load> tag onto the entire block or on each img separately, I get the cource like this:

Code: Select all

<div class="row flex">

     <figure itemscope itemtype="https://schema.org/Product">
          <?xml encoding="UTF-8">
          <noscript><img itemprop="image" src="https://www.winkcake.cz/couch/uploads/image/img_8856.JPG" alt="Tartaletky s &#269;okol&aacute;dov&yacute;m kr&eacute;mem"></noscript>
          <img itemprop="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Tartaletky s &#269;okol&aacute;dov&yacute;m kr&eacute;mem" data-src="https://www.winkcake.cz/couch/uploads/image/img_8856.JPG" class="lazyload">
          <figcaption>
               <h3 itemprop="name" >Tartaletky s čokoládovým krémem</h3>
                  <span itemprop="description">a čokoládovou ganache, ozdobené plátky mandlí a maceškou</span>
          </figcaption>
     </figure>

     ...and 5 more similar figures

</div><!-- end row -->

...I even tried removing the schema, in case there was some interference, CZ characters still replaced with html entities. The only suspect I can see is that in the DOM inspctor (where the charset is good) the item have class "lazyloaded", while when viewing the page source (html entities) it is only "lazyload".

If needed, please have a look at the whole picture at https://www.winkcake.cz/tartaletky/. Does that look okay to you, or am I missing something, please? Would looking into the updated script fix this?

Thanks in advance!

[KK]

@MiB, as far as I know, characters encoded as HTML entities are treated exactly the same as non-encoded characters in terms of textual contents.
I wouldn't worry about this issue if I were you.

Thanks, @Kk, I thought so. just wanted to be sure as it looks so ugly.

Any suggestions on how to avoid reflow?

@francisknightley,
There are several ways to deal with the reflow issue, depending on your specific situation. Essentially, the browser has to already know the height and width of the image before it's loaded. There are a number of methods to acheive that.

1. You can use the old-timey method of explicitly declaring the size of the image in your markup.

2. The lazysizes.js documentation has a lot of useful information, including a section covering this very issue. It describes a slick CSS intrinsic ratio technique. https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps I highly recommend all of the lazysizes.js documentation.

3. I believe that @Gwil's fork of this module includes some pre-processing to include a properly sized placeholder. https://www.couchcms.com/forum/viewtopic.php?f=8&t=11250&start=0#p32861

4. For myself, I've used get_image_size (https://www.couchcms.com/forum/viewtopic.php?f=8&t=10386&p=25442#p26494) to figure out the aspect ratio of the image, then used javascript to calculate the correct size of the placeholder image. I posted the js code here: https://github.com/aFarkas/lazysizes/issues/458#issuecomment-365809627

It's an important thing to address with lazyloading. Otherwise, you can get a very janky user experience. The correct technique will depend on your own needs and preferences.