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% |
| #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') |
| #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') |
| // 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 = ''; |
| % python -m cProfile -s cumtime -m sqlfluff.cli.commands lint ~/almanac.httparchive.org/sql/2019/performance/07_04d.sql | |
| All Finished 📜 🎉! | |
| 136753828 function calls (131426652 primitive calls) in 180.249 seconds | |
| Ordered by: cumulative time | |
| ncalls tottime percall cumtime percall filename:lineno(function) | |
| 513/1 0.023 0.000 182.282 182.282 {built-in method builtins.exec} | |
| 1 0.000 0.000 182.282 182.282 runpy.py:195(run_module) | |
| 1 0.000 0.000 179.557 179.557 runpy.py:62(_run_code) |
| % python -m cProfile -s cumtime -m sqlfluff.cli.commands lint ~/almanac.httparchive.org/sql/2019/performance/07_04d.sql | |
| All Finished 📜 🎉! | |
| 3482273681 function calls (3476456236 primitive calls) in 3173.551 seconds | |
| Ordered by: cumulative time | |
| ncalls tottime percall cumtime percall filename:lineno(function) | |
| 514/1 0.009 0.000 3178.216 3178.216 {built-in method builtins.exec} |
| appdirs==1.4.4 | |
| attrs==21.4.0 | |
| black==21.12b0 | |
| cached-property==1.5.2 | |
| certifi==2021.10.8 | |
| cfgv==3.3.1 | |
| chardet==4.0.0 | |
| charset-normalizer==2.0.10 | |
| click==8.0.3 | |
| colorama==0.4.4 |
| $ nghttp https://stuart-mcmillan.com/tests/earlyhints_use_css.html -anv -H'user-agent: Chrome' --no-push | |
| [ 0.384] Connected | |
| The negotiated protocol: h2 | |
| [ 0.567] send SETTINGS frame <length=18, flags=0x00, stream_id=0> | |
| (niv=3) | |
| [SETTINGS_MAX_CONCURRENT_STREAMS(0x03):100] | |
| [SETTINGS_INITIAL_WINDOW_SIZE(0x04):65535] | |
| [SETTINGS_ENABLE_PUSH(0x02):0] | |
| [ 0.567] send PRIORITY frame <length=5, flags=0x00, stream_id=3> | |
| (dep_stream_id=0, weight=201, exclusive=0) |
| // Credit to Michal Mocny (https://twitter.com/mmocny) | |
| // | |
| // Copy and paste this into the console and click around to see all interactions, whether they would pass INP, | |
| // and if you expand the entry you'll see the debug breakdown information. | |
| // | |
| // This is basically the same as the Core Web Vitals extension does: https://web.dev/debug-cwvs-with-web-vitals-extension/ | |
| const valueToRating = (score) => score <= 200 ? 'good' : score <= 500 ? 'needs-improvement' : 'poor'; | |
| const COLOR_GOOD = '#0CCE6A'; |