Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lighthouse Report #4

Open
maceto opened this issue Aug 5, 2023 · 6 comments
Open

Lighthouse Report #4

maceto opened this issue Aug 5, 2023 · 6 comments
Assignees

Comments

@maceto
Copy link
Collaborator

maceto commented Aug 5, 2023

Could you describe the origin/source of this data?

[
	{
		date: '2020-01-01',
		technology: 'Wordpress',
		lighthouse: [
			{
				name: 'performance',
				tested: 10,
				desktop: {
					median_score: 71,
				},
				mobile: {
					median_score: 73,
				},
				across_dataset: {
					median_score: 83,
				},
			},
			{
				name: 'accessibility',
				tested: 10,
				desktop: {
					median_score: 71,
				},
				mobile: {
					median_score: 73,
				},
				across_dataset: {
					good_number: 83,
				},
			},
			...
		],
	}
]

The goal is to create a script to query this data from BQ transform and save it in Firestore.

@rviscomi
Copy link
Member

rviscomi commented Sep 3, 2023

Query

CREATE TEMPORARY FUNCTION GET_LIGHTHOUSE(
  records ARRAY<STRUCT<
      client STRING,
      median_lighthouse_score_accessibility NUMERIC,
      median_lighthouse_score_best_practices NUMERIC,
      median_lighthouse_score_performance NUMERIC,
      median_lighthouse_score_pwa NUMERIC,
      median_lighthouse_score_seo NUMERIC
  >>
) RETURNS ARRAY<STRUCT<
  name STRING,
  desktop STRUCT<
    median_score NUMERIC
  >,
  mobile STRUCT<
    median_score NUMERIC
  >
>> LANGUAGE js AS '''
const METRIC_MAP = {
  accessibility: 'median_lighthouse_score_accessibility',
  best_practices: 'median_lighthouse_score_best_practices',
  performance: 'median_lighthouse_score_performance',
  pwa: 'median_lighthouse_score_pwa',
  seo: 'median_lighthouse_score_seo',
};

// Initialize the Lighthouse map.
const lighthouse = Object.fromEntries(Object.keys(METRIC_MAP).map(metricName => {
  return [metricName, {name: metricName}];
}));

// Populate each client record.
records.forEach(record => {
  Object.entries(METRIC_MAP).forEach(([metricName, median_score]) => {
    lighthouse[metricName][record.client] = {median_score: record[median_score]};
  });
});

return Object.values(lighthouse);
''';

SELECT
  date,
  app AS technology,
  rank,
  geo,
  GET_LIGHTHOUSE(ARRAY_AGG(STRUCT(
    client,
    median_lighthouse_score_accessibility,
    median_lighthouse_score_best_practices,
    median_lighthouse_score_performance,
    median_lighthouse_score_pwa,
    median_lighthouse_score_seo

  ))) AS lighthouse
FROM
  `httparchive.core_web_vitals.technologies`
WHERE
  date = '2023-07-01'
GROUP BY
  date,
  app,
  rank,
  geo

Example record

{
  "date": "2023-07-01",
  "technology": "WordPress",
  "rank": "ALL",
  "geo": "ALL",
  "lighthouse": [{
    "name": "accessibility",
    "desktop": {
      "median_score": "0.865"
    },
    "mobile": {
      "median_score": "0.865"
    }
  }, {
    "name": "best_practices",
    "desktop": {
      "median_score": "0.92"
    },
    "mobile": {
      "median_score": "0.92"
    }
  }, {
    "name": "performance",
    "desktop": {
      "median_score": "0.545"
    },
    "mobile": {
      "median_score": "0.345"
    }
  }, {
    "name": "pwa",
    "desktop": {
      "median_score": "0.25"
    },
    "mobile": {
      "median_score": "0.33"
    }
  }, {
    "name": "seo",
    "desktop": {
      "median_score": "0.875"
    },
    "mobile": {
      "median_score": "0.895"
    }
  }]
}

