Google fonty a GDPR
10. led 2023 17:52 #147673
Ahoj. Jak řešíte fonty? Já vždy načítal (externě) Google fonty, ale je to nyní údajně v rozporu s GDPR, protože si Google ukládá IP adresu. Máte tedy fonty u sebe a načítáte lokálně? (je to asi i rychlejší). Nebo plaším zbytečně? Dík. M.
10. led 2023 19:03 #147674
Odpověď od Linelabcz

Admin
Tady máte nějaké možnosti, také info o tom, co je a není rychlejší
www.joomlaportal.cz/tipy/729-cassiopeia-...pro-ruzne-weby-dil-1
viz Schéma písma.
11. led 2023 08:52 #147675
Odpověď od Martin70

Zkušený uživatel
Díky, funguje mi to. Jenom 2 věci:
1/ DOTAZ - stačí v dnešní době pouze woff a woff2?
2/ do vygenerovaného kódu je potřeba doplnit font-display: swap;
1/ DOTAZ - stačí v dnešní době pouze woff a woff2?
2/ do vygenerovaného kódu je potřeba doplnit font-display: swap;
11. led 2023 15:35 #147678
MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla
Odpověď od Rudolf

Joomla Expert
A pak Vám google dá penalizaci za posunutí obsahu2/ do vygenerovaného kódu je potřeba doplnit font-display: swap;

MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla
12. led 2023 00:41 #147680
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.
Odpověď od Cony

Moderátor
Cumulative Layout Shift (CLS)Rudo, můžeš vysvětlit co je posunutí obsahu?
![]()
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.
Poděkovali: Leoš, Linelabcz, Bong, Rudolf
12. led 2023 03:04 #147681
MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla
Odpověď od Rudolf

Joomla Expert
Díky Cony,
lépe bych to nenapsal.
lépe bych to nenapsal.
MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla