Rýchlosť načítania stránky. 4 hlavné faktory.

Tagy: SEO

Rýchlosť načítania stránky. Ako zvýšiť rýchlosť sťahovania? Hlavné problémy.

Odporúčané rýchlosť načítania stránky Google - 2 sekundy. (a teraz sa pozrite na svoju rýchlosť)

(Ako skontrolovať rýchlosť načítania webovej stránky?Najjednoduchším a najrýchlejším spôsobom je otvorenie vývojárske nástroje CTRL+SHIFT+IĎalej vyberte kartu „Sieť“ a potom obnovte stránku, aby ste videli rýchlosť sťahovania, ktorú potrebujete na obnovenie stránky, Obnoviť bez vyrovnávacej pamäte: musíte stlačiť CTRL + F5 / CTRL + R. A nižšie bude rýchlosť sťahovania.)

Skontrolujte rýchlosť načítania stránky
pomocou služby od Google: PageSpeed Insights

Hlavné body, ktoré najviac ovplyvňujú:

Cache
css (štýly)
JS (skriptá)
snímky (ich hmotnosť, veľkosť - áno, presne veľkosť VxŠ, Metaúdaje - áno, také niečo existuje, sú to ich informácie ako: Dátum, názov, téma atď.)

Aby som nenakreslil veľa zbytočných informácií o malých momentoch, ktoré nijako zvlášť neovplyvňujú alebo majú zanedbateľný vplyv, nebudem o nich písať.

#1 HOTOVOSŤ

ukladanie do vyrovnávacej pamäte (alebocache) je vyrovnávacia pamäť (miesto), kde sú uložené akékoľvek dáta. V našom prípade sú to Obrázky, kód, štýly a ďalšie.

Najľahší čo môžete urobiť sami, je povoliť ukladanie do vyrovnávacej pamäte na hostingu.
(Ak máte hosting Ukraine.com.ua, tak musíte ísť do “nastavenia stránky” -> “základné nastavenia” a tam bude položka “Cachovanie” a tam si zvolíte požadovaný čas, po ktorý bude vaša stránka Za seba odporúčam nastaviť 2 týždne – s týmto obdobím ukladania do vyrovnávacej pamäte pridávajú štatistiky rýchlosti stránky Google veľa bodov.)

iné metódy súvisiace s htaccess, tagmi prehliadača a pod. sa dajú nájsť na internete na dosť veľa článkov a nevidím zmysel v prekresľovaní. O typoch kešovania sa dočítate v článku na Habré.

#2 CSS (štýly)

CSS - (Cascading Style Sheets - kaskádové štýly).
Čo sa dá robiť so štýlmi?
Dobre Po prvé stlačiť ich.
Po druhé znížiť počet súborov, t.j. čo najviac zlúčiť, aby sa znížil počet hovorov na server.
Po tretiehlavné štýly, ktoré ovplyvňujú zobrazenie viditeľnej časti prvej obrazovky, vložte priamo do a zvyšok ponechajte v súbore.

Nechávam tiež niekoľko užitočných odkazov:

css kompresné služby
ako komprimovať súbory css

#3 JS (skripty)

Aj tu máme niekoľko spôsobov optimalizácie skriptov.

Odložte načítanie skriptu. Nafúknite ho čo najnižšie, položte za alebo ešte nižšie niekedy to pomáha, niekedy to nie je možné. Ale bod číslo 2 prichádza na pomoc.
ASYNC – asynchrónne načítavanie skriptov. Toto sa vykonáva pomocou parametra „async“.
Viac podrobností o async nájdete tu.
Trochu viac informácií o JS a jeho vplyve.
Menší bod.
JS je možné aj komprimovať. Tiež zlúčiť do 1 súboru.

#4 Obrázky

Vždy môžete urobiť tri veci: Pozrite sa do ohňa, pozrite sa na vodu a optimalizujte obrázky.

Téma je pomerne rozsiahla, preto sa vám pokúsim poskytnúť len dôležité informácie.

Optimalizujte hmotnosť.

ako? Prostredníctvom programu alebo služby.

Program pre hromadnú prácu s obrázkami Obrázok rýchleho kameňas tým môžete
Hromadná zmena veľkosti obrázkov. Ako a čo už tam vygoogliť nie je ťažké.
Stiahnite si Faststone Image.
Služba na zmenšenie veľkosti obrázkov - Panda. Alebo skôr TinyPNG & TinyJPG.
Hlavná výhoda ONLINE. Stačí nahrať súbory a vrátiť sa v komprimovanej verzii - kvalita tým vôbec neutrpí (je to Magic).
Odkazy: tinypng.com & tinyjpg.com

Optimalizovať veľkosť.

Veľkosť ako som písal vyššie sa dá zmeniť pomocou programu rýchly kamenný obraz.
Veľkosť je výška x hmotnosť (výška x šírka).

Príklad:

Veľkosť	pixelov	veľkosť súboru
100 x 100	10 000	39 kB
200 x 200	40 000	156 kB
300 x 300	90 000	351 kB
500 x 500	250 000	977 kB
800 x 800	640 000	2500 kB

(Ak sa o tom chcete dozvedieť viac, môžete si prečítať nápovedu Google k tejto téme. ČLÁNOK od Googlu, ale varujem vás, že je do istej miery hlúpy)

Napríklad máme 2 obrázky:
1) Hmotnosť 100 kb, veľkosť 500 x 500
2) Hmotnosť 100 kb, veľkosť 2500 x 2500
Zdalo by sa, že aký je v tom rozdiel, vážia rovnako, preto by ich načítanie malo byť rovnako komplikované alebo jednoduché, ale nebolo to tam, ak si to overíte pomocou google page speed insgiht, stále bude nadávať na vyššie rozlíšenie obrázok.

Zhrnutie: Na veľkosti záleží. Hmotnosť tiež. (ostatné nie je až také dôležité, ale podľa argumentov niektorých odborníkov to má tiež vplyv, teraz hovorím o Image Metadata)

Naozaj som nenapísal nič o metadátach, no, tu nie je čo písať ...
Stačí vymazať všetky metadáta pre všetky obrázky, podľa legendy môžete veľkosť zmenšiť 2-krát. Dozvedel som sa to nedávno (o vplyve veľkosti súboru som si myslel, že je to celkom zanedbateľné).

Stručne o vydaní: