Add --enable-cache option to benchmark-web-vitals to enable browser cache
#201
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
I wanted to get more resolution in the chart. The initial data I collected had a 10K step for incrementing the Updated benchmarking script#!/bin/bash
set -e
echo 'styles_inline_size_limit, uncached, cached, css_inline_bytes, external_stylesheet_links' > results.csv
number=10
step=1000
max=120000
device="Moto G4"
network="Fast 4G"
for styles_inline_size_limit in $(seq 0 $step $max); do
echo "styles_inline_size_limit=$styles_inline_size_limit"
echo -n $styles_inline_size_limit >> results.csv
echo -n ', ' >> results.csv
url="http://localhost:8000/2025/10/20/post-with-many-block-types/?active_plugins=increase-styles-inline-size-limit.php&switched_off=true&script_debug=0&styles_inline_size_limit=$styles_inline_size_limit"
time npm --silent run research -- benchmark-web-vitals --url="$url" --number="$number" --network-conditions="$network" --emulate-device="$device" --output=csv | grep "LCP-TTFB" | cut -d ',' -f 2 | tr -d '\n' >> results.csv
echo -n ', ' >> results.csv
time npm --silent run research -- benchmark-web-vitals --url="$url" --number="$number" --network-conditions="$network" --emulate-device="$device" --output=csv --enable-cache | grep "LCP-TTFB" | cut -d ',' -f 2 | tr -d '\n' >> results.csv
echo -n ', ' >> results.csv
curl $url > /tmp/page.html
xmllint --html --xpath '//style/text()' /tmp/page.html 2>/dev/null | sed ':a;N;$!ba; s/<!\[CDATA\[\n//g; s/\s\]\]>//g' | wc -c | tr -d ' \n' >> results.csv
echo -n ', ' >> results.csv
xmllint --html --xpath 'count(//link[@rel="stylesheet"])' /tmp/page.html 2>/dev/null | tr -d '\n' >> results.csv
echo >> results.csv
doneChart with additional resolution: 
Raw data
|
|
I did the above test in the wordpress-develop environment and I just realized that while static assets were being served with diff --git a/tools/local-env/default.template b/tools/local-env/default.template
index 995913fb45..ecce8ea780 100644
--- a/tools/local-env/default.template
+++ b/tools/local-env/default.template
@@ -25,6 +25,11 @@ server {
try_files $uri $uri/ /index.php?$args;
}
+ location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+ expires 1y;
+ add_header Cache-Control "public, no-transform";
+ }
+
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;Now static assets return with: Expires: Mon, 26 Oct 2026 03:41:48 GMT
Cache-Control: max-age=31536000
Cache-Control: public, no-transformFortunately, I re-ran the tests and found a negligible different in the 
Raw Data
|
|
For completeness, I've also done the benchmarking with broadband. Benchmarking Script#!/bin/bash
set -e
echo 'styles_inline_size_limit, uncached, cached, css_inline_bytes, external_stylesheet_links' > results.csv
number=10
step=1000
max=120000
device="Moto G4"
network="broadband"
for styles_inline_size_limit in $(seq 0 $step $max); do
echo "styles_inline_size_limit=$styles_inline_size_limit"
echo -n $styles_inline_size_limit >> results.csv
echo -n ', ' >> results.csv
url="http://localhost:8000/2025/10/20/post-with-many-block-types/?active_plugins=increase-styles-inline-size-limit.php&switched_off=true&script_debug=0&styles_inline_size_limit=$styles_inline_size_limit"
time npm --silent run research -- benchmark-web-vitals --url="$url" --number="$number" --network-conditions="$network" --emulate-device="$device" --output=csv | grep "LCP-TTFB" | cut -d ',' -f 2 | tr -d '\n' >> results.csv
echo -n ', ' >> results.csv
time npm --silent run research -- benchmark-web-vitals --url="$url" --number="$number" --network-conditions="$network" --emulate-device="$device" --output=csv --enable-cache | grep "LCP-TTFB" | cut -d ',' -f 2 | tr -d '\n' >> results.csv
echo -n ', ' >> results.csv
curl $url > /tmp/page.html
xmllint --html --xpath '//style/text()' /tmp/page.html 2>/dev/null | sed ':a;N;$!ba; s/<!\[CDATA\[\n//g; s/\s\]\]>//g' | wc -c | tr -d ' \n' >> results.csv
echo -n ', ' >> results.csv
xmllint --html --xpath 'count(//link[@rel="stylesheet"])' /tmp/page.html 2>/dev/null | tr -d '\n' >> results.csv
echo >> results.csv
done
👉🏻 For broadband as well as with Fast 4G, increasing the Raw Results
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This facilitates testing the CWV metrics for repeated page views when assets (e.g. stylesheets, scripts, images) have been cached in the browser. This is to obtain the data needed to implement Core-63018: Increase styles_inline_size_limit from 20,000 bytes.
Example usage:
Query parameters enable increase-styles-inline-size-limit.php plugin via the active-plugins-override.php mu-plugin.
The
wp-config.phpalso has:The page looks like this:
There is 87,650 bytes of inlinable CSS on the page. When it is all inlined, then there are zero render-blocking stylesheets present.
post_contentOutput:
Graph:
File sizes of minified block styles: https://gist.github.com/westonruter/f781ba5b6c9ac538a43977a8d2879730