tunetheweb

// NOTE set up a new dimension in Google Analytics and then add the dimension number on line 91

// Based on Phil Walton's post: https://web.dev/debug-web-vitals-in-the-field/

<script type="module">
  // Load the web-vitals library from unpkg.com (or host locally):
  import {getFCP, getLCP, getCLS, getTTFB, getFID} from 'https://unpkg.com/web-vitals?module';
  
  function getSelector(node, maxLen = 100) {
    let sel = '';

tunetheweb

#standardSQL
# Desktop pages that include link[rel=stylesheet][media=print][onload="*this.media*"]
# Warning this uses 250GB of BigQuery usage so can be expensive to run multiple times!
CREATE TEMP FUNCTION hasPrintCSSWithOnload(payload STRING)
RETURNS BOOLEAN LANGUAGE js AS '''
  try {
    var $ = JSON.parse(payload);
    var almanac = JSON.parse($._almanac);
    return !!almanac['link-nodes'].find(
      e => e.rel.toLowerCase() == 'stylesheet' &&  e.media.toLowerCase() == 'print' && e.onload.toLowerCase().includes('this.media')

tunetheweb

#standardSQL
# Percent of pages that include link[rel=alternate] for stylesheets
# Warning this uses 500GB of BigQuery usage so can be expensive to run multiple times!
CREATE TEMP FUNCTION hasAlternateCSS(payload STRING)
RETURNS BOOLEAN LANGUAGE js AS '''
  try {
    var $ = JSON.parse(payload);
    var almanac = JSON.parse($._almanac);
    return !!almanac['link-nodes'].find(
      e => e.rel.toLowerCase().includes('alternate')

tunetheweb

How many <img> elements have width and height attributes?

Query based on similar query about sizes and srcset created by Colin Bendell for the 2019 Web Almanac

This takes about 850GB to run for 2019 this produces the following results:

Row	client	hasHeight	hasWidth	hasPicture	total	pctHeight	pctWidth	pctPicture
1	mobile	3415295	3548809	108589	5447942	62.69%	65.14%	1.99%
2	desktop	2794913	2900974	94251	4474762	62.46%	64.83%	2.11%