Generátor Critical CSS

Critical CSS je malá časť vašich štýlov, ktorú potrebuje prvá obrazovka. Po vložení sa stránka môže vykresliť skôr, než dorazia úplné štýlové súbory. Generátor je funkcia Pro na karte Vyrovnávacia pamäť a optimalizácia, pod poľom Critical CSS. Nepotrebuje nič inštalovať na serveri, pretože predvolený nástroj beží vo vašom prehliadači.

Ako ho vygenerovať

1. Otvorte Baza Helper > Vyrovnávacia pamäť a optimalizácia a posuňte sa k poľu Critical CSS.
2. Vyberte Adresa stránky (predvolene domovská stránka) a Veľkosť obrazovky: Mobile 390 x 844, Desktop 1440 x 900 alebo Both.
3. Stlačte Generovať automaticky a počkajte. Skryté rámce načítajú podpísanú kópiu stránky a zberač prečíta, ktoré pravidlá prvá obrazovka používa.
4. Pozrite si kartu výsledku: starú a novú veľkosť, upozornenia, rozdiel rozloženia v percentách a zmenšený náhľad.
5. Stlačte Použiť na uloženie alebo Cancel, ak chcete všetko nechať tak, ako bolo.

Pred stlačením Apply sa nič neukladá a vaše štýlové súbory sa nikdy nemenia. Predchádzajúca hodnota sa najprv uchová a Obnoviť predchádzajúcu verziu ju vráti (pamätá sa posledných 5 verzií).

Ako sa stránka číta

• Stránka sa načíta ako neprihlásený návštevník cez podpísaný odkaz platný 15 minút, takže administračná lišta ani vaše prihlásenie sa do výsledku nedostanú.
• Pravidlo zostane, ak jeho selektor zodpovedá prvku, ktorý má na prvej obrazovke rámček. Pravidlá, ktoré prvok na prvej obrazovke skrývajú, sa zachovajú v skrátenej podobe.
• Pravidlá hover a focus, pravidlá tlače, pravidlá pod prvou obrazovkou a nepoužité @font-face, @keyframes a @property sa vynechajú.
• Poradie @layer, obaly @media, @supports a @container, vlastné vlastnosti a poradie kaskády sa zachovajú. Rovnaké pravidlá sa zlúčia a ostane posledná kópia.
• Vlastné vlastnosti, ktoré nikto nepoužíva, sa zahodia. Vložené súbory (url(data:…) od 3000 znakov) sa vynechajú a nahlásia.
• Výstup je minifikovaný a obsahuje len ASCII.

Limity a bezpečnosť

• Výsledok je obmedzený na 64 KB. Ak sa prekročí, správa ukáže, čo zaberá miesto (vlastné vlastnosti, písma, animácie, pravidlá media, najväčšie skupiny tried).
• Povolené sú len adresy vášho webu, na portoch 80 a 443, bez prihlasovacích údajov.
• Spustenia prebiehajú po jednom, najviac 12 za hodinu a s odstupom 8 sekúnd pre každého používateľa.
• Web, ktorý zakazuje vkladanie do rámcov (X-Frame-Options alebo frame-ancestors), nahlási, že rámec bol zablokovaný.
• Nečitateľné štýlové súbory z iných zdrojov sa nahlásia ako upozornenia.

Použitie s odloženými štýlmi

Po použití critical CSS môžete uviesť Handle štýlov na načítanie po critical CSS. Tieto štýly sa potom načítajú bez blokovania prvého vykreslenia, so záložným riešením bez JavaScriptu. Neúplné critical CSS môže spôsobiť záblesk nenaštýlovaného obsahu, preto si prvú obrazovku pozrite na telefóne aj na počítači.

Nastavenie Používať Critical CSS len na domovskej stránke je predvolene zapnuté. Critical CSS sa vytvára z jednej stránky a iné stránky majú iné pravidlá prvej obrazovky, takže by s odloženými štýlmi mohli na chvíľu zablikať bez štýlov. Keď je zapnuté, iba domovská stránka dostane vložený Critical CSS a odložené štýly a ostatné stránky načítajú štýly ako zvyčajne. Keď je vypnuté, používa ich celý web a akceptujete možné zablikanie na stránkach, ktoré sa líšia od tej, z ktorej sa vytvoril.

Nastavenie zahŕňa vložený CSS, odkazy na odložené štýly, zlúčený odložený súbor, skript, ktorý štýly zapína, a písma načítané vopred z Critical CSS. Každý odložený štýl sa zapína postupne a obrazovka sa meria raz, keď je prehliadač nečinný.

Pre vývojárov

Voliteľný serverový worker (Node 18+ s Chromium) vie generovať CSS bez karty prehliadača a ďalšie generátory sa pridávajú cez filter baza_helper_critical_css_generators. Aktívny sa vyberá cez baza_helper_critical_css_generator.