Ako oddialiť načítanie nekritických CSS

Keď vytvárate stránky vo WordPress a následne ich optimalizujete, niekedy záleží na každej milisekunde, aby ste sa dopracovali k lepšiemu výsledku. Jednou z možností, ako to dosiahnuť je „oddialiť“ načítanie nekritických CSS súborov.

Predtým, ako si zvolíte, ktoré súbory CSS chcete oddialiť z načítavania, musíte si zistiť ich handle, pod ktorým boli registrované. Nie je to vôbec nič ťažké, keďže tento handle je zároveň použitý, ako ID pre link daného CSS súboru tag.

Príklad registrácie súboru CSS:

wp_enqueue_style( 'viking-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );

…prvý parameter funkcie, pre pridanie skriptu do hlavičky je práve náš handle.

…a takto to vyzerá vygenerované na frontende:

<link rel="stylesheet" id="viking-style-css" href="https://wp-admin.sk/wp-content/themes/vikingtheme/assets/css/viking-style.min.css?ver=1.0" media="all">

Tu si všimnite, že na koniec handle je pridaná prípona -css to je pridané pri generovaní. Prečo sa pri tom pozastavujem? Pretože takto si viete získať handle, ktoréhokoľvek CSS súboru, nie iba tých, ktoré ste si registrovali, ale ktoré sú pridané pluginmi.

Ak už máte všetky handle, ktoré vám blokujú vykreslenie stránky a ste si istý, že sú nekritické, použite ich v tomto snippete:

/**
 * Oddialenie načítania súborov CSS
 * @param $html
 * @param $handle
 * @param $href
 * @param $media
 *
 * @return string
 *
 * url: https://wp-admin.sk/wordpress/ako-oddialit-nasitanie-nekritickych-css/
 */
function viking_defer_blocking_css( $tag, $handle, $href, $media ) {
  // vytvorenie poľa s handlermi css súborov, ktoré chceme oneskoriť
  $handlers = [ 'wp-block-library', 'ugb-style-css', 'contact-form-7', 'classic-theme-styles', 'wordpress-popular-posts-css', 'bodhi-svgs-attachment', 'codemirror-blocks-' ];
  if ( in_array( $handle, $handlers ) ) {
    $tag = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">'
      . '<noscript>' . $tag . '</noscript>';
  }
  
  return $tag;
}
add_filter( 'style_loader_tag', 'viking_defer_blocking_css', 10, 4 );

V prvom rade, použili sme filter style_loader_tag, ktorý nám poskytol 4 parametre.

$tag – kompletný tag, generovaný WordPress-om (ako v príklade vyššie)
$handle – registrovaný pre tento CSS súbor
$href – url CSS súboru
$media – pre ktoré médiá, je CSS súbor registrovaný

$handlers je pole s našimi handler-mi a pomocou php funkcie in_array(), zistíme, či aktuálny handler je niektorý z tých, ktorým chceme oddialiť načítanie.

Vytvoríme si nový html tag za pomoci premenných, kde zmeníme hodnotu atribútu rel na preload, čo nám zabezpečí oddialenie načítania, nastavíme attribút as na style a pridáme atribút onload s JavaScript-om.
Tento JavaScript zabezpečí, že po načítaní sa hodnota atribútu rel zmení na stylesheet. „Nulovanie“ – prvá časť skriptu zabezpečí, aby sa v niektorých prehliadačoch, nespustil opäť onload, po zmene atribútu.

Nakoniec do párovej značky <noscript></noscript>, uložíme pôvodný tag. Takto zabezpečíme, že aj návštevníkom, ktorí majú vypnutý JavaScript, sa načíta súbor správne.

Tento snippet, patrí do functions.php, vašej aktuálnej témy.

Kredit ide: https://web.dev/defer-non-critical-css/ a https://developer.wordpress.org/reference/hooks/style_loader_tag/

Môžte pokračovať na článok: Ako nastaviť načítavanie JavaScriptu, aby neblokovali vykreslenie stránky

5 1 vote

Hodnotenie článku