Rýchlosť webu: 5 osvedčených tipov, ako zrýchliť svoj web

Rýchlosť webu

Ste spokojní s rýchlosťou načítania sa vašej web stránky?

Sedíte doma, router svieti na zeleno. Načítanie vašej web stránky na domácom laptope trvá pár sekúnd. Je to v pohode, že? 

Čo však skúsiť to na 3G vonku, ako to robí polovica vašich potenciálnych zákazníkov? 

Viete, že priemerný používateľ zavrie okno načítavajúcej sa stránky už po 2 sekundách, pokiaľ sa mu na obrazovke nič nezjaví?

Ak váš web dizajnér špecificky neoptimalizoval rýchlosť načítavania, potom si môžete byť istí, že vašu stránku ľudia opúšťajú skôr, ako sa im stihnete prezentovať.

Trvá desať sekúnd, než sa na 3G načíta 300KB (2 sekundy na 4G). Priemerná webstránka má v roku 2019 “váhu” 2300 KB! Web je dnes skutočne absurdne tlustý! 

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-9.png

Dôvod? 

Málo web developerov prihliada na optimalizovanie kúskov, z ktorých sa webstránka skladá. 

(Zábavný fakt: DOOM, strieľačka za 90-tych rokov, sa celá zmestila do 2300KB.)

Výsledok vyhľadávania obrázkov pre dopyt doom
Nepovraždite svojich zákazníkov ešte skôr, než sa k vám dostanú

Z čoho sa skladá web stránka

Ak si “kliknete” na stránku, pošlete žiadosť, aby sa dáta odoslali na vaše zariadenie, kde ich prehliadač poskladá a odprezentuje. 

Tieto kúsky skladačky sú:

  • HTML, teda kód (tu nadpis, tu text, tu linka, …)
  • CSS, teda štýlovanie (nadpis daj hrubým, linku modrú, logo doľava, …)
  • JavaScript (rôzne interaktívne funkcie ako otváranie okien galérie ap.)
  • Obrázky (v rôznych formátoch, napr. jpeg, gif, …)
  • Fonty (teda štýly písma, napr. “Helvetica”)

VŠETKY tieto kúsky treba optimalizovať

Ako si otestovať rýchlosť načítavania web stránky

Koľko vaša stránka váži a čo všetko prenáša cez sieť, si môžete pozrieť hneď teraz v prehliadači (ak ste na desktope, na mobile sa to nedá). 
Ak používate Google Chrome alebo Firefox, stlačte F11 alebo hľadajte v menu “View > Developer > Inspect”. 

Prejdite na tab „Network“ a znovu načítajte stránku. Graf vám ukáže, čo sa u vás načítava najpomalšie a v akom poradí. Vpravo dole vidíte celkové množstvo prenesených dát.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-10-1024x450.png
Zoraďte podľa „size“ a uvidíte, čo trvá najdlhšie načítať

Toto je veľmi užítočné, ak budete následne optimalizovať. Cieľom je znížiť množstvo prenesených dát čo najviac. Nielen v extrémnych prípadoch je možné stránku zrýchliť o množstvo sekúnd!

🏆 Extra tip: Ak používate Google Chrome ako svoj prehliadač, nainštalujte si doň Lighthouse a spustite ho, keď budete mať otvorenú svoju webstránku. Tento plugin priamo od Googlu vám poskytne cenné informácie (v angličtine) o rýchlosti a prístupnosti vášho webu.

Lighthouse report
Report z Lighthouse-u

Ako jednoducho zistiť rýchlosť vášho webu

Najjednoduchšie zistíte, či vaša stránka spĺňa štandardy Googlu pre rýchlosť stránok priamo cez ich nástroj Google Page Speed Insights.

Zadajte svoju webovú adresu do poľa a nechajte si vyhodnotiť skóre.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-3.png

Skóre dostanete v dvoch hodnoteniach: pre Desktop a pre Mobily.

Pod údajmi testu nájdete sekciu „Príležitosti„. Toto je jediné, čo vás má zaujímať – sám Google vám tu radí, čo konkrétne vaša stránka potrebuje na zlepšenie rýchlosti načítania.

Ak vám tieto rady nič nehovoria a zdajú sa vám príliš technické, potom nasledujúce návody a tipy sú práve pre vás.

5 tipov, ako okamžite zrýchliť načítavanie vašej webstránky

Máme pre vás riešenie!

