Rychlost načítání stránek. 4 hlavní faktory.

Štítky: SEO

Rychlost načítání stránek. Jak zvýšit rychlost stahování? Hlavní problémy.

Doporučeno rychlost načítání stránek Google - 2 sekundy. (a teď se podívej na svou rychlost)

(Jak zkontrolovat rychlost načítání webu?Nejjednodušší a nejrychlejší způsob je otevřít vývojářské nástroje CTRL+SHIFT+IDále vyberte kartu „Síť“ a poté obnovte stránku, abyste viděli rychlost stahování, kterou potřebujete k obnovení stránky, Obnovit bez mezipaměti: musíte stisknout CTRL + F5 / CTRL + R. A níže bude rychlost stahování.)

Zkontrolujte rychlost načítání stránek
pomocí služby od Google: PageSpeed Insights

Hlavní body, které nejvíce ovlivňují:

Mezipaměti
css (styly)
JS (skripty)
snímky (jejich váha, velikost - ano, přesně velikost VxŠ, Metadata - ano, něco takového existuje, jsou to jejich informace jako: Datum, název, téma atd.)

Abych nenakreslil spoustu zbytečných informací o malých momentech, které nijak zvlášť neovlivňují nebo mají zanedbatelný vliv, nebudu o nich psát.

#1 HOTOVOST

ukládání do mezipaměti (nebomezipaměti) je vyrovnávací paměť (místo), kde jsou uložena jakákoli data. V našem případě jsou to Obrázky, kód, styly a další.

Nejlehčí co můžete udělat sami, je povolit ukládání do mezipaměti na hostingu.
(Pokud máte hosting Ukraine.com.ua, pak musíte jít do „nastavení webu“ -> „základní nastavení“ a tam bude položka „Caching“ a tam si vyberete požadovanou dobu, po kterou bude váš web být ukládán do mezipaměti. Sám za sebe doporučuji nastavit to na 2 týdny – s tímto obdobím ukládání do mezipaměti přidávají statistiky rychlosti stránky Google spoustu bodů.)

dalších metod souvisejících s htaccess, tagy prohlížeče atd. se dá najít na internetu na nemálo článků a v překreslování nevidím smysl. O typech kešování si můžete přečíst v článku na Habré.

#2 CSS (styly)

CSS - (Cascading Style Sheets - kaskádové styly).
Co se dá dělat se styly?
Studna Za prvé zmáčknout je.
Za druhé snížit počet souborů, tzn. sloučit co nejvíce, abyste snížili počet volání na server.
Za třetívložit hlavní styly, které ovlivňují zobrazení viditelné části první obrazovky, přímo do a zbytek ponechat v souboru.

Zanechávám také několik užitečných odkazů:

css kompresní služby
jak komprimovat css soubory

#3 JS (skripty)

Zde také máme několik způsobů, jak optimalizovat skripty.

Odložte načítání skriptu. Nafoukněte jej co nejníže, položte za nebo ještě níže, někdy to pomůže, někdy to není možné. Ale bod číslo 2 přichází na pomoc.
ASYNC – asynchronní načítání skriptů. To se provádí pomocí parametru „async“.
Další podrobnosti o async zde.
Trochu více informací o JS a jeho vlivu.
Menší bod.
JS lze také komprimovat. Také sloučit do 1 souboru.

#4 Obrázky

Vždy můžete udělat tři věci: Podívejte se do ohně, do vody a optimalizujte obrázky.

Téma je poměrně obsáhlé, proto se vám pokusím podat pouze důležité informace.

Optimalizujte hmotnost.

Jak? Prostřednictvím programu nebo služby.

Program pro hromadnou práci s obrázky Rychlý Stone Obrázeks tím můžete
Hromadná změna velikosti obrázků. Jak a co už tam vygooglovat není těžké.
Stáhněte si obrázek Faststone.
Služba pro zmenšení velikosti obrázků - Panda. Nebo spíše TinyPNG & TinyJPG.
Hlavní výhoda ONLINE. Stačí nahrát soubory a vrátit se v komprimované verzi - Kvalita tím vůbec neutrpí (je to Magic).
Odkazy: tinypng.com & tinyjpg.com

Optimalizovat velikost.

Velikost jak jsem psal výše lze změnit pomocí programu rychlý kamenný obraz.
Velikost je výška x hmotnost (výška x šířka).

Příklad:

Velikost	Pixely	velikost souboru
100x100	10 000	39 kB
200x200	40 000	156 kB
300 x 300	90 000	351 kB
500x500	250 000	977 kB
800x800	640 000	2500 kB

(Pokud se o tom chcete dozvědět více, můžete si přečíst nápovědu Google na toto téma. ČLÁNEK od Googlu, ale varuji vás, že je do jisté míry praštěný)

Máme například 2 obrázky:
1) Hmotnost 100 kb, velikost 500 x 500
2) Hmotnost 100 kb, Velikost 2500x2500
Zdálo by se, že jaký je v tom rozdíl, váží stejně, proto by jejich načítání mělo být stejně složité nebo jednoduché, ale nebylo to tam, když to zkontrolujete pomocí rychlosti stránky google insgiht, stále bude nadávat na vyšší rozlišení obraz.

Shrnutí: Na velikosti záleží. Váha taky. (to ostatní není tak důležité, ale podle argumentů některých odborníků to má také vliv, teď mluvím o Image Metadata)

O meta datech jsem opravdu nic nepsal, no, tady není co psát ...
Stačí vymazat všechna metadata pro všechny obrázky, podle legendy můžete zmenšit velikost 2krát. Zjistil jsem to nedávno (o vlivu velikosti souboru jsem si myslel, že je to docela nevýznamné).

Krátce o vydání: