Implement query to assess opportunity to fix sites that have lazy-loaded LCP image

sql/2023/03/sites-with-lazy-lcp-opportunity.sql

@@ -0,0 +1,81 @@
+# HTTP Archive query to get % of WordPress sites that have loading='lazy' on LCP image.
+#
+# WPP Research, Copyright 2023 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# See query results here: https://github.com/GoogleChromeLabs/wpp-research/pull/49
+CREATE TEMP FUNCTION getAttr(attributes STRING, attribute STRING) RETURNS STRING LANGUAGE js AS '''
+  try {
+    const data = JSON.parse(attributes);
+    const attr = data.find(attr => attr["name"] === attribute)
+    return attr.value
+  } catch (e) {
+    return null;
+  }
+''';
+
+WITH lazypress AS (
+  SELECT
+    client,
+    page,
+    getAttr(JSON_EXTRACT(payload, '$._performance.lcp_elem_stats.attributes'), 'loading') = 'lazy' AS native_lazy,
+    getAttr(JSON_EXTRACT(payload, '$._performance.lcp_elem_stats.attributes'), 'class') AS class,
+    JSON_EXTRACT_SCALAR(payload, '$._performance.lcp_elem_stats.nodeName') = 'IMG' AS img_lcp
+  FROM
+    `httparchive.all.pages`,
+    UNNEST(technologies) AS t
+  WHERE
+    date = '2023-02-01' AND
+    is_root_page AND
+    t.technology = 'WordPress'
+),
+
+lazy_loaded_lcp AS (
+  SELECT
+    client,
+    COUNT(DISTINCT page) AS total
+  FROM
+    lazypress
+  WHERE
+    img_lcp
+    AND native_lazy
+  GROUP BY
+    client
+),
+
+total_lcp AS (
+  SELECT
+    client,
+    COUNT(DISTINCT page) AS total
+  FROM
+    lazypress
+  WHERE
+    img_lcp
+  GROUP BY
+    client
+)
+
+SELECT
+  client,
+  lazy_loaded_lcp.total AS lazy_loaded_lcp,
+  total_lcp.total AS total_lcp,
+  lazy_loaded_lcp.total / total_lcp.total AS pct_lazy_loaded
+FROM
+  lazy_loaded_lcp
+JOIN
+  total_lcp
+USING
+  (client)
+ORDER BY
+  client ASC

sql/README.md

@@ -19,6 +19,8 @@ Once you are ready to add a new query to the repository, open a pull request fol
 ## Query index
 
 ### 2023/03
+
+* [% of WordPress sites that have loading='lazy' on LCP image](./2023/03/sites-with-lazy-lcp-opportunity.sql)
 * [Top class names used on lazy loaded LCP images](./2023/03/top-lazy-lcp-class-names.sql)
 
 ### 2023/01