7 spôsobov, ako okamžite zrýchliť vašu webovú stránku

Najskôr musíte presne vedieť, aká rýchla alebo pomalá vaša webová stránka vlastne je. Už sme si povedali, že cieľom je načítanie za 2-3 sekundy. Bohužiaľ pre internetových používateľov na celom svete, väčšina stránok sa tomuto cieľu ani nepribližuje. Google totiž analyzoval státisíce vstupných stránok v 126 krajinách a zistil, že 70 % stránok sa načítava až sedem sekúnd.

Au.

To je bieda. Zlá správa je, že doslova milióny online marketérov nechávajú peniaze na stole. Veľa peňazí. Keby vedeli koľko, asi by plakali. Dobrá správa je, že dostať vašu stránku z tejto šedej zóny medzi tie, ktoré sa načítajú za tri sekundy alebo menej, by nemalo byť príliš zložité.

Ako teda zistíte, ako rýchlo sa váš web skutočne načítava? Navštívte testovací nástroj Pingdom – je zadarmo – a zadajte svoju URL. O pár sekúnd (alebo dlhšie) budete mať všetky podrobnosti. Potom je čas vyhrnúť si rukávy a pustiť sa do práce.

#1 Urobte svoj server šťastnejším s menším počtom Http požiadaviek

Štíhly text na vašom webe takmer nezaťaží prehliadač návštevníka. To, čo spôsobuje úzke miesta a spomalenia, sú všetky ďalšie prvky ako skripty, obrázky, videá a štýly. Každý takýto prvok na stránke znamená samostatnú požiadavku na server. Webdizajnéri často robia chybu, že na stránku jednoducho dajú priveľa „veci“. Neuvedomujú si, že takto spotrebujú neuveriteľné množstvo šírky pásma a nakoniec skončia medzi 70 % stránok, ktoré sa načítavajú viac než štyri sekundy.

Ak si hovoríte, že musíte znížiť počet HTTP požiadaviek, máte pravdu! Je to naozaj také jednoduché. Menej HTTP požiadaviek na server znamená – ak je všetko ostatné rovnaké – rýchlejšiu stránku. Znamená to tiež, že musíte skutočne zvážiť, či každý prvok na vašom webe je potrebný. Každý znamená samostatnú požiadavku na server.

Chcete vedieť, koľko požiadaviek má vaša stránka? Pozrite sa do výsledkov z Pingdomu a nájdete odpoveď. Čo je už priveľa? Na to neexistuje jednoznačná odpoveď. Najlepšie je analyzovať svoj web a rozhodnúť, či je daný prvok dôležitý. Ak nie, zbavte sa ho.

#2 Optimalizujte obrázky, ktoré kradnú šírku pásma

V začiatkoch internetu bolo obrázkov málo a dominoval text. Ako technológie napredovali, najmä pri rýchlosti pripojenia, majitelia webov začali pridávať obrázky vo veľkom. Ak je to spravené správne, nie je to vôbec zlá stratégia. Nič nepritiahne pozornosť návštevníka tak, aby „si sadol a chvíľu zostal“, ako pútavý obrázok (dobre fungujú palmy aj šteniatka).

Nevýhodou je, že fotky zo smartfónu či online databáz majú často niekoľko megabajtov a žerú šírku pásma ako Cookie Monster na víkendovej žranici. Keď ich pridáte do desiatok či stoviek článkov, váš web sa načítava bolestivo pomaly.

Riešenie je jednoduché. Použite grafický editor ako Photoshop alebo Pixlr (bezplatná online alternatíva), ak nechcete míňať stovky eur za softvér. Pri veľkých obrázkoch ukladajte vo formáte .jpeg (alebo .jpg) a snažte sa o veľkosť do 100 kilobajtov. Samozrejme, o optimalizácii obrázkov by sa dali napísať celé knihy, ale základ je, že zmenšením veľkosti súboru stránku zrýchlite.

#3 Cache v prehliadači = spokojní vracajúci sa návštevníci

