Toolkit to measure difference in web vitals when <img>
is server-side rendered in every <amp-img>
.
If you have a large set of URLs, then simply run:
npm install
node filter.js my_list_of_urls.txt > fetch_all.sh
chmod +x fetch_all.sh
./fetch_all.sh
./benchmark.sh
Otherwise, see individual steps.
npm install
A text file containing URLs is filtered and outputs a shell script:
node filter.js my_list_of_urls.txt > fetch_all.sh
chmod +x fetch_all.sh # make runnable
- Takes a list of URLs of AMP documents, or documents that link to an AMP version
- Filters them randomly*
- Resolves AMP version if linked
- Prints as shell commands, to output into script (
> fetch_all.sh
)
# file is written like:
node fetch.js `printf "%q" "https://paired-amp/amp/url.html"`
node fetch.js `printf "%q" "https://amp-first/url.html"`
# etc.
* optional additional argument for inclusion probability:
node filter.js my_list_of_urls.txt 0.000045 > fetch_all.sh
use 1
to include all urls:
node filter.js my_list_of_urls.txt 1 > fetch_all.sh
To transform the previously filtered URLs, execute output script:
./fetch_all.sh
Otherwise, run command for an individual URL:
node fetch.js "https://some-url-probably-amp.com/some/path"
...which inserts into output/
:
output/
some--url--probably--amp-com/
url.txt # full url
amp-img__unoptimized.html # as-is
amp-img.html # optimized
img.html # optimized, using native <img>
amp-img.html
and img.html
are transformed like a cache would by using the AMP optimizer.
Use tachometer
to measure for LCP and CLS on documents transformed previously:
./measure.sh
This compares metrics between optimized output documents:
output/**/amp-img.html
output/**/img.html
Results are output as result-*
files:
output/
some--url--probably--amp-com/
...
result-lcp.json # LCP: full results
result-lcp.csv # LCP: summary table
result-cls.json # CLS: full results
result-cls.csv # CLS: summary table
LCP and CLS are measured using a PerformanceObserver
, see inline-perf-script.js
to see how results are measured.