Critical CSS

Pokud je načítání vašeho webu pomalé, existuje několik jednoduchých strategií, jak jej zrychlit. Jednou z nich je „kritický inlining CSS“ dovašich stránek. Jak ale postupovat v případě, že vaše stránky obsahují stovky stran nebo v horším případě stovky různých šablon? Důležité je nejprve pochopit, jak přesně prohlížeč vykresluje naše webové stránky z HTML, CSS a JavaScriptu.

Pokud chceme zjistit výkonnost webových stránek, jako první bychom měli zvolit nástroj PageSpeed Insights od Google. Tento nástroj může být velmi užitečný v případě, kdy se snažíte profilovat webové stránky a najít oblasti pro zlepšení. Stačí zadat adresu URL stránky, kterou chcete testovat, a nástroj vám poskytne seznam návrhů pro vylepšení výkonnosti. Když se testem potvrdí, že jsou stránky pomalé, přicházejí na řadu critical CSS.

Co jsou kritické CSS?

Critical CSS určují kroky, které prohlížeč potřebuje provést, aby stránku mohl vykreslit. Kritickým zdrojem je zdroj, který může blokovat počáteční vykreslování stránky.
Ukážeme si to na příkladu. Žádost o soubor CSS může výrazně zvýšit dobu, kterou potřebuje webová stránka k vykreslení. Důvod je prostý. Ve výchozím nastavení prohlížeč vykresluje webovou stránku, dokud není dokončeno načítání, analýza a provádění všech CSS souborů odkazovaných vvaší stránky. Potřebuje totiž vypočíst rozvržení webu. Málokterý návštěvník našeho webu bude mít trpělivost na dlouhé načítání webu. Naštěstí můžeme pomocí kritických CSS optimalizovat poskytování našich CSS a zmírnit blokování. Jak ale určíme, co je považováno za kritické CSS? Určení kritických CSS pro stránku je poměrně složitá věc. Dále musíme stanovit seznam stylů, které v současné době platí pro každý prvek v pohledu. Dělat to manuálně by byl zdlouhavé, ale existuje řada velkých nástrojů, které spustí automatický proces.

Kritická CSS v akci

Chcete-li začít pracovat s kritickými CSS na vašich webových stránkách, je třeba změnit váš přístup k CSS – tedy rozdělit je do dvou souborů. Pro první soubor je nutné extrahovat pouze minimální sadu CSS. Pro druhý soubor, neboli non-critical CSS, provést asynchronní zastřešení, aby nedošlo k zablokování webové stránky. Možná vám na první pohled toto řešení přijde zvláštní, ale inliningem critical CSS do našeho HTML můžeme eliminovat další round-trips v kritické cestě. To nám umožňuje dodávat kritické CSS v jednom „kole“.

Zpočátku se to může zdát jako noční můra. Proč byste ručně chtěli dělat inline úryvky CSS na každé stránce? Dobrá zpráva je, že můžeme využít balíček Node.js (původně vytvořený Addym Osmanim), který umožňuje automaticky extrahovat a zadávat cestu k inline-critical CSS v HTML stránkách. Skvělým pomocníkem je nástroj Grunt, který automaticky zpracuje CSS. Pokud jste nikdy nepoužívali Grunt, projděte si jeho webové stránky, kde najdete velmi podrobnou dokumentaci a celou řadu tipů pro konfiguraci projektu.

Začínáme

Začněme konzolí Node.js a navigací cesty webové stránky. Nainstalujte rozhraní příkazového řádku nástroje Grunt zadáním následujícího příkazu do konzole:

npm install -g grunt-cli

Tím zanesete Grunt příkaz do systémové cesty, což vám umožňuje spustit jej z libovolného adresáře. Dále, nainstalujte Grunt úlohy s následujícím příkazem:

npm install grunt --save-dev

Poté nainstalujte Grunt – critical plugin.

npm install grunt-critical --save-dev

Dále musíte vytvořit Gruntfile, který obsahuje konfiguraci úkolu pro váš projekt. Můj vypadá trochu jako níže uvedený kód.

module.exports = function (grunt) {

grunt.initConfig({
  critical: {
    dist: {
      options: {
        base: './'
      },
      // The source file
      src: 'page.html',
      // The destination file
      dest: 'result.html'
      }
    }
  });

  // Load the plugins
  grunt.loadNpmTasks('grunt-critical');

  // Default tasks.
  grunt.registerTask('default', ['critical']);
};

Ve výše uvedeném kódu je nakonfigurován critical plugin pro soubor mojí stránky page.html. Ten bude zpracovávat CSS proti dané stránce a vypočítávat kritické CSS. Dále bude inlinovat kritické CSS a odpovídajícím způsobem aktualizovat stránku HTML.

Pokud přejdete do složky, měli byste v ní zaznamenat soubor nazvaný result.html, který obsahuje inline kritické CSS a zbývající CSS vložené asynchronně. Vaše webová stránka je nyní připravena na rock and roll!

V zákulisí tento plugin ve skutečnosti používá PhantomJS. To znamená, že je schopen tiše nahrát své webové stránky a testovat na optimální kritické CSS. Tato funkce také dává flexibilitu, pokud jde o různé velikosti obrazovky. Například můžete poskytnout jiné rozměry obrazovky a plugin je bude zachycovat a vloží inline vaše kritické CSS odpovídajícím způsobem.

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'}
    ]
  }
}

Výše uvedený kód umožní spustit vaše stránky na obrazovkách různých rozměrů a zajistit, že uživatelé budou mít stále stejnou „zkušenost“.

Není to dokonalé

Ačkoliv se mnoho nástrojů potřebných k vytvoření a vkládání inline critical CSS neustále zlepšuje, přesto stále existuje několik oblastí pro zlepšení. Pokud si všimnete chyby v projektu, otevřete diskuzi k projektu na GitHubu.

Optimalizace vykreslování kritickou cestou má před sebou ještě dlouhou cestu. Pomocí této techniky však už nyní můžeme rychle zajistit, aby se vaše stránka načetla bez zdržení.

Zdroj:
http://www.smashingmagazine.com/2015/08/understanding-critical-css/

Komentáře nejsou povoleny.