Nezávisle od toho, na akej platforme váš web funguje (či WordPress, či riešenie na mieru, či čokoľvek), tieto úlohy môžete splniť a zrýchliť tak svoj web aj o niekoľko sekúnd!

Začnime tým najjednoduchším a najúčinnejším.

Ak si vyberiete len jeden krok, ktorý chcete urobiť, nech je to tento:

1. krok: Optimalizovať veľkosť obrázkov

Tento obrázok nemá vyplnený ALT popisok, jeho názov je imageoptim.gif
Neoptimalizovaný obrázok sa načítava dlhšie

Spomínate si, ako sme hovorili, že veľkosť priemernej stránky je 2300KB? Viac ako polovicu z tejto veľkosti tvoria obrázky!

Ak nahrávate obrázky na svoju stránku, vždy ich prv optimalizujte.

Neoptimalizované obrázky sú príčinou číslo 1 v pomalosti načítavania. 

Pomocou programu, ktorý si stiahnete

Používa sa na to program, ktorý si stiahnete a ktorý neviditeľne “preskladá” obrázok tak, aby vyzeral rovnako (bezstratová kompresia), no predsa vážil menej kilobajtov. Stiahne a zobrazí sa tak rýchlejšie, pričom používateľ rozdiel medzi pôvodným a optimalizovaným súborom voľným okom nepozná. 

Stiahnite si ImageOptim pre Mac alebo FileOptimizer pre Windows.

Obrázky vložte do programu, počkajte, kým ich skomprimuje a potom ich nahrajte na svoj hosting.

Alebo rovno vo vašom admine

Ak máte WordPress, poslúži na to plugin, ako napr. “Smush”, ktorý to za vás urobí automaticky. Nainštalujte si ho a nastavte tak, aby vám optimalizoval všetky už nahraté obrázky i tie, ktoré nahráte v budúcnosti (pri uploade sa vždy automaticky spustí kompresia).

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-2-1024x464.png
Smush práve optimalizuje obrázky v mojom admine

Použitie online služby na kompresiu obrázkov

Ak nemáte možnosť stihanuť si program alebo použiť plugin, otvorte si v prehliadači stránku Compressor.io a pošlite svoje obrázky tam.


Google je na kompresiu nekompromisný! Ak nemáte optimalizované obrázky, môže vašu webstránku potrestať posunutím na nižšiu pozíciu.

🏆 Extra tip: Používaním správnych typov obrázkov môžete ešte viac zrýchliť svoj web. Na ilustrácie použite .png, na fotografie .jpeg. Najrýchlejší je .svg, ktorý sa využíva na ikonky a geometrické (vektorové) obrázky. Najpomalšie sú animované gify. Všetky obrázky sa oplatí optimalizovať!

2. krok: Nastaviť lazy loading

Čo je lazy loading?

Keď používateľ príde na vašu webstránku, na obrazke vidí zopár horných obrázkov a zvyšok stránky je zatiaľ schovaný „pod foldom“. Až keď užívateľ začne skrolovať dole, zobrazia sa mu aj ostatné časti stránky.

Prečo by sa teda mali všetky obrázky načítať hneď od začiatku?

Nebolo by lepšie, keby sa obrázky načítali postupne, ako užívateľ skroluje?

Práve na toto sa používa lazy load – „lenivé načítavanie“.

Webstránka tak pri príchode zostáva rýchla. Stiahnu sa len tie najnevyhnutnejšie časti a zvyšok sa načítava za pochodu. Ak užívateľ neskroluje, potom sa mu ostatné obrázky nenačítajú. Ušetrí sa tak množstvo prenesených dát.

Ako upraviť web, aby sa obrázky načítali postupne

Natívny lazy loading vyzerá v HTML kóde takto:

<img src="obrazok.jpg" loading="lazy" alt="..." />


Táto značka povie prehliadaču, aby obrázok hneď nesťahoval, aby počkal, kým ho bude treba – teda kým používateľ neskroluje k jeho tesnej blízkosti. Potom sa rýchlo presunie zo servera do prehliadača a bum! – obrázok je k dispozícii. Všetko sa deje tak, že si to užívateľ ani nevšimne.

Upravte svoj kód tak, že obrázkom „pod foldom“ pridáte loading atribút.

Ak používate WordPress, je to jednoduchšie – stiahnite a aktivujte si plugin „Native Lazyload„. Všetko ostatné urobí za vás.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-5-715x1024.png
Všetkým obrázkom „pod foldom“ (prvotne zobrazenou časťou webu) som označila lazy load atribútom

