Optimalizace rychlosti webu

Rychlost načítání webu má vliv na hodnocení od Googlu. Ovlivňuje bodování a tím pádem i pozici ve vyhledávačích. Jak rychle se web načítá, to si můžeme snadno ověřit například v aplikaci PagesSpeed. Zadáme URL webové stránky a dáme ji analyzovat. Jako odstrašující případ jsme vybrali doménu jednoho nejmenovaného webu. Výsledek analýzy rychlosti zobrazení webové stránky se objeví za několik vteřin. Vlevo nahoře si můžete vybrat, jestli chcete zobrazit hodnocení pro mobilní zařízení nebo počítač. Vzhledem k tomu, že většina uživatelů se připojuje přes mobilní zařízení, vybrali jsme si ho i pro náš příklad. Mobilní zařízení nevyužívá mezipaměť prohlížeče.

Obr. č.1 Základní bodování webu a laboratorní data

PageSpeed bez nazvu webu komprimovany

1.

Tento web obdržel pouze 2 body ze 100 možných. Opravdu katastrofální hodnocení!

0-49 bodů označují červeně

To je velmi špatné. Bude potřeba na optimalizaci webu hodně zapracovat.

50-89 bodů je označeno žlutě

To znamená, že něco není v pořádku a je nutné to vylepšit, aby se hodnocení zvýšilo na maximum.

90-100 bodů dostává zelenou

Tohle hodnocení značí výborný výsledek. Můžeme být s nastavením webu spokojení a není třeba provádět změny.

2.

Rychlost vzorového webu se ocitla v červené a to rozhodně není nic dobrého.

První vykreslení obsahu webu - First Contentful Paint (FCP)se objevilo až za neuvěřitelných 10,5 s. Tak dlouho by přeci žádný uživatel internetu nevydržel čekat, než se mu zobrazí alespoň základní obrysy stránky.

Index rychlosti - Speed Index (SI) udává dobu do vykreslení celého viewportu. Viewport je definovaný výřez zobrazení používaný u responzivních webů.

Dobu do interaktivity označujeme jako Time to Interactive (TTI). Uplynulý čas ukazuje, do kdy stránka musí komunikovat se serverem.

První smysluplné vykreslení - First Meaningful Paint (FMP) se objevilo až za 10,8 s. To znamená, že než se mu zobrazilo z načítané stránky konečně něco zajímavého, pravděpodobně usnul nebo už dávno načítá konkurenční web.

První nečinnost procesoru First CPU Idle (FCI) nastala až po 10,8 s. Pak teprve si mohl procesor dát pohov a konečně došlo k úplnému načtení stránky.

Maximální potenciální prodleva prvního vstupu

Nazýváme to First Input Delay (FID) a znamená to, za jak dlouho od prvního kliku stránka zareaguje. V našem případě to bylo 370 ms.

Obr. č. 2 Co způsobuje, že se web tak dlouho načítá?

Screenshot PageSpeed veryhero  2 upravy komp jpg

 

Time To First Byte (TTFB) je metrika, která hlídá dobu odpovědi serveru na dotaz prohlížeče při načítání webové stránky. Vykreslení stránky nazýváme jako renderování. Většina prohlížečů podporuje přednačítání prvků ve formě tagů v hlavičce HTML. Může se přednačíst i následující předpokládaná stránka, kterou by mohl uživatel chtít navštívit.

Konkrétní příklady:

<link rel="prerender" href="/domena.cz">

<link rel="prefetch" href="//obrazek.png">

<link rel="preload" href="//skript.js" as="script">

Prázdná políčka v obrázku znamenají, jak rychle se webová stránka zobrazila v porovnání s jinými stránkami. V tomhle případě vidíme obrázek stránky až v úplně posledním políčku.

Další hodnoty vysvětlují konkrétní problémy. V levém sloupci vidíme příležitosti, které se mohou využít pro zlepšení výkonu stránky a v pravém sloupci spatříme odhadovanou časovou úsporu.

Rozebereme si ty nejpodstatnější:

Nepoužívejte několik přesměrování stránky

Při přesměrování stránky dáváme prohlížeči příkaz, aby při otevírání stránky A otevřel stránku B. Nejlepší je vyhnout se přesměrování stránek úplně. Každé přesměrování totiž snižuje bodování a může způsobit propad pozice ve vyhledávači.

Eliminujte zdroje, které blokují vykreslení

Příliš velká datová velikost obrázků, videa a dalších souborů, které je potřeba v pozadí stránky otevřít, aby se zobrazili, načítání rozhodně zdržuje. Už při vkládání obsahu na web by měl autor dbát na to, aby rychlost načítání byla co možná nejmenší. K tomu se využívá optimalizace webdesignu a optimalizace obrázků, kterou by měli provádět zkušení grafici.

O správných formátech obrázků se více dočtete v našem článku: Správné velikosti obrázků.

Odstraňte nepoužívané styly CSS

