Jak na zrychlení webu

Aktuálním tématem správců i tvůrců webových stránek je stále rychlost načítání webů.

Když se totiž 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.

Agionet hodnoceni 2019 11 05 PageSpeed Insights jpg

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 až 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í obsahwebu 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 narozdí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 12000 kilometrů. To se pak 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 odkudkoliv 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 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á šířkavýš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úvodních fotek 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: LazyloadingPreloading. 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é javascripty 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, cssjavasripta. 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. Díky tomu se pak 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 pak 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, tzv. cache (keše).

 

Žádné vícenásobné přesměrování z hlavní stránky

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 pak bude objevovat "404 - not found". 404 negativně ovlivňuje 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, 307meta 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. „PageRank-u“ (autorita stránky).

Přesměrování pomocí 302 pravděpodobně přenáší méně PageRanku a proto je doporučeno používat jen vyjímeč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 tagurefresh“ 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"&gt;

Když na stránce použijeme meta tagrefresh“, 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 sevícenásobnému přesměrování z URL adresy A na URL adresu B, kterou pak 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:

Zpět na Rádce

Potřebujete-li od nás získat více informací, nebo nám zadat realizaci projektu...

kontaktujte nás

Pokud chcete dostávat naše občasné Newslettery - zaregistrujte se