2b:null 2c:["$","title",null,{"children":"Loaded image pixels vs painted device pixels, LCP only | Eric Portis | Observable"}] 31:[{"id":"9471491603dbb304ff3e12921a69dae12d1e7c1018f70d74dd76e50ef3db40e3d2f9add2e39dfa966dc51dd94f942df74eb983b6390b0b25ee89726ff0a5e929","href":"https://static.observableusercontent.com/files/9471491603dbb304ff3e12921a69dae12d1e7c1018f70d74dd76e50ef3db40e3d2f9add2e39dfa966dc51dd94f942df74eb983b6390b0b25ee89726ff0a5e929","name":"bq-results-20221027-135250-1666878968297.csv","type":"text/csv","lastModified":1666879040742.331,"size":5268876}] 2f:{"id":"e4b921f6df6f2104","slug":null,"title":"Loaded image pixels vs painted device pixels, LCP only","thumbnail":null,"access_level":"public","create_time":"$D2022-10-27T13:56:25.246Z","update_time":"$D2022-10-27T21:25:27.762Z","view_time":null,"first_public_time":"$D2022-10-27T13:56:25.246Z","fork":{"id":"518f7de822daa05a","slug":null,"title":"Loaded image pixels vs painted device pixels, per image","owner":{"id":"3301827868803b5f","login":"eeeps","name":"Eric Portis"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":371,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Loaded image pixels vs painted device pixels, LCP only","cells":[{"id":4,"value":"# Loaded image pixels vs painted device pixels, LCP `` only\n\nUsing the [HTTP Archive](https://httparchive.org) dataset. [Here’s the query](https://gist.github.com/eeeps/d990c0be6f9f2566ae4f212f90eb7342).\n\n[Note](https://almanac.httparchive.org/en/2021/methodology#webpagetest) that the “mobile” crawler was 512×360px @ **3x** and the “desktop” crawler was 1376×768px @ **1x**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof client = Inputs.radio([\"mobile\", \"desktop\"], {label: \"Client\", value: \"desktop\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof colorScaleType = Inputs.radio([\"log\", \"linear\"], {label: \"Color scale\", value: \"log\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof domainMax = Inputs.range([0.01, 5], {label: \"Max megapixels\", step: 0.01, value: 2.5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Plot.legend({color: chart.scale(\"color\"), width: width })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"chart = Plot.plot({\n width: width,\n height: width - 100,\n marginLeft: 100,\n x: {domain: [0, domainMax], label: \"Painted megapixels →\"},\n y: {domain: [0, domainMax], label: \"Loaded megapixels ↑\"},\n color: {\n scheme: \"bupu\",\n type: colorScaleType\n },\n marks: [\n Plot.rect(pixelsPerImage, {\n filter: (d => d.loadedImageMegapixels > 0 && d.paintedDeviceMegapixels > 0 && d.client === client),\n y1: (d => d.loadedImageMegapixels),\n y2: (d => d.loadedImageMegapixels + 0.01),\n x1: (d => d.paintedDeviceMegapixels),\n x2: (d => d.paintedDeviceMegapixels + 0.01),\n fill: \"numberOfImages\",\n inset: 0\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof threshold = Inputs.range([0, 1], {label: \"acceptable error %\", step: 0.01, value: 0.05 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"{\n const data = [\n {size: 'too small', percent: tooSmall/totalImages},\n {size: 'just right', percent: justRight/totalImages},\n {size: 'too big', percent: tooBig/totalImages}];\n return Plot.plot({\n x: {\n percent: true,\n },\n color: {\n type: \"categorical\",\n domain: ['too small', 'just right', 'too big'],\n range: [\"goldenrod\", 'forestgreen', 'tomato']\n },\n marks: [\n Plot.barX(data, Plot.stackX({\n order: d => ['too small', 'just right', 'too big'].indexOf(d.size),\n x: \"percent\",\n fill: \"size\",\n insetLeft: 1\n })\n ),\n Plot.ruleX([0]),\n Plot.text(data, Plot.stackX({\n order: d => ['too small', 'just right', 'too big'].indexOf(d.size),\n x: \"percent\",\n text: \"size\",\n fill: \"white\",\n fontWeight: \"600\"\n }))\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"{\n const data = [\n {density: '< 1x', percent: underOneX/totalImages},\n {density: '1x-2x', percent: oneToTwoX/totalImages},\n {density: '2x-3x', percent: twoToThreeX/totalImages},\n {density: '>3x', percent: overThreeX/totalImages},\n ];\n return Plot.plot({\n x: {\n percent: true,\n },\n marks: [\n Plot.barX(data, Plot.stackX({\n order: d => data.map(d => d.density).indexOf(d.density),\n x: \"percent\",\n fill: \"#353433\",\n insetLeft: 1\n })\n ),\n Plot.ruleX([0]),\n Plot.text(data, Plot.stackX({\n order: d => data.map(d => d.density).indexOf(d.density),\n x: \"percent\",\n text: \"density\",\n fill: \"white\",\n fontWeight: \"600\"\n }))\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"pixelsPerImage = FileAttachment(\"bq-results-20221027-135250-1666878968297.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"loadedOverPaintedPixels = pixelsPerImage\n .filter( d => d.client === client )\n .map( d => ({ client: d.client, numberOfImages: d.numberOfImages, loadedOverPainted: d.loadedImageMegapixels / d.paintedDeviceMegapixels }) )\n .reduce( (acc, cv) => {\n let existing = acc.find( d => d.loadedOverPainted === cv.loadedOverPainted && d.client === cv.client );\n if ( existing ) {\n existing.numberOfImages += cv.numberOfImages;\n } else {\n acc.push(cv);\n }\n return acc;\n }, [] )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"totalImages = loadedOverPaintedPixels.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"tooSmall = loadedOverPaintedPixels\n.filter( d => d.loadedOverPainted < 1 - threshold )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"tooBig = loadedOverPaintedPixels\n.filter( d => d.loadedOverPainted > 1 + threshold )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"justRight = loadedOverPaintedPixels\n.filter( d => d.loadedOverPainted >= 1 - threshold && d.loadedOverPainted <= 1 + threshold )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"densities = loadedOverPaintedPixels.map( d => {\n return {\n client: d.client,\n numberOfImages: d.numberOfImages,\n density: d.loadedOverPainted * (d.client === \"mobile\" ? 3 : 1 ) \n };\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"underOneX = densities\n.filter( d => d.density < 1 )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"oneToTwoX = densities\n.filter( d => d.density >= 1 && d.density < 2 )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"twoToThreeX = densities\n.filter( d => d.density >= 2 && d.density < 3 )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"overThreeX = densities\n.filter( d => d.density >= 3 )\n.reduce( (acc, cv) => acc + cv.numberOfImages, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"