Google fonty a GDPR

Linelabcz napsal:

Rudo, můžeš vysvětlit co je posunutí obsahu?  

Cumulative Layout Shift (CLS)
V podstatě během nahrávání stránek může z mnoha důvodů dojít k posunutí textu / ovládacích prvků apod.
Nejčastěji díky chybějícím rozměrům u obrázků, dynamicky doplňovanými reklamami, ale také právě např. použitím jiného než výchozího fontu. 
V závislosti právě na CSS vlastnosti font-display se prohlížeč chová u fontu různě, standardní chování je ale takové, že chvilku počká (jak dlouhou je dáno tou vlastností a je popsáno v odkazu, který jsem dával v minulém příspěvku), a pokud font do té doby nenahraje (tzn. např. uživatel už ho má v cache, nebo máte extrémně rychlé připojení), vykreslí texty nejprve výchozím systémovým fontem, a až když nahraje font z webu (Google fonts nebo jiného), nahradí vykreslený text tímto fontem. 
Každý font má při stejné velikosti písma jiné rozměry, a to jak výšku tak šířku. Výšku lze úspěšně vyřešit nastavením line-height, šířku už daleko hůř. Může tak v extrému dojít k tomu, že po nahrání správného písma má text o několik řádek více, než při použití systémového písma. Posune pak tedy např. tlačítko o kus vedle, např. v okamžiku, kdy na něj chce uživatel kliknout a on tak klikne na jiný prvek.
Oblíbený příklad Googlu je, že je na mobilu tlačítko potvrdit objednávku a pod ním zrušit objednávku. Rozhodnu se kliknout na zrušit a v tom okamžiku se nahoře nahraje reklama, která mi pod myš posune tlačítko potvrdit a já tak objednám i když jsem nechtěl.
Page Speed Insight je CLS jednou ze sledovaných metrik, na kolik se následně projevuje ve výsledcích hledání nevím, ale určitě stojí za zamyšlení.
Bohužel je to buď a nebo, buď instruuju prohlížeč, aby si počkal na font, pak mi nic neposkočí, mám dobrou metriku CLS, ale zhorším si čas pro vykreslení stránek (First contentful paint - FCP), nebo mu řeknu ať zatím použije zástupný font, mám dobrý FCP ale můžu mít problémy s CLS.
Každý si musí zvolit a zvážit, jak tento rozpor řešit, co je pro jeho web lepší. 
font-display swap preferuje použití zástupného fontu po 100ms, oproti výchozímu chování prohlížeče, kdy se na font čeká až 3s, a až pak se použije zástupný font. U rychlých připojení tak u hodnoty swap dojde k poskočení, a u block (výchozí hodnota) ne a rychlost je velmi podobná. U pomalých to poskočí oboje.