Font Fallback en CLS

…in de context van de Kernwebinstellingen

Het laden van een douanedoopvont (een doopvont die niet door gebrek door alle browsers) wordt gekend kan sommige vertragingen in de ladingsopeenvolging en a CLS(Cumulatieve Verschuiving van de Lay-out) probleem gemakkelijk introduceren. Dit geldt voor de eerste pagina die op uw site wordt geladen, totdat het lettertype in de cache van de browser wordt geplaatst.

U kunt proberen het aangepaste lettertype vooraf te laden en/of te drukken, maar er zal altijd een tijd zijn waarop de browser de hoofdtekst met een standaardlettertype rendert. Dit geldt met name voor langzame apparaten of bij een langzame verbinding. U kunt het volledige lichaam verbergen tot de doopvont wordt geladen, maar dan zullen de FCP(Eerste Voorwaardelijke Verf) en LCP(Grootste Voorwaardelijke Verf) scores hoogst worden gestraft.

U kunt ook CSS-trucs gebruiken zoals font-display: optional , maar het lettertype wordt mogelijk niet geladen via een langzame verbinding: de browser heeft de instructie om het na een bepaalde (korte) vertraging te negeren.

Deze laatste oplossing verhindert niet dat de CLS-score wordt beïnvloed: wanneer u het lettertype omwisselt, kan de grootte van de inhoud veranderen en kan de lay-out "verschuiven".

Er is een ander mechanisme dat kan worden gebruikt om deze twee problemen te voorkomen (vertraging bij het laden van lettertypen en CLS): gebruik een fallback.

Het idee van de fallback is om een standaardlettertype van een browser te schalen, zodat de inhoud, wanneer deze wordt toegepast op de inhoud van een pagina, dezelfde 'ruimte' inneemt met de fallback en met het aangepaste lettertype. Op deze manier kunt u het ene zonder lay-outverschuiving omwisselen. Als u een standaardlettertype gebruikt dat 'ongeveer gelijk' is aan het aangepaste lettertype, zien die paar milliseconden waarin pagina's voor het eerst worden geladen er ongeveer zo uit als u het aangepaste lettertype wilt gebruiken. Vervolgens kunt u het laden van het aangepaste lettertype uitstellen of het lettertype in de laadvolgorde op zijn minst niet blokkeren.

De fallback-extensie

Wij hebben de uitbreiding van het a chroomgebouwd helpen de doopvontreserve berekenen.

Wanneer u de extensie op een pagina opent, worden op die pagina de lettertypen geanalyseerd die op die pagina worden gebruikt: een lettertype is een combinatie van lettertypefamilie en tekendikte. Nu kunt u voor elk lettertype een standaardbrowserlettertype selecteren en de fallback-berekening uitvoeren. Voor elk lettertype berekent de extensie welke size-adjustment van het standaardbrowserlettertype is vereist, zodat de inhoud dezelfde breedte heeft voor beide lettertypen.
De berekening vindt alleen plaats op de breedte, omdat de hoogte moet worden bepaald door line-height : stel een line-height op uw site in om te voorkomen dat het lettertype bepaalt wat de hoogte van de tekst is. Dit geldt voor alinea's, koppen en lijsten…

Opmerking: bij lettertypekits bestaat de neiging om veel lettertypen te laden die nooit worden gebruikt (of ergens anders op de site worden gebruikt dan op de huidige pagina). De extensie geeft ook aan hoeveel items in totaal zijn geladen. Het is ook een goede indicator als er iets kan worden geoptimaliseerd: optimaliseer de fontkit door de fontvlakken te reduceren, u kunt veel bytes opslaan om over te dragen!

Nadat de berekeningen zijn uitgevoerd, kunt u de berekende CSS kopiëren en in de hoofd-CSS plakken.

De gegenereerde lettertypefamilies moeten worden toegevoegd na het aangepaste lettertype in uw CSS font-family : de browser zoekt aanvankelijk het aangepaste lettertype niet en gebruikt de fallback totdat later het aangepaste lettertype is geladen. Aangezien zij de zelfde ruimte gebruiken, produceert het ruilmiddel geen CLS!

Als u de waarde voor het aanpassen van het lettertype wilt verfijnen, kunt u ook het deelvenster Simulatie gebruiken.

Als u dit selectievakje inschakelt, wordt het aangepaste lettertype vervangen door het berekende terugvallettertype rechtstreeks op de pagina. Met de tekstinvoer kunt u de waarde van size-adjust wijzigen en het resultaat direct visualiseren (u moet het selectievakje telkens inschakelen wanneer u de waarde wijzigt).

Edge-kwesties

De extensie maakt een berekening op basis van een bestaande site met bestaande inhoud en CSS-regels. In een andere context past size-adjust mogelijk niet perfect en produceert de lettertypeswap mogelijk nog steeds CLS:

U vindt meer technische details en andere gereedschappen rechtstreeks in de opslagplaats voor extensies: https://github.com/adobe/helix-font-fallback-extension