j1-template 2023.2.7 → 2023.3.1

data/assets/themes/j1/adapter/js/j1.js

@@ -47,11 +47,15 @@ regenerate:                             true
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign banner_config_defaults    = blocks.defaults.banner.defaults %}
-{% assign banner_config_settings    = blocks.banner.settings %}
-{% assign panel_config_defaults     = blocks.defaults.panel.defaults %}
-{% assign panel_config_settings     = blocks.panel.settings %}
-{% assign footer_config_defaults    = blocks.defaults.footer.defaults %}
+{% assign banner_defaults           = blocks.defaults.banner.defaults %}
+{% assign banner_settings           = blocks.banner.settings %}
+
+{% assign panel_defaults            = blocks.defaults.panel.defaults %}
+{% assign panel_settings            = blocks.panel.settings %}
+
+{% assign footer_defaults           = blocks.defaults.footer.defaults %}
+{% assign footer_settings           = blocks.footer.settings %}
+
 {% assign toccer_defaults           = modules.defaults.toccer.defaults %}
 
 {% assign cookie_defaults           = modules.defaults.cookies.defaults %}
@@ -74,19 +78,21 @@ regenerate:                             true
 {% assign toccer_options            = toccer_defaults | merge: toccer_settings %}
 {% assign themer_options            = themer_defaults| merge: themer_settings %}
 {% assign cookie_options            = cookie_defaults | merge: cookie_settings %}
+{% assign footer_options            = footer_defaults | merge: footer_settings %}
 
 {% assign authentication_options    = authentication_defaults | merge: authentication_settings %}
 
-{% assign footer_id                 = footer_config_defaults.container-id %}
-{% assign footer_data_path          = footer_config_defaults.data_path %}
-{% assign banner_data_path          = banner_config_defaults.data_path %}
-{% assign panel_data_path           = panel_config_defaults.data_path %}
+
+
+{% assign footer_id                 = footer_options.active_footer %}
+{% assign footer_data_path          = footer_defaults.data_path %}
+{% assign banner_data_path          = banner_defaults.data_path %}
+{% assign panel_data_path           = panel_defaults.data_path %}
 
 {% assign themer_enabled            = modules.themer_options.enabled %}
 {% assign themer_reloadPageOnChange = modules.themer_options.reloadPageOnChange %}
 {% assign themer_hideOnReload       = modules.themer_options.hideOnReload %}
 
-
 {% comment %} Detect prod mode
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign production = false %}
@@ -117,9 +123,6 @@ regenerate:                             true
  # J1 Theme is licensed under the MIT License.
  # For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
  # -----------------------------------------------------------------------------
- #  TODO:
- #
- # -----------------------------------------------------------------------------
  # Adapter generated: {{site.time}}
  # -----------------------------------------------------------------------------
 */
