Aktuálním tématem správců i tvůrců webových stránek je stále rychlost načítání webů.
Když se při otevírání webu stahuje velké množství dat, nastává problém. Vyhledávací roboti mají totiž omezený čas na zpracování každé stránky. Nejrozšířenější vyhledávač Google navíc stránky dlouhodobě hodnotí a na základě mnoha parametrů sestavuje skóre webu. Pomalý a nízko hodnocený web tak dostane od Googlu horší hodnocení a na přední příčky nemá nárok.
Weby ale služí především lidem. A pomalý web zhoršuje uživatelský zážitek. Pokud nechcete návštěvníky webu otrávit či uspat zdlouhavým čekáním, než se stránky načtou, je dobré provést celkovou optimalizaci webu. V tomto článku najdete přehled metod, jak odstranit největší kotvy, které web táhnou ke dnu. Do realizace se můžete pustit sami, nebo se svěřit do rukou odborníkům.
Co můžeme vylepšit, aby byl web rychlejší?
- Provést optimalizace obrázků
- Zbavit se zdržování s vykreslováním
- Zkrátit kódy HTML, CSS a JavaScript
- Aktivovat kompresi (gzip, GNU zip) – může snížit velikost souborů o 50–80 %
- Využít a správně nastavit načítání prohlížeče do mezipaměti – cache, kešování souborů
- Zkrátit dobu odezvy serveru
- Zbavit se vícenásobných přesměrování stránek
Na čem ještě závisí rychlost webových stránek?
- Datová velikost a rozsah webu
- Dynamické nastavení obsahu webu přizpůsobené co možná nejvyšší rychlosti načítání
- Rychlost a pohotovost hostingového serveru
- Využívaný druh protokolu (dnes se prosazuje HTTP/2) a typ tarifu
- Počet požadavků v rámci HTTP protokolu
Hosting s využitím HTTP/2 protokolu umožňuje na rozdíl od dřívějšího HTTP protokolu, na kterém běží většina webů, stahovat více datových souborů naráz. Tím se výrazně zkracuje doba pro první zobrazení webové stránky.
- Vzdálenost serveru, na kterém je web fyzicky uložený
Blíže se podíváme na téma vzdálenosti od serveru.
Na rychlost načítání webu má vliv i fyzická lokalita hostingového serveru. Čím větší vzdálenost je mezi zařízením uživatele a hostingovým serverem, tím se zobrazování webové stránky zpomaluje. V naší zemi se jedná maximálně o stovky kilometrů, v jiných státech může vzdálenost v extrémních případech dosáhnout i přes 12 000 kilometrů. To se potom může opravdu znatelně promítnout do rychlosti načítání webu.
Jak se řeší problém obrovské vzdálenosti mezi uživatelem a hostingovým serverem?
Řešením může být využití kvalitního Content Delivery Networku (CDN). Data webu se strategicky rozmístí na servery v místech, kde se pohybují uživatelé webu a potenciální zákazníci. Díky CDN mohou rychleji načítat web návštěvníci odkudkoli na světě. Například společnost CDN77 působící po celém světě tuhle službu nabízí.
Optimalizace datové velikosti obrázků
Pokud chcete zrychlit web, měli byste překontrolovat datovou velikost obrázků a dalších grafických souborů. Ideální velikost obrázků pro rozsáhlejší weby je 70 kB až 80 kB. Záleží kolik obrázků bude potřeba na jedné stránce načítat. Nepsaným pravidlem bývá, že součet všech obrázků na jedné stránce by neměl přesáhnout 150 kB. Načítaná šířka a výška obrázku by měla odpovídat maximální skutečně zobrazované šířce a výšce obrázku, které chceme dosáhnout. Bylo by naprosto zbytečné zpomalovat načítání webu většími obrázky. Optimalizací obrázků se zabývají grafici.
Zbavit se zdržování s vykreslováním
Jiná situace nastává v případě zobrazování hlavních a úvodních fotografií na home page a dalších designových záležitostí, které mívají větší formát i datovou velikost. Grafici ke zrychlení jejich načítání využívají dvě techniky: lazy loading a preloading. Více o tom píše náš grafik Míra v článku: Skáče vám web jako koza? Jak se zbavit skákajícího obsahu webu.
Ve zdrojovém kódu najdete nad okrajem stránky v hlavičce obsah stránky ukončený zápisem /head. Standardně načítané JS soubory (JavaScript) a některé styly, které se připojují přes link, mohou také web zbytečně zpomalovat. Dlouho se načítají například animace, proto je vhodnější místo nich umístit na web odkazy na videa směřující třeba na YouTube. Přesto by měl vývojář takovéto zdroje nastavit tak, aby se začali načítat až později než holá struktura webu a teprve poté nadpisy a texty.
Zkrátit kódy HTML, CSS a JavaScript
Minifikace HTML kódu odstraní přebytečné mezery, odřádkování, poslední středník před uzavírací závorkou, komentáře a jiné. Tím dojde ke zkrácení některých zápisů.
Ukážeme si malý příklad:
margin: 0px 5px 0px 0px; /* jeden řádek originálu */
margin:0 5px 0 0; /* přepsání minifikátorem */
Stejná nebo podobná CSS doporučujeme sloučit do jednoho. Také není vhodné používat zbytečně velké JavaScriptové knihovny, které web stejně celé nepotřebuje.
Aktivovat kompresi
Zdrojové soubory stahované do počítače během načítání stránky zpomalují proces zobrazování webu. Za zdrojové soubory považujeme především obrázky, CSS a JS soubory. Komprimací těchto souborů dochází ke snížení dat, která se po síti musí přenést, než dojde k zobrazení požadované stránky. Ke kompresi se často využívají nástroje gzip nebo Deflate.
Využít načítání prohlížeče do mezipaměti – cache, kešování souborů
Cachování statického obsahu se využívá ke snížení přenášených dat mezi webhostingovým serverem a zařízením, na kterém uživatel webovou stránku otevírá. Zkráceně to znamená, že stránka se jakoby „vyfotí“ a ta fotka se uloží do mezipaměti, tzv. cache (keše). Díky tomu se potom při dalších návštěvách webu načte webová stránka mnohem rychleji, protože už se nemusí přenášet tak velký objem dat.
Zkrátit dobu odezvy na server
Statické webové stránky mají z hlediska odezvy na server velkou výhodu. Na serveru je totiž už jednou dopředu stažená konkrétní stránka, která se potom uživateli rovnou celá zobrazí. To je podstatně rychlejší, než když by se musel veškerý obsah stránky nejprve postupně stáhnout a až potom vykreslit. Využívá se k tomu kešování souborů, při kterém se načítají data z mezipaměti – cache.
Žádné vícenásobné přesměrování z hlavní stránky
K přesměrování stránek dochází při přechodu z HTTP na HTTPS například při redesignu webu. Při přesměrování stránek vlastně dáváme příkaz, aby prohlížeč místo původní stránky otevřel stránku jinou.
Příklad přesměrování
Zrušíme nebo znefunkčníme stránku s URL adresou: agionet.cz/puvodni-stranka/. Na této stránce se potom bude objevovat „404 Not Found“. 404 negativně ovlivňují hodnocení webu. Měli bychom se jich tedy vyvarovat a zrušenou stránku vždy raději přesměrovat na náhradní stránku, aby se na webu nefunkční stránky nezobrazovaly. Uživateli, který chce otevřít původní stránku s URL: agionet.cz/puvodni-stranka/ se zobrazí náhradní stránka s URL: agionet.cz/nova-stranka/.
Obvykle se používají 4 typy přesměrování. K přesměrování se využívá status code 301, 302, 307 a meta tag refresh. Z pohledu SEO se nejvíce doporučuje využití přesměrování pomocí 301. Jedná se o trvalé přesměrování z původní stránky na jinou stránku. Status code 301 umožňuje přenášet minimálně 90 % tzv. link juice (hodnocení kvality stránky na základě zpětných odkazů směřujících na stránku). Přenáší velké množství tzv. PageRanku (autorita stránky). Přesměrování pomocí 302 pravděpodobně přenáší méně PageRanku, a proto je doporučeno používat jen výjimečně. Status code 302 se používá jen pro dočasné přesměrování nedostupné stránky na náhradní stránku ve verzi HTTP 1.0. Přesměrování pomocí status code 307 je náhradou za dočasné přesměrování 302 ve verzi HTTP 1.1. Přesměrování pomocí meta tagu refresh využijeme tam, kde je potřeba aktualizovat (znovu načíst) obsah stejné URL adresy. V případě meta tagu refresh se většinou do hlavičky stránky vkládá krátký kód s příkazem otevřít konkrétní URL adresu za určitou dobu.
Příklad:
<meta http-equiv = "refresh" content = "7; url = http://www.agionet.cz/nova-stranka">
Když na stránce použijeme meta tag refresh, měli bychom vložit pro uživatele také krátkou informaci o tom, že se stránka, kterou chtějí otevřít, byla přesměrována a zobrazí se za 7 sekund (v našem příkladu). Z pohledu SEO se tato technika nedoporučuje používat, protože způsobuje pomalejší přesměrování. Využitím meta tagu refresh je přenášeno jen velmi malé množství link juice. Při každém přesměrování z jedné stránky na druhou se snižuje hodnocení webu, proto je nejlepší se pokud možno vyhýbat přesměrování stránek obloukem a vyvarovat se i vícenásobnému přesměrování z URL adresy A na URL adresu B, kterou potom přesměrujete na URL adresu C.
Faktorů, které ovlivňují rychlost načítání webových stránek, je tedy velmi mnoho. Pokud tápete, které změny a vylepšení by konkrétně pro váš web byly vhodné, můžeme vám s tím pomoci. Kontaktujte nás a domluvte si konzultaci s profesionály.
Můžete si také přečíst: