JensandClaude Opus 5
70157400d9
De inlogpagina haalde 1,46 MB over de lijn, waaronder de volledige kaartmotor van 213 kB terwijl er geen kaart staat. De werkbank is nu een aparte brok die pas na aanmelden geladen wordt: de eerste JS-bundel gaat van 476 naar 30 kB, en met de beeldwerk uit een eerdere commit komt de inlogpagina op 344 kB. Bij het opstarten gingen 27 verzoeken de deur uit in drie golven. Alles werd vooraf opgehaald, ook voor werkbladen die de gebruiker misschien nooit opent, en twee daarvan werden dubbel opgevraagd door effecten die negentig milliseconde na elkaar liepen. Gelijktijdige en vlak opeenvolgende identieke GET-verzoeken delen nu één belofte, en elk werkblad haalt zijn eigen gegevens pas op wanneer het geopend wordt. Nu zestien verzoeken. Typen in het themazoekveld kostte 53 ms mediaan met uitschieters tot 127 ms, omdat die filterwaarde in het viewmodel van de hele werkruimte leefde. Het veld is een eigen component geworden dat zijn invoer zelf bijhoudt. React.memo om de kaart is geprobeerd en weer verwijderd: van de negentien props worden er te veel per render opnieuw gemaakt, dus de vergelijking sloeg nooit over. Verder: donker blijft de standaard maar er is nu een weg terug naar licht, de kaartondergrond schakelt mee zonder de datalagen te herbouwen, de onderste hero-afbeelding wordt pas opgehaald als hij in beeld komt, en de werkbank heeft een h1 zodat schermlezers een ankerpunt hebben. De tests op de bootstrap legden het oude gedrag vast en toetsen nu het nieuwe, van drie naar zeven gevallen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
|
|
/**
|
|
* Stelt een achtergrondafbeelding uit tot het element in beeld komt.
|
|
*
|
|
* Achtergronden in CSS kennen geen loading="lazy": zodra de regel matcht, gaat
|
|
* het verzoek eruit. Op de landingspagina betekende dat drie afbeeldingen van
|
|
* samen 413 kB bij het openen, terwijl twee ervan pas ver onder de vouw staan.
|
|
*
|
|
* Het element krijgt hier pas het attribuut data-achtergrond="geladen" wanneer
|
|
* het in de buurt van het scherm komt; de CSS hangt de url aan dat attribuut.
|
|
* Zonder IntersectionObserver — of met beperkte beweging — wordt de afbeelding
|
|
* meteen gezet, zodat er nooit een leeg vlak achterblijft.
|
|
*/
|
|
export function useDeferredBackground<T extends HTMLElement>(): React.RefObject<T> {
|
|
const ref = useRef<T>(null)
|
|
|
|
useEffect(() => {
|
|
const element = ref.current
|
|
if (!element) return
|
|
|
|
const toon = () => element.setAttribute('data-achtergrond', 'geladen')
|
|
|
|
if (typeof IntersectionObserver === 'undefined') {
|
|
toon()
|
|
return
|
|
}
|
|
|
|
const waarnemer = new IntersectionObserver(
|
|
(invoeren) => {
|
|
if (invoeren.some((invoer) => invoer.isIntersecting)) {
|
|
toon()
|
|
waarnemer.disconnect()
|
|
}
|
|
},
|
|
// Ruim voor de vouw beginnen, zodat de afbeelding er staat voordat de
|
|
// gebruiker hem bereikt.
|
|
{ rootMargin: '600px' },
|
|
)
|
|
waarnemer.observe(element)
|
|
return () => waarnemer.disconnect()
|
|
}, [])
|
|
|
|
return ref
|
|
}
|