Note: Omitted the tested value since it's not relevant at the Lighthouse category-level.

@maceto
Copy link
Collaborator Author

maceto commented Sep 9, 2023

@rviscomi, should we have any mandatory param for this endpoint?

@rviscomi
Copy link
Member

  • technology
  • rank
  • geo

WDYT @sarahfossheim?

@maceto
Copy link
Collaborator Author

maceto commented Sep 15, 2023

Example of how to consume this endpoint

curl --request GET \
  --url 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1/lighthouse?geo=Maldives&technology=["Oracle HTTP Server"]&rank=ALL'

@rviscomi
Copy link
Member

Query

CREATE TEMPORARY FUNCTION GET_LIGHTHOUSE(
  records ARRAY<STRUCT<
      client STRING,
      median_lighthouse_score_accessibility NUMERIC,
      median_lighthouse_score_best_practices NUMERIC,
      median_lighthouse_score_performance NUMERIC,
      median_lighthouse_score_pwa NUMERIC,
      median_lighthouse_score_seo NUMERIC
  >>
) RETURNS ARRAY<STRUCT<
  name STRING,
  desktop STRUCT<
    median_score INT64
  >,
  mobile STRUCT<
    median_score INT64
  >
>> LANGUAGE js AS '''
const METRIC_MAP = {
  accessibility: 'median_lighthouse_score_accessibility',
  best_practices: 'median_lighthouse_score_best_practices',
  performance: 'median_lighthouse_score_performance',
  pwa: 'median_lighthouse_score_pwa',
  seo: 'median_lighthouse_score_seo',
};

// Initialize the Lighthouse map.
const lighthouse = Object.fromEntries(Object.keys(METRIC_MAP).map(metricName => {
  return [metricName, {name: metricName}];
}));

// Populate each client record.
records.forEach(record => {
  Object.entries(METRIC_MAP).forEach(([metricName, median_score]) => {
    lighthouse[metricName][record.client] = {median_score: Math.round(record[median_score] * 100)};
  });
});

return Object.values(lighthouse);
''';

SELECT
  date,
  app AS technology,
  rank,
  geo,
  GET_LIGHTHOUSE(ARRAY_AGG(STRUCT(
    client,
    median_lighthouse_score_accessibility,
    median_lighthouse_score_best_practices,
    median_lighthouse_score_performance,
    median_lighthouse_score_pwa,
    median_lighthouse_score_seo

  ))) AS lighthouse
FROM
  `httparchive.core_web_vitals.technologies`
WHERE
  date = '2023-07-01'
GROUP BY
  date,
  app,
  rank,
  geo

Results

{
"date": "2023-07-01",
"technology": "WordPress",
"rank": "Top 10k",
"geo": "Kenya",
"lighthouse": [{
  "name": "accessibility",
  "desktop": {
    "median_score": "85"
  },
  "mobile": {
    "median_score": "85"
  }
}, {
  "name": "best_practices",
  "desktop": {
    "median_score": "92"
  },
  "mobile": {
    "median_score": "88"
  }
}, {
  "name": "performance",
  "desktop": {
    "median_score": "53"
  },
  "mobile": {
    "median_score": "38"
  }
}, {
  "name": "pwa",
  "desktop": {
    "median_score": "25"
  },
  "mobile": {
    "median_score": "33"
  }
}, {
  "name": "seo",
  "desktop": {
    "median_score": "88"
  },
  "mobile": {
    "median_score": "90"
  }
}]
}

@maceto
Copy link
Collaborator Author

maceto commented Sep 16, 2023

@rviscomi @sarahfossheim, all the changes discussed are already deployed.

New URL https://dev-gw-2vzgiib6.uk.gateway.dev/v1/lighthouse

Documentation: https://github.com/HTTPArchive/tech-report-apis#get-lighthouse

This was referenced Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants