diff --git a/src/content/docs/reference/functions/get_lcp_lazy.mdx b/src/content/docs/reference/functions/get_lcp_lazy.mdx new file mode 100644 index 0000000..f915627 --- /dev/null +++ b/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>` + +## Example usage + +### Percent of pages that use natively lazy load their LCP element + + + + +```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 +``` + + + + +| pct_lazy | +| -- | +| 0.039 | + + + + +### Top custom lazy-loading techniques + + + + +```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 +``` + + + + +custom_technique.value | custom_technique.count +-- | -- +`[data-src]` | 585469 +[data-rimg]` | 12434 +`[class~=lazyload]` | 6497 +`[data-lazy]` | 4490 +`[class~=swiper-lazy]` | 553 + + + + +## 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; +} +``` diff --git a/src/content/docs/reference/functions/get_lcp_priority.mdx b/src/content/docs/reference/functions/get_lcp_priority.mdx new file mode 100644 index 0000000..52e9b3f --- /dev/null +++ b/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 + + + + +```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 +``` + + + + +priority.value | priority.count +-- | -- +_null_ | 15892076 +high | 697184 +low | 5103 +auto | 3255 +hight | 24 +highest | 17 +"" | 14 +”high” | 4 +High | 4 +medium | 3 + + + + +## 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; +} +``` diff --git a/src/content/docs/reference/functions/get_origin.mdx b/src/content/docs/reference/functions/get_origin.mdx new file mode 100644 index 0000000..9c7183f --- /dev/null +++ b/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 + + + + +```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 +``` + + + + +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 + + + + +### Counting cross-origin resources per page + + + + +```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 +``` + + + + +| median_xo_resources_per_page | +| -- | +| 27 | + + + + +## 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+)'), '') + )) +```