functions

src/content/docs/reference/functions/get_lcp_lazy.mdx

@@ -0,0 +1,147 @@
+---
+title: GET_LCP_LAZY function
+description: Reference docs for the httparchive.fn.GET_LCP_LAZY function
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+The [`httparchive.fn.GET_LCP_LAZY`](https://console.cloud.google.com/bigquery?ws=!1m5!1m4!6m3!1shttparchive!2sfn!3sGET_LCP_LAZY) function returns whether the LCP element had native and/or custom lazy-loading attributes.
+
+## Input
+
+### `performance_custom_metric`
+
+The JSON-encoded [`performance`](https://github.com/HTTPArchive/custom-metrics/blob/main/dist/performance.js) 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 use natively lazy load their LCP element
+
+<Tabs>
+  <TabItem label="Query">
+
+```sql
+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
+```
+
+  </TabItem>
+  <TabItem label="Results">
+
+| pct_lazy |
+| -- |
+| 0.039 |
+
+  </TabItem>
+</Tabs>
+
+### Top custom lazy-loading techniques
+
+<Tabs>
+  <TabItem label="Query">
+
+```sql
+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
+```
+
+  </TabItem>
+  <TabItem label="Results">
+
+custom_technique.value | custom_technique.count
+-- | --
+`[data-src]` | 585469
+[data-rimg]` | 12434
+`[class~=lazyload]` | 6497
+`[data-lazy]` | 4490
+`[class~=swiper-lazy]` | 553
+
+  </TabItem>
+</Tabs>
+
+## Routine
+
+```sql
+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;
+}
+```

src/content/docs/reference/functions/get_lcp_priority.mdx

@@ -0,0 +1,78 @@
+---
+title: GET_LCP_PRIORITY function
+description: Reference docs for the httparchive.fn.GET_LCP_PRIORITY function
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+The [`httparchive.fn.GET_LCP_LAZY`](https://console.cloud.google.com/bigquery?ws=!1m5!1m4!6m3!1shttparchive!2sfn!3sGET_LCP_PRIORITY) function returns the value of the `fetchpriority` attribute of the LCP element.
+
+## Input
+
+### `performance_custom_metric`
+
+The JSON-encoded [`performance`](https://github.com/HTTPArchive/custom-metrics/blob/main/dist/performance.js) custom metric of a page.
+
+**Type:** `STRING`
+
+## Output
+
+The value of the `fetchpriority` attribute of the LCP element, or `null` if the LCP element does not have a `fetchpriority` attribute.
+
+**Type:** `STRING`
+
+## Example usage
+
+### Top `fetchpriority` values
+
+<Tabs>
+  <TabItem label="Query">
+
+```sql
+WITH lcp AS (
+  SELECT
+    `httparchive.fn.GET_LCP_PRIORITY`(JSON_QUERY(custom_metrics, '$.performance')) AS priority
+  FROM
+    `httparchive.all.pages`
+  WHERE
+    date = '2023-11-01' AND
+    client = 'mobile' AND
+    is_root_page
+)
+
+SELECT
+  APPROX_TOP_COUNT(priority, 10) AS priority
+FROM
+  lcp
+```
+
+  </TabItem>
+  <TabItem label="Results">
+
+priority.value | priority.count
+-- | --
+_null_ | 15892076
+high | 697184
+low | 5103
+auto | 3255
+hight | 24
+highest | 17
+"" | 14
+”high” | 4
+High | 4
+medium | 3
+
+  </TabItem>
+</Tabs>
+
+## Routine
+
+```sql
+try {
+  const perf = JSON.parse(performance_custom_metric);
+  const lcpAttrs = perf.lcp_elem_stats.attributes;
+  return lcpAttrs.find(attr => attr.name == 'fetchpriority')?.value
+} catch {
+  return null;
+}
+```

src/content/docs/reference/functions/get_origin.mdx

@@ -0,0 +1,102 @@
+---
+title: GET_ORIGIN function
+description: Reference docs for the httparchive.fn.CAPO function
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+The [`httparchive.fn.GET_ORIGIN`](https://console.cloud.google.com/bigquery?ws=!1m5!1m4!6m3!1shttparchive!2sfn!3sGET_ORIGIN) function returns the [origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin) for a given URL.
+
+## Input
+
+### `url`
+
+The URL of a web page.
+
+**Type:** `STRING`
+
+## Output
+
+The corresponding origin.
+
+**Type:** `STRING`
+
+## Example usage
+
+### Basic usage
+
+<Tabs>
+  <TabItem label="Query">
+
+```sql
+SELECT
+  url,
+  `httparchive.fn.GET_ORIGIN`(url) AS origin
+FROM
+  UNNEST([
+    'https://www.example.com/product/123',
+    'https://example.com/',
+    'http://example.com:80/index.html'
+  ]) AS url
+```
+
+  </TabItem>
+  <TabItem label="Results">
+
+url | origin
+-- | --
+https://www.example.com/product/123	| https://www.example.com
+https://example.com/ | https://example.com
+http://example.com:80/index.html | http://example.com:80
+
+  </TabItem>
+</Tabs>
+
+### Counting cross-origin resources per page
+
+<Tabs>
+  <TabItem label="Query">
+
+```sql
+WITH cross_origin AS (
+  SELECT
+    COUNT(0) AS resources
+  FROM
+    `httparchive.all.requests`
+  WHERE
+    date = '2023-11-01' AND
+    client = 'mobile' AND
+    is_root_page AND
+    `httparchive.fn.GET_ORIGIN`(url) != `httparchive.fn.GET_ORIGIN`(page)
+  GROUP BY
+    page
+)
+
+
+SELECT
+  APPROX_QUANTILES(resources, 1000)[OFFSET(500)] AS median_xo_resources_per_page
+FROM
+  cross_origin
+```
+
+  </TabItem>
+  <TabItem label="Results">
+
+| median_xo_resources_per_page |
+| -- |
+| 27 |
+
+  </TabItem>
+</Tabs>
+
+## Routine
+
+```sql
+LOWER(CONCAT(
+    -- only network protocols (excludes blob, filesystem, chrome, etc)
+    REGEXP_EXTRACT(url, r'(?i)^(https?://)'),
+    NET.HOST(url),
+    -- be lazy and include @ and : for username/password without enforcing order.
+    IFNULL(REGEXP_EXTRACT(url, r'(?i)^https?://[\w-.@:]+(:\d+)'), '')
+  ))
+```