Základní optimalizace rychlosti načítání webu

20. 8. 2015

Nedávno jsem tu psal o extrémním tuningu rychlosti načítání webu skrze kritická css a asynchronní načítání stylů a scriptů. Pár dnů po vydání článku mou dílnu opustil web Optika Anděl, na kterém jsem tuto metodiku aplikoval. Klientce jsem se pak při předávání webu poslal odkaz na PageSpeed Insights a vyzval ji, ať najde…

Nedávno jsem tu psal o extrémním tuningu rychlosti načítání webu skrze kritická css a asynchronní načítání stylů a scriptů. Pár dnů po vydání článku mou dílnu opustil web Optika Anděl, na kterém jsem tuto metodiku aplikoval. Klientce jsem se pak při předávání webu poslal odkaz na PageSpeed Insights a vyzval ji, ať najde web s lepšími čísly, načež jsem si pak dva dny připadal jako borec.

Takový tuning je ale docela sofistika, která mě jako autora šablony vede k celkem bizarní práci s technologií. Dá také víc práce to zautomatizovat a vnáší to do vývoje i webu samotného další potenciální místo pro vznik chyb. Také ne vždy je úplně vhodné to takhle “přehánět”, nebo na to jen není prostor. Pak je vhodnější zvolit optimalizaci základnější, obecně již celkem známou, která spočívá ve dvou úkolech:

  1. Spojit a minifikovat všechny javascripty a stylopisy do jednoho souboru = snížit tak počet HTTP požadavků a množství dat.
  2. Všechny javascripty připojit až na konci stránky = neblokovat javascriptem vykreslení stránky.

Tento tuning light je celkem standardní, dobře se automatizuje, lze ho bez kodérova zásahu použít i na již hotové správně napsané šablony, a měl by fungovat i se slušně napsanými pluginy.

Ve WordPressu pak může tuto optimalizaci provádět i člověk bez hlubších znalostí skrze některý z pluginů pro tento účel vytvořených. Mně se líbí tyto dva:

  • minit nemá vůbec žádné nestavování — stačí aktivovat a výsledek je jediný soubor se styly v hlavičce webu (pokud jsou media=all) a jediný soubor se scripty v patičce.
  • JS & CSS Script Optimizer má jednoduché nastavování, dovede pracovat i se styly připojenými pro různá media a obsahuje js packer (scripty jsou tedy ještě menší). Toto je mé typické nastavení:

Tož tak.

← Zpátky na články