Gör data science på din webbplats laddtider med BigQuery

Är du något sånär bra på kodning eller villig att kämpa så finns nu början på ett nyttigt projekt på Github.

Webperf DIY

Eftersom majoriteten av data science görs med programmeringsspråket Python är det förstahandsvalet. Dessutom används Jupyter notebooks så det är lätt att följa med i kodens struktur och vad som händer.

Två lösningar; analysera Chrome UX report, samt fånga in URL:ar från en webbplats

Just nu finns två lösningar. Chrome UX report (CrUX) är lite mer komplicerad, men desto mer intressant.

CrUX är insamlad RUM-data (Real User Monitoring), det vill säga användarnas faktiska upplevelse av webbplatserna. Motsatsen till RUM brukar kallas för syntetiska tester och är då stickprov eller tester där det egentligen inte har påverkat en faktisk användare. Jämför med hur Volkswagens bilar briljerade i miljöprover i testlabbet men inte när bilen användes på en riktig väg :)

Som du förstår beskriver RUM-testerverkligheten lite bättre än syntetiska tester, men med risken att man går vilse i att det genomsnittliga RUM-resultatet är bra nog.

Hämta ut data via Google BigQuery från Chrome UX report

Nedan är en exempelfråga som du kan köra i BigQuery. De delar du kan behöva ändra är om du inte vill ha just Kristdemokraternas webbplatsdata samt att det nu är data från augusti 2018 som hämtas, se '201808’ och webbadressen i slutet.

När frågan gett ett resultat sparar du ner det som en CSV-fil. Efter det kan du leka med dessa data i Tableau, Excel eller den Jupyter notebook som finns på webperfs Github-repo.

CREATE TEMPORARY FUNCTION spreadBins(bins ARRAY<STRUCT<start INT64, `end` INT64, density FLOAT64>>)
RETURNS ARRAY<STRUCT<client STRING, start INT64, density FLOAT64>>
LANGUAGE js AS """
  // Convert into 100ms bins and spread the density around.
  const WIDTH = 100;
  return (bins || []).reduce((bins, bin) => {
    bin.start = +bin.start;
    bin.end = Math.min(bin.end, bin.start + 5000);
    const binWidth = bin.end - bin.start;
    for (let start = bin.start; start < bin.end; start += WIDTH) {
      bins.push({
        start,
        density: bin.density / (binWidth / WIDTH)
      });
    }
    return bins;
  }, []);
""";

SELECT origin, form_factor.name as client,
       "onload" as metric,
       bin.start / 1000 AS bin,
       SUM(bin.density) as volume
FROM (
  SELECT origin, form_factor, spreadBins(onload.histogram.bin) AS bins
  FROM `chrome-ux-report.all.201808`
  WHERE origin IN ("https://kristdemokraterna.se")
)  
CROSS JOIN UNNEST (bins) as bin  
GROUP BY origin, client, bin

Denna data är grupperad i 0,1 sekunder stora bins/behållare för att göra datamängden lite mer hanterbar.

Om du vill hämta data från flera olika webbplatser kan du istället skriva så här:

WHERE origin IN ("https://webbplats-1.se", "https://webbplats-2.se", "https://webbplats-3.se")

Det fungerar fint att ange flera hundra webbplatser på detta sätt.

När du har din data lokalt som en CSV-fil är det bara att följa exemplet i följande notebook webperf/CrUX analytics.ipynb at master · marcusosterberg/webperf · GitHub

Pandas och matplotlib

För att jonglera med dina data behöver du koda lite pandas och visualiseringen kan du göra med matplotlib. Du har lite exempel i notebooken, men googlar du på det du behöver brukar det finnas gott om kodexempel som hjälper på traven.

Visualiseringen i notebooken är ett spridningsdiagram som visar hur de tio politiska partiernas laddtider är fördelat. Det är en hyggligt lång svans och om du tänker på att man helst ska ha en webbsida inom 2 sekunder så är det ganska vanligt att det inte bra nog.

Hämta adresser från en webbplats

Detta kan vara användbart i alla möjliga situationer, bland annat när du vill ha en lista med adresser att köra genom något verktyg.

Nedan notebook hämtar ut 25 st adresser från Region Hallands webbplats, men du kan ändra dessa standardvärden, glöm dock inte att justera timeout högt upp i filen:

webperf/URL harvesting.ipynb at master · marcusosterberg/webperf · GitHub