From 9254f9034db9ee5638a4f0a7a06e885f8dcbe900 Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@google.com>
Date: Mon, 20 Mar 2023 14:07:56 -0700
Subject: [PATCH 1/2] Implement query to assess opportunity to fix sites that
 have lazy-loaded LCP image.

---
 .../03/sites-with-lazy-lcp-opportunity.sql    | 69 +++++++++++++++++++
 sql/README.md                                 |  2 +
 2 files changed, 71 insertions(+)
 create mode 100644 sql/2023/03/sites-with-lazy-lcp-opportunity.sql

diff --git a/sql/2023/03/sites-with-lazy-lcp-opportunity.sql b/sql/2023/03/sites-with-lazy-lcp-opportunity.sql
new file mode 100644
index 0000000..a6d15a8
--- /dev/null
+++ b/sql/2023/03/sites-with-lazy-lcp-opportunity.sql
@@ -0,0 +1,69 @@
+# 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
+    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
+    client = 'desktop' AND
+    is_root_page AND
+    t.technology = 'WordPress'
+),
+
+lazy_loaded_lcp AS (
+  SELECT
+    COUNT(DISTINCT page) AS total
+  FROM
+    lazypress
+  WHERE
+    img_lcp
+    AND native_lazy
+),
+
+total_lcp AS (
+  SELECT
+    COUNT(DISTINCT page) AS total
+  FROM
+    lazypress
+  WHERE
+    img_lcp
+)
+
+SELECT
+  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,
+  total_lcp
diff --git a/sql/README.md b/sql/README.md
index 3082436..c135250 100644
--- a/sql/README.md
+++ b/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

From f112ef9b2d16f1d0dc0531b45fa78a945d5017de Mon Sep 17 00:00:00 2001
From: Felix Arntz <felixarntz@google.com>
Date: Mon, 20 Mar 2023 14:27:58 -0700
Subject: [PATCH 2/2] Update query to cover both desktop and mobile.

---
 sql/2023/03/sites-with-lazy-lcp-opportunity.sql | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/sql/2023/03/sites-with-lazy-lcp-opportunity.sql b/sql/2023/03/sites-with-lazy-lcp-opportunity.sql
index a6d15a8..a0a9090 100644
--- a/sql/2023/03/sites-with-lazy-lcp-opportunity.sql
+++ b/sql/2023/03/sites-with-lazy-lcp-opportunity.sql
@@ -27,6 +27,7 @@ CREATE TEMP FUNCTION getAttr(attributes STRING, attribute STRING) RETURNS STRING
 
 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,
@@ -36,34 +37,45 @@ WITH lazypress AS (
     UNNEST(technologies) AS t
   WHERE
     date = '2023-02-01' AND
-    client = 'desktop' 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,
+  lazy_loaded_lcp
+JOIN
   total_lcp
+USING
+  (client)
+ORDER BY
+  client ASC