V HTML kódu občas zůstanou již nepoužívané styly CSS, které zbytečně zdržují renderování stránky. Než zdlouhavý kód vyhledávač rozluští, čas utíká jako voda. Odstraněním zbytečných CSS dosáhneme kratší odezvy serveru, tím pádem můžeme pozitivně ovlivnit rychlost webu.

Zobrazujte obrázky ve formátech nové generace

Doporučujeme vyhnout se především formátu GIF, protože má nekvalitní barvy, nízkou kvalitu a jsou opravdu hodně velké. Místo PNG raději používáme JPG. Komprese obrázků do přiměřené velikosti i formátu je vhodná a žádaná. Nahrávejte na web obrázky rovnou v požadované velikosti, která se má návštěvníkům zobrazovat. Nedoporučujeme zmenšovat obrázky pomocí HTML nebo CSS.

O nových formátech obrázků píšeme v článku: Nové formáty obrázků.

Minifikujte JavaScript (JS)

Na rychlost načítání má vliv počet odeslaných dotazů na server, proto je potřeba co nejvíce zkrátit a zjednodušit také JS. Využívá se sjednocení, pokud možno, všech zdrojových JavaScriptových souborů, které jsme si sami napsali do jednoho. Minifikací JS můžeme v některých případech výrazně snížit počet dotazů na server.

Obr. č. 3 Další informace o výkonu

Screenshot PageSpeed veryhero  3 komp jpg 

Minimalizujte práci v hlavním procesoru

Hlavní vytížení CPU způsobuje zpracování javascriptů a následné vykreslení „pohyblivých prvků“, např. sliderů. Jakmile má někdo na hlavní stránce obrovský slider s velkým množstvím obrázků, k tomu videa z youtube a ještě nějaký efekt pro animaci, zaměstná CPU až na 30 vteřin, než to všechno načte a zvládne vykreslit. Není tedy dobré to přehánět s množstvím takovýchto souborů. Minimalizace práce v hlavním procesoru by se pak měla projevit na výsledné rychlosti načítání webu.

Zajistěte, aby text při načítání webfontů zůstal viditelný

Ve funkci font-display stylů CSS je do definice písma potřeba doplnit přístup k vykreslení. Chceme docílit toho, aby se text při načítání webfontů zobrazoval uživatelům. Potřebujeme dostat font-display do fontů z Googlu. Více o tom pojednává článek: Controlling Font Performance with font-display.

Příklad:

@font-face {font-display: fallback; ... }

Doporučený plugin PostCSS se vkládá do všech definic @font-face ve font-display.

Statické podklady zobrazujte s efektivními zásadami pro preload (mezipaměť)

Kešování souborů znamená, že stránka se jakoby „vyfotí“. Celá statická stránka se pak uloží do cache (mezipaměti). Při dalším stahování stránky prohlížeč načítá data už z mezipaměti, tzv. cache. Kešování výrazně zrychluje načítání webové stránky.

Nepoužívejte příliš velký DOM (Document Object Model)

Objektový model DOM definuje hierarchii struktury, obsahustylu dokumentu, které prohlížeč podporuje. W3C DOM jsou rozděleny do několika úrovní, tzv. DOM levelů. Každý level má za úkol specifikovat jinou oblast (Level 1 - navigace dokumentu a manipulace s obsahem, Level 2 - podpora jmenných prostorů, Level 3 - mechanismus načítání a ukládání XML schémat). I tady platí, že čím jednodušší variantu DOMU zvolíme, tím kratší bude doba načítání.

Předejděte přenášení enormního množství dat

Jak už bylo zmíněno výše, mezi nejdůležitější úkoly spojené se zrychlením webu patří snížení všech stahovaných dat, která jsou potřeba k úplnému zobrazení webové stránky. Shrneme si to.

Načítání stránek závisí také na rychlosti hostingového serverurychlosti návštěvníkova zařízení i na kvalitě připojení k internetu. Na rychlost webu má tedy vliv mnoho faktorů. Zaměřit bychom se měli ideálně na všechny jeden po druhém. Optimalizovat velikost grafických souborůdatovou velikost obrázků, správně naprogramovat CSSJS, upravit délku HTML kódů a aktivovat kompresi (gzip, GNU zip). Komprese může snížit velikost souborů o 50 až 80 %. Využívat bychom měli i načítání prohlížeče do mezipaměti, tzv. cache.

Pochopení přesného nastavování všech těchto komponent vyžaduje alespoň základní programátorské vědomosti. Neodborným zasahováním do HTML kódu a nesprávným nastavením CSSJavascriptů může snadno dojít k vážnému narušení struktury webu, které se pak obtížně napravuje!

Jako snazší a pohodlnější se jeví přenechat tuto problematiku programátorům, kteří se v tom skutečně vyznají. Můžete kontaktovat naše programátory.

Mohlo by Vás ještě zajímat:

Zpět na Strategie

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

kontaktujte nás