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.