GET_LCP_LAZY function

The httparchive.fn.GET_LCP_LAZY function returns whether the LCP element had native and/or custom lazy-loading attributes.

Input

performance_custom_metric

The JSON-encoded performance custom metric of a page.

Type: STRING

Output

Lazy-loading information about the LCP element.

If the LCP element had native lazy-loading, the native property will be true.

If the LCP element had custom lazy-loading, the custom property will be an array of CSS selectors representing the techniques used, which can be any of:

• [data-src]
• [data-rimg]
• [data-lazy]
• [class~=lazyload]
• [class~=swiper-lazy]

For custom attributes, only the name needs to match (the value is ignored). For custom classes, the value must exist anywhere in the attribute separated by whitespace.

Type: STRUCT<native BOOL, custom ARRAY<STRING>>

Example usage

Percent of pages that natively lazy load their LCP element

WITH lazy AS (
  SELECT
    `httparchive.fn.GET_LCP_LAZY`(JSON_QUERY(custom_metrics, '$.performance')).native
  FROM
    `httparchive.all.pages`
  WHERE
    date = '2023-11-01' AND
    client = 'mobile' AND
    is_root_page
)

SELECT
  COUNTIF(native) / COUNT(0) AS pct_lazy
FROM
  lazy

Top custom lazy-loading techniques

WITH lazy AS (
  SELECT
    `httparchive.fn.GET_LCP_LAZY`(JSON_QUERY(custom_metrics, '$.performance')).custom
  FROM
    `httparchive.all.pages`
  WHERE
    date = '2023-11-01' AND
    client = 'mobile' AND
    is_root_page
)

SELECT
  APPROX_TOP_COUNT(value, 10) AS custom_technique
FROM
  lazy,
  UNNEST(custom) AS value

Routine

try {
  const perf = JSON.parse(performance_custom_metric);
  const lcpAttrs = perf.lcp_elem_stats.attributes;

  const custom = [{
    name: 'data-src'
  }, {
    name: 'data-rimg'
  }, {
    name: 'data-lazy'
  }, {
    name: 'class',
    value: 'lazyload'
  }, {
    name: 'class',
    value: 'swiper-lazy'
  }];


  return {
    native: lcpAttrs.some(({name, value}) => {
      return name == 'loading' && value == 'lazy';
    }),
    custom: custom.filter(({name, value}) => {
      const valueRegex = new RegExp(`(^|\s)${value}(\s|$)`);
      return lcpAttrs.some(attr => {
        return attr.name == name && (!value || valueRegex.test(attr.value));
      });
    }).map(({name, value}) => {
      return `[${name}${value ? `~=${value}` : ''}]`;
    })
  }
} catch {
  return null;
}