rviscomi

Modern Web Guidance

• Only when Modern Web Guidance actually influences the implementation, make it a teachable moment for the user:
  • Use direct first-person voice only ("I was going to write...", "What I didn't know was..."). Banned phrases: "one might consider", "a developer could", "an initial inclination might be", or any hypothetical third-person framing.
  • Keep it strictly technical and factual without dramatic or performative storytelling. Focus on the code diff and browser behavior:
    1. Planned approach: The exact code, selector, or pattern you were about to generate before checking guidance.
    2. Overlooked behavior: The specific platform behavior, accessibility requirement, or browser quirk you were unaware of or had neglected.
    3. Guidance citation: Quote the relevant guidance verbatim, but sparingly, and use no other sources than Modern Web Guidance, i.e. never general knowledge.

4. Adopted approach: How the guidance directly changed your code or desig

rviscomi

{
  "lighthouseVersion": "13.4.1",
  "requestedUrl": "http://localhost:3030/",
  "mainDocumentUrl": "http://localhost:3030/",
  "finalDisplayedUrl": "http://localhost:3030/",
  "finalUrl": "http://localhost:3030/",
  "fetchTime": "2026-09-04T03:00:11.079Z",
  "gatherMode": "navigation",
  "runWarnings": [],
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/155.0.0.0 Safari/537.36",

rviscomi

rviscomi

[lcp_rld]
// https://web.dev/optimize-lcp/#monitor-lcp-breakdown-in-javascript
return new Promise(resolve => {
  new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    const navEntry = performance.getEntriesByType('navigation')[0];
    const lcpResEntry = performance
      .getEntriesByType('resource')
      .filter((e) => e.name === lcpEntry.url)[0];

rviscomi

CREATE OR REPLACE VIEW httparchive.analytics_373060815.web_vitals AS (
  SELECT
    event_name AS metric_name,
    * EXCEPT(event_name, is_last_received_value)
  FROM (
    SELECT
      *,
      REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'), r'\/\/.*?(\/[^?]*)') AS page_path,
      ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'value'), 3) AS metric_value,
      IF (ROW_NUMBER() OVER (PARTITION BY (

rviscomi

import {
  onCLS,
  onFID,
  onLCP,
  onINP
} from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';

function sendToGoogleAnalytics({name, delta, value, id, rating, navigationType, attribution}) {
  const eventParams = {
    value: delta,

rviscomi

Timing information

Properties related to the timing of various events during the page load process, such as the time it takes for the page to load, the time to the first byte, and the time for different elements of the page such as images and stylesheets to be loaded, paint and rendered.

Request and response information

Properties related to the number and size of requests and responses made during the page load process, such as the number of requests, the number of responses with different status codes, and the total size of data transferred.

Test information

rviscomi

WITH app_list AS (
  SELECT DISTINCT
    app
  FROM
    `httparchive.technologies.2022_05_01_mobile`
  WHERE
    category IN ('CMS')
), category AS (
  SELECT
    _TABLE_SUFFIX,

rviscomi

{
  "pageref": "page_1_0_1",
  "_run": 1,
  "_cached": 0,
  "startedDateTime": "2022-05-13T16:17:30.615041",
  "time": 623,
  "request": {
    "method": "GET",
    "url": "https://m.twfanti.com/search.html",
    "headersSize": 672,

rviscomi

CREATE TEMPORARY FUNCTION getIfConditionals(payload STRING) RETURNS
ARRAY<STRING> LANGUAGE js AS '''
try {
  var $ = JSON.parse(payload);
  var sass = JSON.parse($['_sass']);

  return sass.scss.stats.ifs.map(i => i.test);
} catch (e) {
  return [];
}