Rýchlosť vašich stránok bude novým ukazovateľom zohľadňovaným pri tzv. crawlingu a následnom umiestňovaní týchto stránok vo vyhľadávaní. Je preto potrebné mať o ňom dostatočný prehľad. Jednou stránkou veci je zmerať si rýchlosť vašich stránok. Druhou je práca s neoptimálnymi výsledkami. Teraz sa pozrieme na obe.
Google PageSpeed Insights (PSI) je rozhranie, ktoré sleduje rýchlostný výkon vašich stránok. Kontrola rýchlosti je dôležitá. Rýchlostné skóre je jedným z ukazovateľov, ktoré ovplyvňujú vašu pozíciu vo vyhľadávaní. Zároveň môže ovplyvniť aj vašich potenciálnych zákazníkov. Podľa údajov Google, až 53% používateľov zatvorí stránku, ktorá sa nenačíta do 3 sekúnd.
Vďaka jeho najnovšej aktualizácii môžete sledovať až dve skóre – Rýchlosť stránky a Optimalizáciu. Teda nielenže tento nástroj zmeria rýchlosť vašej stránky, ale zároveň vám ponúkne aj tipy pre jej optimalizáciu. Vybrali sme 9 z nich, ktoré by mohli byť pre váš online biznis prospešné.
1.) Vyhnite sa presmerovaniam vstupnej stránky
Presmerovania začínajú nový cyklus HTTP požiadavka-odpoveď, čím oneskorujú renderovanie stránky. Občas je týchto cyklov príliš veľa, čo môže spôsobiť rôzne dlhé procesy a znížiť výkonnosť stránky.
Google odporúča vytvorenie responzívnej webstránky, s maximálne jedným presmerovaním z danej URL adresy do finálnej vstupnej stránky.
Ak potrebujete presmerovania využívať, rozlišujte medzi presmerovaniami 301 (permanentné, napr. pokiaľ ste vymazali starý obsah a presmerovanie vedie k novému) a 302 (dočasný, napr. stránky pre špecifické zariadenia). V prípade rozdielu medzi presmerovaniami JavaScript a HTTP, podporuje Google obe.
2.) Povoľte kompresiu
Keď zmenšíte váš obsah, skrátite tým čas potrebný pre stiahnutie zdroja, čo ušetrí dáta používateľov, ale aj čas pri renderovaní vašej stránky. Google odporúča využiť gzip pre všetok obsah, ktorý je možné zkompresovať.
Medzi ďalšími pokročilými možnosťami je odstránenie všetkých nepotrebných údajov, alternatívy ku gzip kódovaniu, alebo využitie rôznych spôsobov kompresie pre rôzne zdroje.
3.) Zlepšite dobu odozvy servera
Rýchla odozva servera je základom.
Doba odozvy servera meria, koľko trvá načítanie potrebného kódu HTML, aby sa stránka začala zobrazovať, pričom sa odčíta oneskorenie siete medzi serverom Google a vašim serverom.
Odporúčaná doba odozvy servera je pod 200ms. Túto dobu môže ovplyvňovať množstvo faktorov. Prvým krokom je detekcia problému, teda meranie. Po meraní by ste mali vysokú dobu odozvy servera konzultovať s expertami a aj po vyriešení problému ju stále kontrolovať.
4.) Využite cache prehliadača
Pri získavaní prostriedkov prostredníctvom siete sa odohráva mnoho cyklov medzi klientom a serverom, čo môže znamenať dlhšiu dobu odozvy. Tento pomalý a drahý proces môžete eliminovať politikou ukladania do vyrovnávacej pamäte, ktorá klientovi pomôže zistiť či a kedy je možné využiť odpovede z minulosti.
Každá z politík by mala zodpovedať otázky:
- Je možné uložiť zdroj do vyrovnávacej pamäte?
- Kto ho môže uložiť?
- Ako dlho môže byť uložený?
- Ako môže byť úspešne obnovený keď doba uloženia vyprší?
Ďalšími riešeniami sú ETags a Cache-Control. Efektívne obnovenie vďaka ETags odstráni zbytočný transfer údajov, pokiaľ sa zdroj od jeho posledného zažiadania nezmenil. Cache-Control naopak zodpovedá za kontrolu toho, ako a po akú dlhú dobu má prehliadač uloženú odpoveď, potrebnú pre komunikáciu so serverom, vo vyrovnávacej pamäti.
5.) Minifikujte HTML, CSS a JavaScript
Minifikácia je proces, ktorý eliminuje nadbytočné údaje zo zdrojov, ktoré boli doručené návštevníkom, čo môže mať veľký vplyv na celkovú rýchlosť a výkonnosť vašej stránky. Neovplyvňuje pritom spôsob, ktorým je zdroj spracovaný prehliadačom. Existujú rôzne nástroje, ktoré vám s minifikáciou pomôžu – napríklad HTMLMinifier, CSSNano, UglifyJS a ďalšie.
6.) Optimalizujte obrázky
Obrázky zaberajú nadpolovičnú väčšinu veľkosti vášho webu a môžu byť príčinou pre pomalší crawling a rýchlosť načítania stránky. Podobne ako webstránka, aj obrázky by mali byť responzívne, aby sa prispôsobovali veľkosti zariadenia a nespomaľovali komunikáciu so serverom.
Optimalizáciu môžete dosiahnuť aj využívaním správnych rastrových formátov, zredukovaním nepotrebných obrázkov, odstránením meta údajov a ďalšími možnosťami. Neexistuje jediný najlepší spôsob toho, ako to spraviť, a preto odporúčame vyskúšať viacero možností.
7.) Optimalizujte zobrazovanie CSS
Pred tým, než je stránka renderovaná, musí spracovať CSS. Pokiaľ CSS nejakým spôsobom blokuje renderovanie, načítanie si vyžaduje viacero cyklov, ktoré spôsobia jeho spomalenie.
Google odporúča vložiť malé CSS priamo do HTML dokumentu, aby boli odstránené malé externé CSS zdroje. Veľké CSS nevkladajte, lebo budú mať opačný efekt.
8.) Dajte prioritu viditeľnému obsahu
V prípade, že množstvo požadovaných údajov prekročí počiatočné okno preťaženia, komunikácia servera a prehliadača bude komplikovanejšia. Takéto narušenie komunikácie môže mať dopad hlavne na používateľov smartfónov, ktoré budú stránku načítavať dlhšie.
Tento problém môžete vyriešiť tak, že vášmu HTML dáte štruktúru, ktorá bude zvýhodňovať kritický, viditeľný obsah. Druhou možnosťou je zredukovanie údajov, ktoré používajú vaše zdroje.
9.) Odstráňte JavaScript blokujúci rendering
Než prehliadač renderuje stránku, musí vytvoriť DOM syntaktickou analýzou HTML. Vždy keď sa parser (syntaktický analyzátor) stretne so skriptom, musí zastaviť a spustiť ho, aby mohol pokračovať v analýze HTML kódu.V prípade externého skriptu musí parser čakať na prevziatie príspevku, čo môže viesť ku zdĺhavej komunikácii a oneskorenej dobe odozvy.
Ak nájdete takýto problém, prerobte JavaScript tak, aby neblokoval renderovanie. Taktiež môžete odložiť načítavanie, ktoré nie je potrebné pre aktuálnu stránku.
