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.

Peter Švec
Venuje sa prevažne dizajnu, tvorbe stratégií a marketingu. Niekedy aj niečo zobchoduje a poskytuje nadštandardný servis niektorým naším klientom. Dokáže sa na veci pozrieť komplexne a pri dizajne hlása cestu minimalizmu: “Dizajn je dobrý vtedy ak už nie je čo odobrať” Okrem výtvarného umenia a spevu, ktorému sa venuje takmer celý život, venoval sa aj ďalším “mimoškolským” aktivitám. Na strednej škole založil školské rádio a časopis. Študentskému rádiu, spevu a hlavne dizajnu sa venoval aj na vysokej škole. Pracoval v niekoľkých reklamných agentúrach a dva roky pôsobil aj v slovenskom rozhlase ako externý redaktor publicistiky. Podieľal sa aj na tvorbe mnohých dokumentárnych filmov a hudobných videoklipov. Je spolumajiteľom a spoluzakladateľom internetovej agentúry magnetica. Zastáva názor, že najväčší kapitál firmy sú ľudia. Nedá dopustiť na tímovú prácu a uvedomuje si, že sila tímu závisí od kvality jeho najslabšieho člena. Vo svojich blogoch píše o zážitkoch a skúsenostiach pri práci s klientami, o dizajne ale aj o absencii (nie len) sedliackého rozumu pri tvorbe webu, marketingových materiálov a stratégií.
Komentáre

Pridať komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře.

  • 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