Page tree
Skip to end of metadata
Go to start of metadata

Co je to Critical CSS?

Jak zapnout

global.yml nebo local.yml
resource:
    enable_critical_css: true

Kdy se projeví

Tato feature se projeví za předpokladu že:

  • jsme na front-endu
  • critical CSS feature je konfiguračně zapnuta 
  • existuje soubor /public/css/front-critical.css
  • Není přítomna cookie, která značí, že je uživatel na stránce poprvé a nemá tak plnohodnotné CSS v cache prohlížeče


 /**
  * @return bool
  */
 protected function isCriticalCssRequired()
 {
     // am i on frontend?
     // is critical css enabled ?
     // is critical file present? /public/css/front-critical.css
     // is not cookie present
     // -> go

     $isFrontend = !Strings::startsWith($this->getRequest()->getPathInfo(), '/system/manager');
     $isCriticalCssEnabled = Vivo\Application::getInstance()->config['resource']['enable_critical_css'];
     $criticalCssFilePath = $this->getCriticalCssFilePath();
     $criticalCssExists = file_exists($criticalCssFilePath);
     $isCookiePresent = isset($_COOKIE[self::CRITICAL_CSS_COOKIE_NAME]);

     return $isFrontend && $isCriticalCssEnabled && $criticalCssExists && !$isCookiePresent;
 }

Jakým způsobem se projeví

V případě že projdou všechny podmínky (viz výše), obsah souboru front-critical.css se vloží do hlavičky HTML (head) jako inline style.

Poté se do hlavičky vloží inline JS funkce loadCSS, která zajistí asynchroní načtení plnohodnotné CSS.

Generování souboru front-critical.css

Předpoklad pro zafungování critical CSS na Vivu je přítomnost souboru public/css/front-critical.css. Název i místo uložení je důležité.

FE vývojář musí jeho vygenerování zajistit v daném řešení.

Pro automatické vygenerování critical CSS lze využít několika grunt pluginů.

Podoba konfigurace je individuální podle řešení a vybraného grunt tasku.

Příklad použití grunt pluginu grunt-criticalcss

criticalcss: {
  all: {
    options: {
      url: '<FULL_HTTP_URL>',                            // url webu, pro který chceme vytvořit critical CSS soubor
      width: 1200,                                       // šířka viewportu při generování CSS
      height: 900,                                       // výška viewportu při generování CSS
      outputfile: 'public/css/front-critical.css',       // místo uložení a název výsledného souboru
      filename: 'public/css/front.css',                  // hlavní CSS soubor ze kterého se vytvoří critical CSS soubor
      ignoreConsole: true                                // potlačení chyb v konzoli
    }
  }
},


Interní mechanismy

Cookie s názvem critical-css se vytvoří v případě, že není v prohlížeči uživatele přítomna, nebo když expirovala její životnost.

Její přitomnost značí, že není potřeba spuštět celý mechanismus critical-css featury Viva, protože uživatel již daný web navštívil a plnohodnotnou CSS má v cache prohlížeče.

Životnost cookie je nastavena na 7 dní.

loadCSS

Tato funkce od filamentgroup (github), která je v hlavičce vložena inline, zajistí asynchroní načtení plnohodnotné CSS.

Vivo zajistí zavolání této funkce se správnými parametry, vypadá to následovně:

var stylesheet = loadCSS("/css/front.css", false, "screen");

Pokud potřebujeme z nějakého duvodu zavolat callback po načtení CSS, lze toho docílit takto:

if (typeof onloadCSS !== 'undefined' && typeof stylesheet !== 'undefined') {
  onloadCSS(stylesheet, function() {
    // custom code
  });
}



  • No labels