@@ -145,7 +148,7 @@ var j1 = (function (options) {
   var scrollerSettings = {};
   var scrollerOptions  = {};
   var scrollerDefaults = {};
-  var _this;
+  var _this            = j1;;
   var settings;
   var json_data;
   var ep;
@@ -153,6 +156,8 @@ var j1 = (function (options) {
   var referrer;
   var documentHeight;
 
+  var banner            = [];
+
   var scrollOffset;
   var scrollOffsetCorrection;
 
@@ -347,7 +352,6 @@ var j1 = (function (options) {
         eventNo:              0,
         pageType:             'unknown',
         pageBaseHeight:       0,
-//      totalGrowthRatio:     0,
         currentPageHeight:    0,
         previousPageHeight:   0,
         currentGrowthRatio:   0,
@@ -408,12 +412,8 @@ var j1 = (function (options) {
         }
       }
 
-      var dependencies_met_page_loaded = setInterval (function () {
-        if (j1.getState() == 'finished') {
-          j1.registerEvents(logger);
-        }
-        clearInterval(dependencies_met_page_loaded);
-      }, 25); // END dependencies_met_page_loaded
+      logger.info('\n' + 'register monitors');
+      j1.registerMonitors();
 
       // detect middleware (mode 'app') and update user session cookie
       // -----------------------------------------------------------------------
@@ -470,7 +470,7 @@ var j1 = (function (options) {
                 clearInterval(dependencies_met_page_displayed);
               }
             }
-          }, 25);
+          }, 10);
         })
         .catch(function(error) {
           // jadams, 2018-08-31
@@ -492,6 +492,104 @@ var j1 = (function (options) {
               expires:  0
             });
 
+            // -----------------------------------------------------------------
+            // load|initialize page resources for block elements
+            // NOTE: asynchronous calls should be rewitten to xhrData
+            // NOTE: Find $('#content').hide() conterpart in themer adapter
+            // -----------------------------------------------------------------
+            var dependencies_met_page_ready = setInterval (function (options) {
+              var pageState     = $('#no_flicker').css("display");
+              var pageVisible   = (pageState == 'block') ? true : false;
+              var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+              var banner_blocks = document.querySelectorAll('[id^="banner"]').length;
+              var panel_blocks  = document.querySelectorAll('[id^="panel"]').length;
+              var footer_blocks = document.querySelectorAll('[id^="footer"]').length;
+              var banners_exits = (banner_blocks > 0) ? true : false;
+              var panels_exists = (panel_blocks > 0)  ? true : false;
+              var footer_exists = (footer_blocks > 0) ? true : false;
+              var banner_state;
+              var panel_state;
+              var footer_state;
+
+              if (j1.getState() === 'finished' && pageVisible && atticFinished) {
+                logger.info('\n' + 'load block elements');
+                if (banners_exits) {j1.initBanner(settings);}
+                if (panels_exists) {j1.initPanel(settings)};
+                if (footer_exists) {j1.initFooter(settings);}
+
+                if (banner_blocks || panel_blocks) {
+                  // pages having banners or panels
+
+                  var dependencies_met_blocks_ready = setInterval (function (settings) {
+                    if (footer_exists) {
+                      footer_state = j1.getXhrDataState('#{{footer_id}}');
+                    } else {
+                      // pages w/o footer
+                      footer_state = 'success';
+                    }
+
+                    // check bannern if HTML content loaded successfully
+                    //
+                    if (banners_exits) {
+                      Object.entries(j1.xhrDataState).forEach(entry => {
+                        const [key, value] = entry;
+                        if (key.includes('banner')) {
+                          banner_state = value;
+                        }
+                      });
+                    } else {
+                      // pages w/o banners
+                      banner_state = 'success';
+                    }
+
+                    // check panels if HTML content loaded successfully
+                    //
+                    if (panels_exists)  {
+                      Object.entries(j1.xhrDataState).forEach(entry => {
+                        const [key, value] = entry;
+                        if (key.includes('panel')) {
+                          panel_state = value;
+                        }
+                      });
+                    } else {
+                      // pages w/o panels
+                      panel_state = 'success';
+                    }
+
+                    // show the content section for 'block content' to optimze CLS
+                    //
+                    if (banner_state == 'success' && panel_state == 'success' && footer_state == 'success') {
+                      // show the content|footer
+                      //
+                      $('#content').show();
+                      $('#{{footer_id}}').show();
+
+                      clearInterval(dependencies_met_page_ready);
+                      clearInterval(dependencies_met_blocks_ready);
+                    }
+                  }, 10);
+                } else {
+                  // pages w/o banners or panels
+
+                  if (footer_exists) {
+                    footer_state = j1.getXhrDataState('#{{footer_id}}');
+                  } else {
+                    // pages w/o footer
+                    footer_state = 'success';
+                  }
+
+                  // show the content|footer
+                  //
+                  if ( footer_state == 'success') {
+                    $('#content').show();
+                    $('#{{footer_id}}').show();
+
+                    clearInterval(dependencies_met_page_ready);
+                  }
+                }
+              }
+            }, 10);
+
             j1.setState(curr_state);
             logger.debug('\n' + 'state: ' + j1.getState());
           }, detectTimeout);
