feat: pass the Starlight gate on dense pages

Pages of cards under one or two headings drop the table of contents,
whose script watched every block of a 400-card page: 2 x 430 ms of
main thread on a throttled phone. Tables are measured once the page is
idle, skipping those in closed blocks, so a scrolling table is a tab
stop anywhere on the page. The 12 heaviest pages score 97 to 100 in
Lighthouse mobile, axe reports nothing on 16 pages in both themes, and
the search answers the ten gate queries.
This commit is contained in:
Abdessamad Derraz committed 2026-10-22 17:21:14 +02:00
1 parent bcade3dc9b
commit abe240073c
4 files changed
+27 -4

No files matched your search

+14 -1
View File
@@ -131,7 +131,20 @@ const enhanceTables = () => {
},
{ rootMargin: '400px 0px' },
);
tables.forEach((table) => observer.observe(table));
// Every table is measured once the page is drawn and idle, before anything
// is written, so the read finds the layout done instead of forcing it: a
// keyboard reaches a scrolling table anywhere on the page, not only near
// the screen.
const idle = window.requestIdleCallback ?? ((callback: () => void) => setTimeout(callback, 1));
const start = () =>
idle(() => {
// A table in a closed block is not laid out, and measuring it would
// lay it out: it is measured when its block opens.
markScrollable(tables.filter((table) => table.checkVisibility?.() ?? true));
tables.forEach((table) => observer.observe(table));
});
if (document.readyState === 'complete') start();
else addEventListener('load', start, { once: true });
let timer = 0;
addEventListener('resize', () => {
clearTimeout(timer);