3. krok: Zminimalizovať zdrojové súbory

Developeri ako ja radi píšu pekný kód – aby sme sa v tom vyznali, musí to byť úhľadné. Naše odstavce a riadkovania však zbytočne navyšujú bajty v súboroch. 

Keď je stránka hotová a ide “do produkcie”, čiže naživo na server, je potrebné, aby sa zbytočné medzery a nové riadky vymazali. Súbory sa tak niekedy zmrštia až o 60%.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-7-1024x591.png
Môj CSS súbor počas programovania
Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-11-1024x571.png
Môj CSS súbor už na serveri, o 22% menší ako pôvodný

Minifikujte svoj web tak, aby sa zdrojové súbory boli čo najmenšie.

Toto je veľmi dôležité, pretože tak ako pri neoptimalizovaných obrázkoch, aj tu vás Google sleduje!

Zapnite si na serveri (cez svoj webhosting) funkciu GZIP. Automaticky sa budú vaše súbory komprimovať, posielať užívateľovi v malom a rozbaľovať až v jeho prehliadači.

Ak neviete, či je vaša webstránka dobre naprogramovaná, vyskúšajte si ju otestovať v GT Metrix.

Dostanete aj indície (v angličtine), čomu venovať svoju pozornosť. Tento report potom môžete zaslať svojmu programátorovi.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-12-1024x934.png
Report môjho webu z GT metrix

Ak používate WordPress, existuje množstvo pluginov, ktoré vám pomôžu pri zvýšení rýchlosti. Vyskúšajte Hummingbird, ktorý dokáze minifikovať vaše súbory, zapnúť GZIP, nastaviť cache a zrýchliť tak načítavanie. Treba sa tam však trochu pohrabkať, pretože ak vaša šablóna používa množstvo vzájomne závislých knižníc, jedno zlé nastavenie môže niekedy veci riadne pobabarať.

🏆 Extra tip: Správny prístup ku kódovaniu

Šetrenie peniazmi pri výrobe webu niekedy može znamenať mrhanie času vašich návštevníkov… a v konečnom dôsledku vaše znížené príjmy.

Často je v CSS štýloch použítých príliš veľa pravidiel, ktoré sa na stránke nakoniec ani neaplikujú. Skripty nemajú použitý „defer“ atribút, alebo sa načítavajú zbytočné knižnice. Na serveri nemáte zapnutý GZIP ani cache. …

Lacné šablóny bývajú preplnené vzájomne závislými knižnicami, ktoré dokopy tvoria neskutočne pomalého mamuta, avšak je priam nemožné niečo odstrániť či minifikovať, aby sa to celé nezrútilo ako domček z karát.

Ďalší krok taktiež súvisí s back-endom vášho webu a dokáže urobiť s jeho rýchlosťou divy…

4. krok: Dobre zvolený postup načítavania

Množstvo súborov, ktoré sú v hlavičke vašej stránky a ich poradie – to je jeden z najväčších faktorov, ovplyvňujúcich rýchlosť vašho webu.

Občas sa ku stránke chováme ako k pizzi – prihadzujeme veci, ktoré si myslíme, že ju vylepšia:

  • Google Analytics – veď musíme predsa vedieť, koľko ľudí prišlo
  • Facebook like, messenger, zdieľacie gombíky – veď chceme byť zdieľaní
  • Trackovacie pixely – veď chceme remarketovať a zarobiť
  • Chat okno – veď chceme komunikovať so zákazníkmi
  • Pop-upy – nikto predsa nesmie odísť bez registrácie
  • Slidery – Veď máme toľko obrázkov!

Všetko je samozrejme pochopiteľné – dnešná doba si vyžaduje, aby sme do ľudí hučali, inak sa stratíme v hluku ostatných.

Všetko však znamená extra skript (plus ich závislosti), a tým ste si absolútne zúfalo spomalili web.

Existuje však riešenie!

Nie je nevyhnutné, aby ste to všetko povyhadzovali, ide len o to, aby tieto funkcie „nezavadzali“ pri načítaní.

Pri načítavaní stránky totiž nie je dôlezíté, aby sa hneď zobrazilo tlačidlo Facebooku, však?

Ako prvé sa musí zobraziť logo, text a hlavný obrázok.

Užívateľ musí vidieť, že sa vaša stránka snaží vykresliť obsah ako prvý – a skripty toto vykreslenie blokujú!