Ak to server povolí, väčšina bežných prehliadačov vie „cachovať“ alebo ukladať súbory do dočasnej pamäte, kým ich znova nepotrebuje. Funguje to takto:

• Prvýkrát príde návštevník na vašu stránku.
• Server povie prehliadaču, nech si „zapamätá“ určité statické prvky, ako logá, obrázky, text.
• Keď sa návštevník vráti, tieto cachované prvky sa zobrazia okamžite, čo ho poteší.

Prehliadač teda rýchlo zobrazí statické prvky bez potreby sťahovať ich zo servera. Dynamické (menené) prvky potrebujú požiadavku na server, aby sa stiahla najnovšia verzia, čo trvá dlhšie.

Výhoda – a dôvod, prečo sú návštevníci spokojní – je, že majú aspoň niečo na obrazovke, kým sa dynamický obsah načíta. Mať obrázky alebo aspoň nejaký obsah na stránke je lepšie než veľká biela plocha s točiacim sa presýpacím hodinami. Šanca, že návštevník zostane, je tak vyššia. Ak vám fráza „cache v prehliadači“ naháňa hrôzu, zavolajte technickú podporu vášho webhostingu a nechajte si to nastaviť.

#4. Komprimujte vašu stránku

Online nájdete rôzne odhady, ale v zásade platí, že nekomprimovanú stránku môžete vďaka Gzipu zmenšiť o 50 až 90 %. Menšie súbory potrebujú menej šírky pásma a načítajú sa rýchlejšie. Gzip je open source formát, ktorý zbalí (skomprimuje) všetky súbory vašej stránky do jedného balíka.

Keď prehliadač požiada o stránku, dostane súbor s názvom ako index.html.gz namiesto bežného index.html. Po doručení tento balík prehliadač rýchlo rozbalí a zobrazí návštevníkovi.

Dobrý príklad úspory veľkosti súboru je hlavná stránka Yahoo, ktorá má nekomprimovaná asi 101 kb, no po zipovaní len 10 kb. Áno, Gzip to môže spraviť aj pre vašu stránku.

Nemôžete síce donútiť prehliadač, aby stiahol len zipovanú verziu, ale môžete aspoň nastaviť server, aby ponúkal obidve možnosti. Pre niekoho so skúsenosťami je to jednoduché. Ak to nie ste vy, ďalší telefonát na technickú podporu hostingu vyrieši problém.

#5. Najskôr optimalizujte CSS

Optimalizácia sa netýka len obrázkov. Platí aj pre CSS (kaskádové štýly). Keď sa pozriete na CSS, čo vidíte? Veľa kódu, ale zrejme aj veľa prázdnych miest. Štýly sú dôležité – na to nezabúdajte – ale nemusia byť „pekné“ na pohľad.

Pozrite si príklad CSS nižšie. Vyzerá to pekne a prehľadne, čo? S dokonale zarovnaným textom, ktorý hovorí prehliadaču, ako má stránku vykresliť. Všimnite si však všetky tie prázdne miesta. Každé z nich robí súbor väčším. Keď sa to zopakuje stokrát alebo tisíckrát, súbor je zbytočne veľký. Dobrá správa je, že to nemusíte ručne premazávať.

Existujú skvelé online nástroje, ako bezplatný CSS Minifier, ktorý vezme štandardné CSS ako toto…

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

…a urobí z neho toto.

p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}

V podstate všetko natlačí dohromady, aby sa neplytvalo miestom. Pri snahe o rýchlejšie načítanie webu pomáha každý detail.

#6 Keby ste mohli svoju stránku „preložiť“…

Občas sa aj internet učí od sveta tlače a fráza „pod záhybom“ (below the fold) je toho príkladom. Ak ste už videli kôpku novín v stánku, viete, že sú preložené tak, aby ste hneď videli najdôležitejšie správy na vrchu. Menej dôležité veci sú schované pod záhybom.

