V průběhu svého působení jsem se již setkal s mnoha weby a mnoha rozmanitými problémy jejich majitelů, kteří s nimi měli určité úmysly. Ještě větší rozmanitosti můžeme naleznout zejména u internetových obchodů, které jsou velkou chloubou jejich majitelů. Takový internetový obchod by měl být krásný, originální, profesionální, působivý, přitažlivý, ohromivý… a další podobné nesmysly, které se můžeme mnohdy dočíst v projektovém zadání a designové specifikaci.
Jednoduše řečeno, pokud již někdo má velký internetový obchod, kromě toho, aby mu vydělával, tak hlavně chce, aby byl působivý a návštěvníky ohromil a zaujal. Internetový obchod je následně jako malé dítě daného majitele, který se o něj stará a věnuje mu všechnu svoji péči. Mnohdy se však můžeme setkat s případy, kdy lidé procházejí takovou obchodní schizofrenií, kdy vlastně nevědí, co je jejich cílem, nebo spíše zapomínají na hlavní účel a funkce webu.
Tak tomu bylo také v případě nejmenovaného internetového obchodu se snubními a zásnubními prsteny, který byl sice navržen jako internetový obchod a tuto funkci měl také plnit. Hlavním cílem majitele však bylo, aby web působil ohromivě, oslnivě a aby byl jako jedna velká galerie všech jeho šperků, které prodává. Za tímto účelem byl také navržen celý design, který splňuje všechno, kromě základních podmínek a pravidel konverzeschopnsoti. Celý web se tedy dostal do stádia, kdy byl krásný jako velké umělecké dílo, u kterého strávíme hodiny prohlížením všech křivek a detailů a budeme ohromeně koukat na tu oslnivou krásu.
Kdo z nás si ale takové umělecké dílo koupí, že? Pokud však chceme, aby náš web působil oslnivě, potřebujeme k tomu také mnoho krásných obrázků, kterých v tomto případě bylo opravdu nepřeberné množství, neboť jenom nabídka snubních prstů čítá okolo 100 různých kusů. Všechny tyto faktory měly samozřejmě negativní vliv na celé fungování webu, který se následkem toho dlouhodobě potýkal se špatnými konverzními schopnostmi. Velké problémy zde však byly také z hlediska SEO problematiky, neboť web byl špatné indexován a nacházelo se zde značné množství problémů z hlediska on-page faktorů. Největší problém však spočíval zejména v rychlosti načítání webu, která byla značně ovlivněna zejména nepřeberným množstvím kvalitních a působivých obrázků.
Při průvodní analýze celého webu, kdy jsem se také plně zaměřil na důkladné testování rychlosti načítání webu, jsem byl zděšen, neboť při záměrném throttlingu prohlížeče určeného na Regular 4G síť s rychlostí stahování 4Mb/s byla průměrná rychlost načítání výpisu produktů okolo 18s. Jedná se o rychlost internetu, se kterou v dnešní době pracuje největší část uživatelů, ať již bydlí dále od větších měst, nebo se k internetu připojují skrze Wi-Fi, kde je rychlost načítání webu silně ovlivněna propustností routeru a také celkovém zatížení sítě.
V každém případě musí být každému jasné, že taková rychlost načítání webu je trestuhodná a má velmi závažný vliv na celkovou konverzeschopnost, ale také Bounce Rate webu. Největší zásah však přišel ze strany Google, který začátkem nového roku začal plně prosazovat a upřednostňovat nová pravidla pro kvalitu webu, kdy jedním z hlavních faktorů ovlivňujících kvalitu webu je zejména rychlost načítání. Právě to mělo za následek propad organické návštěvnosti na téměř polovinu, což se také velmi závažně a negativně projevilo na celkových tržbách provozovatele. Byl to také ten největší podnět k tomu, aby provozovatel webu souhlasil s větším zásahem do struktury webu, díky čemuž bychom mu mohli pomoci opět pozvednout návštěvnost a navýšit tržby.
Optimalizace datového toku
Chcete-li dělat svoji práci opravdu dobře a kvalitně, musíte být na danou problematiku odborníkem a hlavně se nesmíte obklopovat lidmi, jejichž názor z daleka nekoresponduje s odborným názorem. Tak tomu bylo také v případě tohoto projektu, neboť hlavní zadání od výše postaveného Account Managera bylo, aby na webu začal probíhat linkbuilding, který by přivedl nové zákazníky.
Každý alespoň trochu zkušený SEO specialista již musí zde vycítit hlavní problém, neboť linkbuilding a obecně budování pozic ve webových vyhledávačích je věc dlouhodobá, nákladná a hlavně nám nikdy nemůže zaručit, že za měsíc přivede tisíc nových návštěvníků, jak by bylo asi zapotřebí. Pokud by se tak i stalo a opravdu celá problematika takto fungovala, pořád zde máme velký problém v podobě vysokého Bounce Ratu, špatných konverzních vlastností a dlouhého načítání webu. To v překladu znamená, že pokud přivedeme tisíc nových návštěvníků, stejně jich 70% ztratíme. Proč se tedy raději nezaměřit na návštěvníky, které již momentálně máme a neumožnit jim lépe a jednodušeji nakupovat?
Hlavním cílem proto bylo, umožnit návštěvníkům rychleji načítat a prohlížet web. Jak toho ale docílit, abychom zachovali kvalitu webu, ale naopak citelně zvýšit rychlost načítání, když víme, že jsme obecně omezeni nějakými 4Mb/s? Odpověď je jednodušší, než by se mohlo zdát – optimalizovat datový tok webu. Pokud se zamyslíme nad strukturou webu, můžeme narazit na celou řadu souborů, ať již jde o soubory se styly nebo také funkčními JavaScripty, které mnohdy brání při vykreslování a sestavování CSSOM.
V tomto případě načítání každého souboru zabíralo přibližně 200ms, kdy takových souborů bylo v hlavičce webu více, jak 15. Zde bylo nutno přistoupit na model asynchronního načítání skriptů, který však s sebou nese také mnoho problémů, neboť na webu mohou být použity interní skripty, které mohou chtít při načítání kooperovat s již původně vytvořenými objekty. U mnohých JS knihoven také můžeme narazit na problémy s asynchronním načítáním, kdy je nakonec nutno přesměrovat celý datový tok tak, aby bylo možno udržet systematičnost a data-flow celého webu.
Optimalizace obrázkových zdrojů
Datové soubory jsou již vyřešeny, ale v celkovém důsledky jejich optimalizace znamená ušetření přibližně 2.5s – 3s, což je sice skvělé, ale 15s načítacího času pořád jistě není něco, čím bychom se chtěli chlubit. Na řadu proto musela přijít razantní optimalizace a komprese velikosti obrázkových zdrojů. Na mnoha webech můžeme narazit na častý problém v podobně načítání velkých obrázkových zdrojů, které jsou následně za pomoci stylů zmenšovány a upravovány do požadované velikosti tak, aby svými rozměry odpovídaly požadavkům designu webu.
Na řadu proto muselo přijít důkladné prověřování velikosti všech obrázků a jejich předpokladů na velikost, tak, aby mohlo dojít k záměrné změně jejich velikostí a kompresi. Na základě všech nashromážděných dat byly následně obrázky velikostně přizpůsobeny tak, aby nedošlo ke ztrátě zobrazované kvality, ale aby zároveň jejich datový objem nebyl větší, než je opravdu nutné. Díky tomu jsme ušetřili neuvěřitelných 24Mb, čímž se celková doba, potřebná pro načtení webu, snížila o dalších 6 sekund, a to na celkových 9s. Nejedná se sice pořád o nijak úžasný čas načítání, avšak vzhledem k daným možnostem můžeme tento čas považovat za skvělý.