Niektoré skripty sa dajú oddialiť v procese načítavania tak, že sa užívateľovi zobrazí stránka, ktorá sa dá prvých pár sekúnd aspoň čítať, kým sa nespracuje všetko ostatné – a to vám môže zachrániť zákazníka

Užívateľ je angažovaný a vidí, že stránka sa snaží poskytnúť mu obsah čo najrýchlejšie.

Opäť je to však na vašom web developerovi, aby sa s tým pohral.

Robí sa to takto:

Asynchrónne načítanie JavaScriptu

<script src="moj-skript.js" defer></script>

Pri použítí čarovného slovíčka „defer“ skript neblokuje zobrazenie stránky používateľovi.

Ďalším riešením je presunutie skriptov z hlavičky stránky na spodok, tesne pred </body> tag.

Pri použití skriptov od tretích strán (Facebook, Google, …) sa vždy uistite, že tieto neblokujú vykreslenie.

Otestujte si, ako vaša stránka vyzerá pri načítavaní online testom od WebPageTest. V reporte navigujte na „Screenshots“ a „Create video“.

5. krok: Optimalizácia fontov

Vaše fonty môžu byť síce jedinečné a krásne, ale verte mi – spomaľujú vašu webstránku viac, ako je pre váš biznis zdravé. 

Na druhej strane, profesionálny font urobí s vaším brandingom zázraky.

Pri výbere fontu máte niekoľko možností: hostovať ho na vlastnom serveri, alebo ho stiahnuť pomocou fontovej služby ako je napr. Adobe Fonts (predtým Typekit) alebo Google Fonts.

🏆 Tip 1: Používajte maximálne dva fonty v dvoch hrúbkach.

Google Fonts vám sám ukáže, či vaša vybraná skupina fontov už nie je príliš pomalá.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-15-1024x605.png
Výber fontu v Google Fonts – vpravo zelený ukazovateľ, pretože som vybrala zatiaľ len jednu hrúbku

🏆 Tip 2: Okresajte svoje fonty na nevyhnutné znaky.

Fonty obsahujú funkcie (napr. OpenType) alebo písmená (ktoré sa v slovenčine nevyskytujú), ktoré nebudete potrebovať. Zbytočne ich posielate po sieti.

Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-14.png
Adobe Fonts – pri vytvorení web projektu si vyberiete font, jeho subset a môžete vypnúť OpenType

🏆 Tip 3: Nesťahujte žiadne fonty, použite systémový font.

Systémový font je veľmi pekný font, ktorý používajú naše mobily a naše počítače. Pomocou CSS môžete zadať aj svojej webstránke, aby použila tento font. Budete tak mať na stránke veľmi pekné písmo, na ktoré sú ľudia zvyknutí a nemusíte pritom sťahovať žiadne dáta!

body { 
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
Tento obrázok nemá vyplnený ALT popisok, jeho názov je image-13.png
Používame ho aj my na webzatyzden.sk, dokonca aj v logu

🏆 Tip 4: Nečakať so zobrazením textu, kým sa stiahne font

Ak môžete, použíte CSS pravidlo:

@font-face {   
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: swap;
}

font-display: swap je pravidlo, ktoré prikáže prehliadaču, aby nečakal na font, kým sa stiahne na používateľov mobil alebo počítač. Jednoducho zobrazí text s obyčajným fontom, aby sa dal okamžite čítať. Hneď, ako sa pekný font dotiahne, použije sa ten. Jednoducho sa vymenia.

Použite jedno alebo viac z týchto tipov na optimalizáciu fontov, podľa toho, ktorú službu používate.

Vaši návštevníci ocenia, že môžu vašu stránku okamžite čítať.

Slovo na záver

Developeri sú tiež len ľudia. Plnia príkazy, prípadne robia len to, za čo im zaplatíte. V dnešnej dobe by však všetci, ktorí vytvárajú web, tak mali robiť nielen s úctou k používateľom, ale aj s istým pocitom zodpovednosti voči nemrhaniu zdrojmi.

Ak chcete web stránku, kde optimalizácia rýchlosti je súčasťou ceny (ktorá je mimochodom oveľa nižšia ako u konkurencie), pozrite na našu ponuku Web za týždeň

Zdroje:

Napísať prvý komentár

Pridaj komentár

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

Chcem

Váš email je u nás v bezpečí. Pozrite si zásady ochrany osobných údajov. Audit vykonáme do 72 hodín a odošleme vám na email PDF s reportom.