Dobrý web musí být nejen hezký a přehledný, ale také rychlý. Rychlost načítaní stránky přímo vplývá nejen na dobrý zážitek uživatele z webu, ale také na to, jestli ho vůbec navštíví. Průzkumy ukazují, že až 30 % návštěvníků opouští stránky, načítají-li se déle než 10 sekund. V Shockworks využíváme mnoho technik na optimalizaci načtení e-shopů. Jednou z nich je i snižování počtu a velikosti požadavků na server.
Proč nezahltit server
Mnoho lidí se domnívá, že pomalé načítání souvisí čistě s velikostí obsahu stránky. Tento předpoklad není úplně pravdivý. Mnohdy se může web, který má celkový obsah datově nenáročný, načítat pomaleji než mnohem větší weby. Může za to příliš velký počet požadavků na server.
Téměř každá moderní stránka potřebuje ke svému provozu velké množství malých souborů. Ty zahrnují obrázky, styly, skripty, které zabezpečují funkcionalitu jednotlivých elementů. Každý z těchto souborů představuje jeden požadavek pro server, na kterém web běží. Čas potřebný na zpracování požadavku může při malých velikostech souborů převýšit čas nutný na jejich stažení prohlížečem.
Jak nezahltit server
Princip technik, které používáme, zmínil kolega Petr Křížan v svém článku o spritech. Kromě obrázku je možné spájet, tzv. konkatenovat, i styly a skripty. Tyto techniky ale můžou přinášet i nečekané komplikace. Spojit více souborů do jednoho samo o sobě problém není, důležité však je zachovat správné pořadí. To platí zejména pro skripty, které někdy ke svému běhu požadují jiné skripty. Proto se při konkatenaci musí dbát na správné pořadí, jinak stránka může zůstat nefunkční.
Výsledkem úspěšné konkatenace jsou dva soubory místo několika desítek, co může zrychlit web o několik sekund. Při optimalizaci pak zacházíme ještě dále, protože takto vzniklé soubory již nemají zanedbatelnou velikost a proto je vyplatí snažit je ji zmenšit. Tento proces se nazývá minifikace. Ze souborů se vynechávaní mezery a opakující slova jsou nahrazovány zkratkami. Většinou mají minifikované soubory poloviční velikost než jejich původní verze.
Příklad minifikace javascriptu:
Původní skript
function sum(num1, num2) {
return num1 + num2;
}
Minifikovaný skript
function sum(A,B){return A+B;}
Minifikací se kód stává pro člověka téměř nečitelný a úplně nepřehledný. Při vývoji a analýze funkcionality stránky je však nutné mít přehled o tom, kde se co nachází. Proto používáme tzv. source mapy, nebo-li zdrojové mapy. V nich je zapsána informace o tom, který element používá kterou část stylů a skriptů. Takto máme dokonalou dokumentaci toho, ve kterém řádku, a ve kterém původním souboru se část kódu nachází i když prohlížeč má k dispozici už jen konkatovanou a minifikovanou verzi.
