Skip to content

Commit fa26265

Browse files
committed
[Fizz] Shorten throttle to hit a specific target metric (#33463)
Adding throttling or delaying on images, can obviously impact metrics. However, it's all in the name of better actual user experience overall. (Note that it's not strictly worse even for metric. Often it's actually strictly better due to less work being done overall thanks to batching.) Metrics can impact things like search ranking but I believe this is on a curve. If you're already pretty good, then a slight delay won't suddenly make you rank in a completely different category. Similarly, if you're already pretty bad then a slight delay won't make it suddenly way worse. It's still in the same realm. It's just one weight of many. I don't think this will make a meaningful practical impact and if it does, that's probably a bug in the weights that will get fixed. However, because there's a race to try to "make everything green" in terms of web vitals, if you go from green to yellow only because of some throttling or suspensey images, it can feel bad. Therefore this implements a heuristic where if the only reason we'd miss a specific target is because of throttling or suspensey images, then we shorten the timeout to hit the metric. This is a worse user experience because it can lead to extra flashing but feeling good about "green" matters too. If you then have another reveal that happens to be the largest contentful paint after that, then that's throttled again so that it doesn't become flashy after that. If you've already missed the deadline then you're not going to hit your metric target anyway. It can affect average but not median. This is mainly about LCP. It doesn't affect FCP since that doesn't have a throttle. If your LCP is the same as your FCP then it also doesn't matter. We assume that `performance.now()`'s zero point starts at the "start of the navigation" which makes this simple. Even if we used the `PerformanceNavigationTiming` API it would just tell us the same thing. This only implements for Fizz since these metrics tend to currently only by tracked for initial loads, but with soft navs tracking we could consider implementing the same for Fiber throttles. DiffTrain build for [6ccf328](6ccf328)
1 parent 7cc8093 commit fa26265

37 files changed

+119
-109
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
d177272802b7f86a847312c23b7e60a6f56434de
1+
6ccf328499f06c140ffe96a096744c22319394cc
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
d177272802b7f86a847312c23b7e60a6f56434de
1+
6ccf328499f06c140ffe96a096744c22319394cc

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-classic-d1772728-20250606";
1540+
exports.version = "19.2.0-www-classic-6ccf3284-20250606";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-modern-d1772728-20250606";
1540+
exports.version = "19.2.0-www-modern-6ccf3284-20250606";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-classic-d1772728-20250606";
638+
exports.version = "19.2.0-www-classic-6ccf3284-20250606";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-modern-d1772728-20250606";
638+
exports.version = "19.2.0-www-modern-6ccf3284-20250606";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-classic-d1772728-20250606";
642+
exports.version = "19.2.0-www-classic-6ccf3284-20250606";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-modern-d1772728-20250606";
642+
exports.version = "19.2.0-www-modern-6ccf3284-20250606";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19105,10 +19105,10 @@ __DEV__ &&
1910519105
(function () {
1910619106
var internals = {
1910719107
bundleType: 1,
19108-
version: "19.2.0-www-classic-d1772728-20250606",
19108+
version: "19.2.0-www-classic-6ccf3284-20250606",
1910919109
rendererPackageName: "react-art",
1911019110
currentDispatcherRef: ReactSharedInternals,
19111-
reconcilerVersion: "19.2.0-www-classic-d1772728-20250606"
19111+
reconcilerVersion: "19.2.0-www-classic-6ccf3284-20250606"
1911219112
};
1911319113
internals.overrideHookState = overrideHookState;
1911419114
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19142,7 +19142,7 @@ __DEV__ &&
1914219142
exports.Shape = Shape;
1914319143
exports.Surface = Surface;
1914419144
exports.Text = Text;
19145-
exports.version = "19.2.0-www-classic-d1772728-20250606";
19145+
exports.version = "19.2.0-www-classic-6ccf3284-20250606";
1914619146
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1914719147
"function" ===
1914819148
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18877,10 +18877,10 @@ __DEV__ &&
1887718877
(function () {
1887818878
var internals = {
1887918879
bundleType: 1,
18880-
version: "19.2.0-www-modern-d1772728-20250606",
18880+
version: "19.2.0-www-modern-6ccf3284-20250606",
1888118881
rendererPackageName: "react-art",
1888218882
currentDispatcherRef: ReactSharedInternals,
18883-
reconcilerVersion: "19.2.0-www-modern-d1772728-20250606"
18883+
reconcilerVersion: "19.2.0-www-modern-6ccf3284-20250606"
1888418884
};
1888518885
internals.overrideHookState = overrideHookState;
1888618886
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -18914,7 +18914,7 @@ __DEV__ &&
1891418914
exports.Shape = Shape;
1891518915
exports.Surface = Surface;
1891618916
exports.Text = Text;
18917-
exports.version = "19.2.0-www-modern-d1772728-20250606";
18917+
exports.version = "19.2.0-www-modern-6ccf3284-20250606";
1891818918
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1891918919
"function" ===
1892018920
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)