@@ -523,7 +621,7 @@ var j1 = (function (options) {
       // Save last page access
       // see: https://stackoverflow.com/questions/3528324/how-to-get-the-previous-url-in-javascript
       // see: https://developer.mozilla.org/de/docs/Web/API/Window/history
-      //
+      // -----------------------------------------------------------------------
       user_session.timestamp      = timestamp_now;
       referrer                    = new liteURL(document.referrer);
       current_page                = window.location.pathname;
@@ -555,10 +653,100 @@ var j1 = (function (options) {
       // -----------------------------------------------------------------------
       // load|initialize page resources for block elements
       // NOTE: asynchronous calls should be rewitten to xhrData
+      // NOTE: Find $('#content').hide() conterpart in themer adapter
       // -----------------------------------------------------------------------
-      j1.initBanner(settings);
-      j1.initPanel(settings);
-      j1.initFooter(settings);
+      var dependencies_met_page_ready = setInterval (function (options) {
+        var pageState     = $('#no_flicker').css("display");
+        var pageVisible   = (pageState == 'block') ? true : false;
+        var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+        var banner_blocks = document.querySelectorAll('[id^="banner"]').length;
+        var panel_blocks  = document.querySelectorAll('[id^="panel"]').length;
+        var footer_blocks = document.querySelectorAll('[id^="footer"]').length;
+        var banners_exits = (banner_blocks > 0) ? true : false;
+        var panels_exists = (panel_blocks > 0)  ? true : false;
+        var footer_exists = (footer_blocks > 0) ? true : false;
+        var banner_state;
+        var panel_state;
+        var footer_state;
+
+        if (j1.getState() === 'finished' && pageVisible && atticFinished) {
+          logger.info('\n' + 'load block elements');
+          if (banners_exits) {j1.initBanner(settings);}
+          if (panels_exists) {j1.initPanel(settings)};
+          if (footer_exists) {j1.initFooter(settings);}
+
+          if (banner_blocks || panel_blocks) {
+            // pages having banners or panels
+
+            var dependencies_met_blocks_ready = setInterval (function (settings) {
+              if (footer_exists) {
+                footer_state = j1.getXhrDataState('#{{footer_id}}');
+              } else {
+                // pages w/o footer
+                footer_state = 'success';
+              }
+
+              // check bannern if HTML content loaded successfully
+              //
+              if (banners_exits) {
+                Object.entries(j1.xhrDataState).forEach(entry => {
+                  const [key, value] = entry;
+                  if (key.includes('banner')) {
+                    banner_state = value;
+                  }
+                });
+              } else {
+                // pages w/o banners
+                banner_state = 'success';
+              }
+
+              // check panels if HTML content loaded successfully
+              //
+              if (panels_exists)  {
+                Object.entries(j1.xhrDataState).forEach(entry => {
+                  const [key, value] = entry;
+                  if (key.includes('panel')) {
+                    panel_state = value;
+                  }
+                });
+              } else {
+                // pages w/o panels
+                panel_state = 'success';
+              }
+
+              // show the content section for 'block content' to optimze CLS
+              //
+              if (banner_state == 'success' && panel_state == 'success' && footer_state == 'success') {
+                // show the content|footer
+                //
+                $('#content').show();
+                $('#{{footer_id}}').show();
+
+                clearInterval(dependencies_met_page_ready);
+                clearInterval(dependencies_met_blocks_ready);
+              }
+            }, 10);
+          } else {
+            // pages w/o banners or panels
+
+            if (footer_exists) {
+              footer_state = j1.getXhrDataState('#{{footer_id}}');
+            } else {
+              // pages w/o footer
+              footer_state = 'success';
+            }
+
+            // show the content|footer
+            //
+            if ( footer_state == 'success') {
+              $('#content').show();
+              $('#{{footer_id}}').show();
+
+              clearInterval(dependencies_met_page_ready);
+            }
+          }
+        }
+      }, 10);
 
       state = 'running';
       logger.debug('\n' + 'state: ' + state);
@@ -603,7 +791,7 @@ var j1 = (function (options) {
       var cb_load_closure = function(banner_id) {
         return function ( responseTxt, statusTxt, xhr ) {
           if ( statusTxt ==  'success' ) {
-            var logger = log4javascript.getLogger('j1.adapter.xhrData');
+            // var logger = log4javascript.getLogger('j1.adapter.xhrData');
             logText = '\n' + 'loading banner completed on id: ' +banner_id;
             logger.info(logText);
             j1.setXhrDataState(banner_id, statusTxt);
@@ -624,7 +812,7 @@ var j1 = (function (options) {
 
       {% comment %} Collect all banner id|s configured
       -------------------------------------------------------------------------- {% endcomment %}
-      {% for items in banner_config_settings %}
+      {% for items in banner_settings %}
         {% assign key   = items[0] %}
         {% assign value = items[1] %}
 
@@ -665,7 +853,7 @@ var j1 = (function (options) {
           {% assign banner_config       = nil %}
 
         {% endfor %}  {% comment %} END banner_config {% endcomment %}
-      {% endfor %}  {% comment %} END banner_config_settings {% endcomment %}
+      {% endfor %}  {% comment %} END banner_settings {% endcomment %}
 
       {% comment %} REGISTER exceptions container
       -------------------------------------------------------------------------- {% endcomment %}
@@ -726,7 +914,7 @@ var j1 = (function (options) {
             j1.setXhrDataState(panel_id, statusTxt);
             j1.setXhrDomState(panel_id, statusTxt);
             // Set|Log status
-            state = 'Error';
+            state = 'error';
             logger.error('\n' + 'state: ' + state);
           }
         };
@@ -734,7 +922,7 @@ var j1 = (function (options) {
 
       {% comment %} Collect all panel id|s configured
       -------------------------------------------------------------------------- {% endcomment %}
-      {% for items in panel_config_settings %}
+      {% for items in panel_settings %}
         {% assign key   = items[0] %}
         {% assign value = items[1] %}
 
@@ -774,7 +962,7 @@ var j1 = (function (options) {
 
           {% endfor %}  {% comment %} END panels {% endcomment %}
         {% endfor %}  {% comment %} END panel_config {% endcomment %}
-      {% endfor %}  {% comment %} END panel_config_settings {% endcomment %}
+      {% endfor %}  {% comment %} END panel_settings {% endcomment %}
 
       if (panel.length) {
         for (var i in panel) {
@@ -836,7 +1024,7 @@ var j1 = (function (options) {
 
       var id = '#' + '{{footer_id}}';
       var selector = $(id);
-      if ( selector.length ) {
+      if (selector.length) {
         var footer_data_path = '{{footer_data_path}} ' + id;
         selector.load(footer_data_path, cb_load_closure(id));
       } else {
@@ -894,6 +1082,12 @@ var j1 = (function (options) {
       var meta_personalization  = $('meta[name=personalization]').attr('content');
       var personalization       = (meta_personalization === 'true') ? true: false;
 
+      const cb = (list) => {
+          list.getEntries().forEach(entry => {
+              console.log(entry);
+          });
+      }
+
       // if personalized content detected, page requires user consent
       // -----------------------------------------------------------------------
       if (personalization && !user_consent.personalization) {
@@ -970,6 +1164,7 @@ var j1 = (function (options) {
 
           // display the page loaded is managed by module "themer"
           // $('#no_flicker').css('display', 'block');
+          // $('#no_flicker').show();
 
           // jadams, 2021-12-06: Check if access to cookies for this site failed.
           // Possibly, a third-party domain or an attacker tries to access it.
@@ -1069,10 +1264,11 @@ var j1 = (function (options) {
               setTimeout (function() {
                 // scroll to an anchor in current page if given in URL
                 j1.scrollToAnchor();
-              }, {{template_config.page_on_load_timeout}} );
+              }, {{template_config.page_on_load_timeout}});
+
               clearInterval(dependencies_met_page_ready);
             }
-          }, 25);
+          }, 10);
 
           // set|log status
           state = 'finished';
@@ -1113,6 +1309,7 @@ var j1 = (function (options) {
 
         // display the page loaded is managed by module "themer"
         // $('#no_flicker').css('display', 'block');
+        // $('#no_flicker').show();
 
         // jadams, 2021-12-06: Check if access to cookies for this site failed.
         // Possibly, a third-party domain or an attacker tries to access it.
@@ -1254,15 +1451,14 @@ var j1 = (function (options) {
           var pageState   = $('#no_flicker').css("display");
           var pageVisible = (pageState == 'block') ? true: false;
           if ( j1.getState() === 'finished' && pageVisible ) {
-            // TODO: Hide GoogleTranslator
-            // $('.skiptranslate').hide();
             setTimeout (function() {
               // scroll to an anchor in current page if given in URL
               j1.scrollToAnchor();
-            }, {{template_config.page_on_load_timeout}} );
+            }, {{template_config.page_on_load_timeout}});
+
             clearInterval(dependencies_met_page_ready);
           }
-        }, 25);
+        }, 10);
 
         // set|log status
         state = 'finished';
@@ -1679,12 +1875,10 @@ var j1 = (function (options) {
     // -------------------------------------------------------------------------
     // MAX-AGE Cookies: To leave cookies for a specific time, set the expires
     // part into a FUTUTE date. FOR GDPR compliance, MAX-AGE is 365 days.
-    // TODO:
-    //    Change attribute "Secure" to true, if HTTPS is used.
-    //    Checks and config changes are to be done.
+    // TODO:  Change attribute "Secure" to true, if HTTPS is used.
+    //        Checks and config changes are to be done.
     // -------------------------------------------------------------------------
-    // TODO:
-    //    Handling of  attribute "SameSite".
+    // TODO: Handling of  attribute "SameSite".
     //    Config to use this attribute should be configurable
     //    (what config file?).
     //    Disabled use for now in general.
@@ -2061,7 +2255,7 @@ var j1 = (function (options) {
             return false;
           }
         }
-      }, 25);
+      }, 10);
     },
 
     // -------------------------------------------------------------------------
@@ -2119,7 +2313,7 @@ var j1 = (function (options) {
             return false;
           }
         }
-      }, 25);
+      }, 10);
     },
 
     // -------------------------------------------------------------------------
@@ -2480,7 +2674,7 @@ var j1 = (function (options) {
           }
 
         }
-      }, 25);
+      }, 10);
     },
 
     // -------------------------------------------------------------------------
@@ -2506,20 +2700,126 @@ var j1 = (function (options) {
     }, // END stringToBoolean
 
     // -------------------------------------------------------------------------
-    // registerEvents()
+    // registerMonitors()
     //
     // -------------------------------------------------------------------------
-    registerEvents: function (logger) {
+    registerMonitors: function () {
+      var cls;
+      var lcp
+      var cumulated_cls = 0;
+      var cumulated_lcp = 0;
+      const development = ('{{environment}}'.includes('prod')) ? false : true;
+
+      // PerformanceObserver to monitor the 'LCP' of a page load
+      // see: https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
+      //
+      const performanceObserverLCP = new PerformanceObserver((entryList) => {
+        const entries     = entryList.getEntries();
+
+        // logger API used for deveöopment only
+        //
+        if (development) {
+          var logger = log4javascript.getLogger('PerformanceObserver');
+        }
+
+        // Use the latest LCP candidate
+        const lastEntry   = entries[entries.length - 1];
+        var lastEntryText = JSON.stringify(lastEntry, null, 2);
+
+        cumulated_lcp  += lastEntry.renderTime;
+        var lcp_full    = cumulated_lcp/1000;
+        lcp             = lcp_full.toFixed(3);
+
+        var url       = lastEntry.url;
+        var pathname  = url.replace( /^[a-zA-Z]{3,5}\:\/{2}[a-zA-Z0-9_.:-]+\//, '' );
+
+        if (development && lastEntry.url != '') {
+          logger.debug('\n' + 'Largest Contentful Paint (LCP), url:', pathname);
+        } else {
+          console.debug(`Largest Contentful Paint (LCP), url: ${pathname}`);
+        }
 
-      // Add ResizeObserver to monitor the page height of dynamic pages
+        if (development) {
+          if (lcp > 2.5) {
+            logger.warn('\n' + 'Largest Contentful Paint (LCP), cumulated:', lcp);
+          } else {
+            logger.info('\n' + 'Largest Contentful Paint (LCP), cumulated:', lcp);
+          }
+        } else {
+          if (lcp > 2.5) {
+            console.warn(`Largest Contentful Paint (LCP), cumulated: ${lcp}`);
+          } else {
+            console.debug(`Largest Contentful Paint (LCP), cumulated: ${lcp}`);
+          }
+        }
+
+      }); // END performanceObserverLCP
+
+      // PerformanceObserver to monitor the 'CLS' of a page load
+      //
+      const performanceObserverCLS = new PerformanceObserver(entryList => {
+        var entries = entryList.getEntries() || [];
+
+        // logger API used for deveöopment only
+        //
+        if (development) {
+          var logger = log4javascript.getLogger('PerformanceObserver');
+        }
+
+        entries.forEach(entry => {
+
+          if (entry.sources) {
+
+            // omit entries likely caused by user input
+            if (!entry.hadRecentInput) {
+              // cumulate values
+              cumulated_cls += entry.value;
+              cls            = cumulated_cls.toFixed(3);
+            }
+
+            for (const {node, currentRect, previousRect} of entry.sources) {
+              var hasProperty = (node.hasOwnProperty('firstElementChild')) ? true : false;
+              if (hasProperty) {
+                var id = '';
+                try {
+                  id = node.firstElementChild.id;
+                }
+                catch(err) {
+                  id = 'missing';
+                }
+
+                if (development && id !== 'missing' && id !== '' && cls > 0.01) {
+                  if (cls > 0.1) {
+                    logger.warn('\n' + 'Cumulative Layout Shift (CLS), entry id: ', id);
+                    logger.warn('\n' + 'Cumulative Layout Shift (CLS): ', cls);
+                  } else {
+                    logger.info('\n' + 'Cumulative Layout Shift (CLS), entry id: ', id);
+                    logger.info('\n' + 'Cumulative Layout Shift (CLS): ', cls);
+                  }
+                }
+              } // END if typeof
+            } // END for
+          } // END if  entry.sources
+
+        }); // END forEach entry
+
+      }); // END performanceObserverCLS
+
+      // ResizeObserver to monitor the changes on page height (dynamic pages)
       // see: https://stackoverflow.com/questions/14866775/detect-document-height-change
       //
-      const observer = new ResizeObserver(entries => {
+      const resizeObserver = new ResizeObserver(entries => {
         var scrollOffsetCorrection  = scrollerOptions.smoothscroll.offsetCorrection;
         const body                  = document.body,
               html                  = document.documentElement,
               scrollOffset          = j1.getScrollOffset(scrollOffsetCorrection);
 
+        // logger API used for deveöopment only
+        //
+        if (development) {
+          var logger = log4javascript.getLogger('ResizeObserver');
+        }
+
         // get the page height from the DOM
         //
         var documentHeight = Math.max (
@@ -2532,9 +2832,11 @@ var j1 = (function (options) {
 
         j1['pageMonitor'].eventNo += 1;
 
-        // Skip first Observer events as data returne found  unusable
+        // skip first Observer event
+        //
         if (j1['pageMonitor'].eventNo == 2) {
           // Set initial data from second event
+          //
           j1['pageMonitor'].pageBaseHeight      = document.body.scrollHeight;
           j1['pageMonitor'].currentPageHeight   = document.body.scrollHeight;
           j1['pageMonitor'].previousPageHeight  = document.body.scrollHeight;
@@ -2545,7 +2847,7 @@ var j1 = (function (options) {
           growthRatio         = 0.00;
         } else {
           // collect 'pageHeight' from 'entries'
-          // NOTE: each entry is an instance of ResizeObserverEntry
+          //
           for (const entry of entries) {
             pageBaseHeight = j1['pageMonitor'].pageBaseHeight;
             if (pageBaseHeight > 0) {
@@ -2555,6 +2857,7 @@ var j1 = (function (options) {
               j1['pageMonitor'].currentPageHeight = pageHeight;
 
               // total growth ratio
+              //
               pageGrowthRatio = pageHeight / pageBaseHeight * 100;
               pageGrowthRatio = pageGrowthRatio.toFixed(2);
 
@@ -2564,34 +2867,56 @@ var j1 = (function (options) {
               growthRatio = growthRatio.toFixed(2);
               j1['pageMonitor'].growthRatio = growthRatio;
             }
-          }
-          // detect the page 'type'
-          if (growthRatio >= 10) {
-            j1['pageMonitor'].pageType = 'dynamic';
+          } // END for entries
 
-//          logger.debug('\n' + 'Observer: previousPageHeight|currentPageHeight (px): ', j1['pageMonitor'].previousPageHeight + '|' + pageHeight);
-//          logger.debug('\n' + 'Observer: growthRatio relative|absolute (%): ', growthRatio + '|' + pageGrowthRatio);
+          // detect the 'page type'
+          //
+          if (growthRatio >= 5) {
+            j1['pageMonitor'].pageType = 'dynamic';
 
-            logger.debug('\n' + 'Observer: page growthRatio (%): ', j1['pageMonitor'].growthRatio);
-            logger.debug('\n' + 'Observer: page detected as: dynamic');
+            if (development) {
+              logger.debug('\n' + 'growthRatio: ' + j1['pageMonitor'].growthRatio + '%');
+              logger.debug('\n' + 'page detected as: dynamic');
+            }
 
           } else {
             // set the page type to 'static' if low growth detected
             //
-            logger.debug('\n' + 'Observer: page growthRatio (%): ', j1['pageMonitor'].growthRatio);
-            j1['pageMonitor'].pageType = 'static';
-            logger.debug('\n' + 'Observer: page detected as: static');
-          }
-        } // END Observer data evaluation
-      }); // END Observer
-
-      // monitor the page growth if visible
-      var dependencies_met_page_finished = setInterval (function () {
-        if (j1.getState() == 'finished') {
-          observer.observe(document.querySelector('body'));                     //    observer.observe(document.querySelector('#content'));
-          clearInterval(dependencies_met_page_finished);
-        }
-      }, 25);
+            if (typeof j1['pageMonitor'].growthRatio != 'undefined' && j1['pageMonitor'].growthRatio > 0) {
+              j1['pageMonitor'].pageType = 'static';
+              if (development) {
+                logger.debug('\n' + 'growthRatio: ' + j1['pageMonitor'].growthRatio + '%');
+                logger.debug('\n' + 'page detected as: static');
+              }
+            }
+          } // END if growthRatio
+
+        } // END if j1['pageMonitor']
+
+      }); // END resizeObserver
+
+      // -----------------------------------------------------------------------
+      // run all observers for page monitoring
+      // -----------------------------------------------------------------------
+
+      // monitor 'LCP'
+      //
+      performanceObserverLCP.observe({
+         type: 'largest-contentful-paint',
+         buffered: true
+      });
+
+      // monitor 'CLS'
+      //
+      performanceObserverCLS.observe({
+         type: 'layout-shift',
+         buffered: true
+      });
+
+      // monitor 'GROWTH'
+      resizeObserver.observe(
+        document.querySelector('body')
+      );
 
       // -----------------------------------------------------------------------
       // final updates before browser page|tab
@@ -2652,7 +2977,8 @@ var j1 = (function (options) {
       }
      });
 
-   } // END registerEvents
+   } // END registerMonitors
+
   };
 }) (j1, window);