Seo improvements https://web.dev/lazy-loading-best-practices/#wrong-no-js

ihorvansach · ihorvansach · commit 334fb38822c3 · 2020-07-10T17:29:30.000+03:00
diff --git a/Plugin/BlockPlugin.php b/Plugin/BlockPlugin.php
@@ -78,7 +78,11 @@ public function afterToHtml(\Magento\Framework\View\Element\AbstractBlock $block
         $html = str_replace($pixelSrc, $tmpSrc, $html);
 
         $html = preg_replace('#<img\s+([^>]*)(?:src="([^"]*)")([^>]*)\/?>#isU', '<img ' . $pixelSrc .
-            ' data-original="$2" $1 $3/>', $html);
+            ' data-original="$2" $1 $3/>
+            <noscript>
+                <img src="$2"  $1 $3  />
+            </noscript>
+           ', $html);
 
         $html = str_replace($tmpSrc, $pixelSrc, $html);
         $html = str_replace(self::LAZY_TAG, '', $html);
diff --git a/view/frontend/layout/default.xml b/view/frontend/layout/default.xml
@@ -9,6 +9,7 @@
 -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
+        <attribute name="class" value="mflazyzoad-no-js" />
         <referenceBlock name="after.body.start">
             <block class="Magefan\LazyLoad\Block\Lazy" name="magefan.lazyload" template="Magefan_LazyLoad::lazy.phtml" >
                 <arguments>
diff --git a/view/frontend/templates/lazy.phtml b/view/frontend/templates/lazy.phtml
@@ -6,9 +6,15 @@
  * Glory to Ukraine! Glory to the heroes!
  */
 ?>
-
+<style>
+    .mflazyzoad-no-js [data-original],
+    .mflazyzoad-no-js [data-originalset] {
+        display: none;
+    }
+</style>
 <script data-rocketjavascript="false">
     (function(){
+        document.body.className = document.body.className.replace('mflazyzoad-no-js', '');
         var jsSrc = '<?php echo $this->getViewFileUrl('Magefan_LazyLoad::js/lazyload.min.js'); ?>'
         function loadScript(e,t){var a,n,r;n=!1,(a=document.createElement("script")).type="text/javascript",a.src=e,a.onload=a.onreadystatechange=function(){n||this.readyState&&"complete"!=this.readyState||(n=!0,t())},(r=document.getElementsByTagName("script")[0]).parentNode.insertBefore(a,r)}
         loadScript(jsSrc, function(){
