7 oblastí, na ktoré by ste sa mali zamerať, ak chcete ovplyvniť rýchlosť vášho webu ešte dnes

V minulom článku sme rozoberali, ako reaguje návštevník stránky na rýchlosť webu, aké postavenie má pri rýchlosti webu Google a akú latenciu majú mobilné siete. Na nasledujúcich riadkoch si ukážeme konkrétne postupy, ako ovplyvniť rýchlosť načítavania webstránky a akým chybám sa radšej vyvarovať.

Prinášame vám 7 oblastí, na ktoré by ste sa mali zamerať, ak chcete dosiahnuť lepšie načítavanie vášho webu:

1. Veľkosť obrázkov

V prvom rade rýchlosť načítavania webu ovplyvňuje veľkosť obrázkov. Aj keď si možno poviete, že jeden taký obrázok predsa nemôže spomaliť načítavanie webu, viac obrázkov, napríklad na takom väčšom eshope, už môže. Je preto veľmi dôležité, aby ste mali na svojom webe čo najmenšie obrázky – ideálne by mal mať jeden obrázok veľkosť do 100kB, v ojedinelých prípadoch maximálne do 300kB. Uvedené čísla sú len orientačné, preto platí, že čím menší obrázok, tým lepšie.

2. Veľkosť súborov

Okrem samotných obrázkov sa web vykresľuje pomocou súborov, ako napríklad HTML, CSS a Javascript. Tieto súbory sú len textového charakteru, preto nezaberajú vo väčšine prípadov veľa miesta. Ale ako sme už spomenuli v prípade obrázkov, ak sa tých súborov nakopí veľa, môže sa načítavanie stránky zvýšiť aj o polovicu. Preto je potrebné tieto súbory minifikovať (zmenšovať), alebo sa všetky pospájajú do jedného súboru (tzv. merging).

3. Responzívny web

V dnešnej dobe je už samozrejmosťou mať responzívny dizajn na webstránkach. Staré spôsoby presmerovania stránky na mobilnú verziu m.vasastranka.sk/uvod alebo m.vasastranka.sk už dnes neobstoja. Web by nemal mať žiadne presmerovania – to znamená doménu vasastranka.sk s použitím responzívneho dizajnu.

4. Inline CSS a Javascript

Ak je to možné, menšie CSS súbory môžete použiť na stránke inline spôsobom (to znamená, že sa CSS napíše priamo do HTML). Vyhnete sa tak načítavaniu externého CSS súboru. Samozrejme, vždy je najlepšie použiť externý CSS súbor, ale ak obsahuje nejaký CSS súbor len niekoľko riadkov, je lepšie ho použiť inline v HTML. To isté platí pre Javascript.

5. Načítavanie obsahu stránky

Na vykreslenie webstránky je niekedy potrebné načítať väčšie množstvo súborov. Výsledok načítania niektorých súborov nie je v prvom momente viditeľný pre samotného užívateľa (napríklad v prípade pluginu, ktorý rieši galériu). Je preto veľmi dôležité určiť poriadie načítavania súborov a ak je to možné, mali by sa načítavať tie súbory, ktoré sa týkajú vykreslenia hlavného obsahu stránky (napríklad ak sa načíta na stránke bočný panel s galériou skôr ako hlavný článok, ktorý je v strede, zvážte načítanie hlavného článku pred načítaním bočného panelu).

6. Asynchrónny Javascript

Externé Javascripty blokujú vykreslenie samotnej stránky. Ak je to možné, odporúčame použiť atribút “async” v prípade externých Javascriptov:

<script async src=“priklad.js“>

7. Uprednostnite CSS pred obrázkom

CSS v dnešnej dobe dokáže vykresliť rôzne elementy na stránke, ako napríklad vlastné vyrobené ikonky. Namiesto použitia obrázka pre ikonku, skúste túto ikonku vykresliť použitím CSS (ak sa ikonka skladá z farebného okrúhleho pozadia a čísla v strede, je v tomto prípade oveľa lepšie použiť CSS, ako načítať obrázok ikonky). Ušetríte tým nadbytočné sťahovanie obrázka zo servera.

Ukázali sme si niektoré oblasti, na ktoré by ste si mali v prvom rade posvietiť pri riešení rýchlosti načítavania vášej webstránky. Dôležité je si zapamätať, že čím menej dát potrebuje stránka stiahnuť na svoje vykreslenie a čím menej požiadaviek na server sa vykoná, tým je vyššia rýchlosť načítania stránky. Výsledkom našej snahy je, že práve Google takéto stránky uprednostňuje vo výsledkoch vyhľadávania.

Marek Kozela

Aktívne sa venuje získavaniu údajov z web stránok pomocou rozšírenej online aplikácie Google Analytics, ktorá umožňuje sledovať, porovnávať a analyzovať detailné informácie o aktivite a správaní užívateľov na webových stránkach alebo e-shopoch. K tomu mu dopomohlo samoštúdium, ktoré nakoniec viedlo k získaniu certifikácie v službe Google Analytics. Kvalitné stránky musia mať aj kvalitné SEO, čiže aj táto oblasť patrí k jeho hlavným aktivitám. Okrem toho pričuchne aj do prekladu web stránok, pretože dobre vie, že ak návštevník stránke nerozumie, tak zo stránky odíde a majiteľ stránky tak stratí potenciálneho klienta. Zároveň si uvedomuje, že web nie je len to, čo vidí užívateľ na stránke, ale aj to, čo sa skrýva v jeho útrobách. Aj preto väčšinu svojho voľného času venuje štúdiu programovacích jazykov, ktoré sa podieľajú na fungovaní web stránok. Vyštudoval na súkromnej vysokej škole City University of Seattle v Trenčíne. Práve táto zahraničná vysoká škola pôsobiaca na Slovensku mu dala základy angličtiny, ktoré aktívne využíva pri preklade web stránok zo slovenského do anglického jazyka. Na blogu sa bude snažiť hlavne o vysvetlenie problematiky fungovania najrozšírenejšej online aplikácie Google Analytics. Keďže táto aplikácia patrí samotnej spoločnosti Google, rozhodne nevynechá články o tom, ako tento technologický gigant premýšľa a ako ovplyvňuje pozície vo výsledkoch vyhľadávania.

Komentáre

    Pridať komentár

    * Nezabudnite na povinné pole.

    • Novinky

      Chcete byť informovaný o nových článkoch medzi prvými? Zaregistrujte sa a všetko podstatné nájdete v svojej emailovej schránke.

    • Kategorie