Tento princíp sa hodí aj pri usporiadaní HTML kódu vášho webu, najmä pri práci s JavaScriptom (JS), ktorý môže načítanie a zobrazovanie stránky úplne zastaviť. Namiesto toho, aby ste JS dali na začiatok dokumentu, vložte ho na koniec sekcie body. Tak zaistíte, že sa najskôr načítajú ostatné prvky, a návštevník má čo pozerať, kým sa skript nedostiahne.

Inak zostane obrazovka prázdna, kým sa JS úplne nenačíta. Prázdna obrazovka je pozvánka pre netrpezlivého návštevníka, aby odišiel. Dajte mu niečo, čo môže sledovať, kým sa rozšírené možnosti JavaScriptu objavia. Vidíte? Aj internetoví nováčikovia sa môžu učiť od novinovej éry 20. storočia.

#7 Vyberte inú možnosť ako zdieľaný webhosting

Či už prevádzkujete e-shop alebo web slúži ako hlavný nástroj propagácie služieb, cieľ je rovnaký – stránka sa musí načítať rýchlo. Potenciálni zákazníci, ktorí musia čakať na obsah, dlho nepočkajú. Odišli by. Často sa zabúda na to, že jeden z najzákladnejších výberov – typ webhostingu – môže mať obrovský dopad na rýchlosť webu.

Zdieľaný hosting je lacný (niekedy dokonca zadarmo), ale zriedka je tou správnou voľbou. Za nízku cenu hostiteľ napchá na jeden server priveľa stránok a výkon tým trpí. Ešte horšie je, že zdroje ako šírka pásma, úložisko a výkon procesora sa delia medzi všetky stránky. Ak jedna spotrebuje priveľa, ostatné sa načítavajú pomaly, zamŕzajú alebo sa vôbec nedajú načítať.

Ak váš web nie je len hobby, zdieľaný hosting nie je dobrá voľba.

Lepšou možnosťou pre firemný web je za pár eur mesačne navyše dedikovaný alebo virtuálny server (VPS), ktoré zaistia, že vaša stránka bude mať vyhradené zdroje bez obáv z „susedov“.

Navyše, s manažovaným VPS hostingom v porovnaní s nemanžovaným, získate aj dodatočnú podporu od poskytovateľa hostingu.

Ak to so svojou online prezentáciou myslíte vážne, dôrazne odporúčame zvážiť alternatívy k zdieľanému hostingu.

Ak vám toto všetko príde príliš technické, možno zvážte použitie niektorej z aplikácií na tvorbu webov tretích strán. Umožňujú vytvoriť stránku od nuly pomocou jednoduchého drag and drop editora. Okrem toho sú cenovo výhodné a o webhosting sa postarajú za vás. Stránky hostované týmto spôsobom sa načítavajú spravidla rýchlejšie než na vlastnom serveri. Vy sa tak môžete sústrediť na to, čo vám ide najlepšie – tvorbu obsahu a rast návštevnosti.

Záverečné myšlienky

Ak sa na chvíľu pozrieme na veci z nadhľadu, dôkladné plánovanie by malo byť prvým krokom pri budovaní webu. Teda starostlivo vyberajte, ktoré prvky na stránku zaradíte. Je každý z nich naozaj nevyhnutný? Hľadajte ľahké (veľkosťou súboru) témy a kvalitne napísané a overené pluginy . Inými slovami, navrhujte stránku s dôrazom na rýchlosť už od začiatku. Vyhnete sa tak neskoršiemu laborovaniu, keď zistíte, že je váš web pomalý a zbytočne žerie šírku pásma.

Jedno je isté. Ako používatelia internetu budú čoraz náročnejší – najmä pokiaľ ide o streamovanie audia, videa a interaktívne funkcie – veľkosť súborov bude len rásť. Preto musia majitelia webov dbať na to, aby rýchlosť časom neklesala. Najlepším prístupom je pravidelne robiť testy a neustále hľadať možnosti na vylepšenie, aby váš web vždy fungoval ako dokonale vyladený stroj, akým chcete, aby bol.