Jak optimalizovat rychlost načítání webu

‍Rychlost načítání webu hraje klíčovou roli pro stránky všech povah – ať už vlastníte e-shop, ve kterém měsíčně točíte miliony, nebo cestovatelský blog, skrz který se dělíte se svými čtenáři o zážitky z cest. Pomalé načítání webových stránek má negativní dopad jak na uživatele, tak i na vaše konverze, a v neposlední řadě i na rankování vašich stránek ve výsledcích vyhledávání Googlu, Seznamu i ostatních vyhledávačů.

První tři kritické vteřiny

Pokud se stránka nenačte do 3 vteřin, asi 40 % uživatelů odchází. Každá další sekunda riziko opuštění stránky zvyšuje. Jak tedy rychlost webu změřit, zrychlit načítání stránek a nepřicházet o návštěvníky a konverzi?

Jak měřit rychlost načítání webu

Pro měření rychlosti načítání webu doporučujeme online nástroj PageSpeed Insights. Nástroj vám ukáže poměrně detailní přehled o tom, jak váš web funguje na desktopu i mobilu a nabídne vám konkrétní doporučení pro zrychlení načítání stránek. Jaké metriky nástroj měří?

• FCP – First Contentful Paint – Čas, kdy se první obsah (např. text, obrázky) objeví na obrazovce.
• LCP – Largest Contentful Paint – Měří dobu, kdy se načte hlavní obsah stránky. Google doporučuje, aby LCP bylo do 2,5sekundy.
• CLS – Cumulative Layout Shift – Měří vizuální stabilitu stránky. Ideální CLS je menší než 0,1.
• TTI – Time to Interactive – Čas, za jak dlouho je stránka plně interaktivní.
• TBT – Total Blocking Time – Doba, kdy stránka blokuje uživatelské interakce.

Na základě měření vám PageSpeed Insights nabídne další kroky pro optimalizaci –často se ve výsledcích objeví následující:

• Optimalizace obrázků
• Minifikace CSS a JavaScriptu
• Využití cache prohlížeče
• Odložení načítání neblokujících skriptů

Jak tedy zlepšit rychlost načítání stránek?

Optimalizujte obrázky

Optimalizace obrázků je jedním z nejefektivnějších způsobů, jak můžete načítání stránek zrychlit. Ideální je obrázky na web vkládat už optimalizované. V realitě je ale vlastníci webovek začínají řešit právě až v momentě, kdy mají s rychlostí webu problém. Žádá si to trochu práce navíc s opětovným vkládáním obrázků, nicméně řešit to můžete i v momentě, kdy už problém máte. Jak tedy obrázky optimalizovat?

Volba formátu obrázků

JPG (JPEG):Toto je nejčastější formát obrázků na webech – velikostně by nikdy neměly přesahovat 400 kB, ideálně se je ale snažte držet na velikosti kolem 100 kB.

PNG: Obrázky formátu PNG používejte pouze pro nezbytně nutné případy, kde potřebujete zachovat transparentní pozadí – jako například v případě loga.PNG je objemnější než JPEG, proto rychlost webu zatěžuje ještě více, přičemž kvalita obrázků bohatě postačí ve formátu JPEG.

WebP: Formát určený přímo pro weby, velikost obrázků je malá a kvalita zůstává zachovaná, vedle JPEG je to další vhodný typ k použití na vaší webové stránce.

Komprese obrázků

Pokud chcete obrázky optimalizovat ještě před nahráním na web, můžete k tomu využít desktopové nástroje jako:

• TinyPNG / TinyJPG – Do nástrojů stačí nahrát obrázek stáhnout optimalizovanou verzi.
• ImageOptim (pro Mac) – Tento nástroj podporuje různé formáty a obrázky můžete vkládat jednoduchým tažením myši do aplikace.
• JPEGoptim / OptiPNG (pro Linux) –Příkazové řádky nástroje pro kompresi JPEG a PNG obrázků bezztrátově nebo se ztrátovou kompresí.
• Photoshop / GIMP – Profesionální grafické programy nabízejí možnost komprese při exportu obrázku. Ve Photoshopu použijte funkci „Uložit pro web“ (Save for web), kde si můžete nastavit kvalitu a formát souboru.

Využít můžete také online nástroje pro kompresi obrázků, které umožňují rychlou kompresi přímo v prohlížeči:

• Kraken.io – Nabízí jak online verzi, tak i API pro automatickou kompresi na webu. Umožňuje volit mezi ztrátovou a bez ztrátovou kompresí.
• Compressor.io – Podporuje kompresi JPEG,PNG, GIF a SVG a poskytuje volbu mezi ztrátovou a bezztrátovou kompresí.
• Squoosh.app – Pokročilý nástroj pro kompresi, který umožňuje detailní nastavení parametrů komprese, náhled změn a podporu moderních formátů jako WebP.

Pokud používáte CMS jako WordPress, můžete využít pluginy, které automatizují kompresi při nahrávání obrázků na web:

• Smush – Jednoduchý plugin, který automaticky komprimuje obrázky při nahrávání a umožňuje také dodatečnou kompresi starších obrázků v knihovně médií.
• Imagify – Umožňuje výběr mezi třemi úrovněmi komprese (Normal, Aggressive, Ultra) a podporuje WebP formát. Obrázky se optimalizují automaticky při nahrávání.
• ShortPixel – Podporuje mnoho formátů a nabízí automatickou i ruční optimalizaci. Může také konvertovat obrázky na moderní formáty, jako je WebP.
• EWWW Image Optimizer – Umožňuje bezztrátovou i ztrátovou kompresi obrázků přímo v knihovně médií WordPressu. Podporuje také optimalizaci na serveru, čímž šetří výpočetní výkon webu.

Pokud máte přístup k serveru, můžete implementovat nástroje přímo tam:

• Nástroje pro příkazové řádky – Nástroje jako jpegoptim, optipng, gifsicle, nebo svgo mohou být integrovány do pracovních postupů na serveru a automatizovat kompresi obrázků při nahrávání.
• Cron úlohy – Můžete nastavit cron úlohy na serveru, které budou pravidelně procházet nové obrázky a automaticky je optimalizovat.

Minimalizujte CSS a JavaScript

Nástroje pro minimalizaci CSS a JavaScriptu:

Online nástroje: Použijte online nástroje jako CSS Minifier nebo JavaScript Minifier, kde jednoduše vložíte svůj kód a stáhnete minimalizovanou verzi.

Nástroje provývojáře:

• UglifyJS – Nástroj pro minifikaci JavaScriptu
• CSSNano: Nástroj pro minifikaci CSS

Build systémy:

• Webpack – Nástroj pro balíčkování modulů, který zahrnuje minifikaci jako součást svého build procesu.
• Gulp / Grunt – Automatizační nástroje, které umožňují vytvářet úlohy pro minifikaci souborů pomocí pluginů, jako je gulp-uglify pro JavaScript a gulp-clean-css pro CSS.

Využijte mezipaměť (cache) prohlížeče

Využití cache prohlížeče je dalším z efektivních způsobů, jak zrychlit web a zlepšit uživatelskou zkušenost. Zjednodušeně řečeno, cache umožňuje prohlížeči ukládat kopie některých souborů (jako jsou obrázky, styly a skripty)do dočasné paměti. Když se uživatel vrátí na váš web, prohlížeč může použít tyto uložené soubory namísto jejich opětovného stahování ze serveru. Výsledkem je mnohem rychlejší načítání stránek.

Začněte tím, že určíte, které soubory je vhodné ukládat do cache. Obvykle se jedná o statické soubory, které se často nemění. Dynamický obsah, jako je HTML, obvykle do cache neukládáme. Které soubory jsou statické, a tedy vhodné pro ukládání do mezipaměti?

• Obrázky (jpg, jpeg, png, gif, svg, ico)
• Styly (css)
• JavaScriptové soubory (js)
• Fonty (woff, woff2, ttf)
• PDF dokumenty a statické soubory

Cache prohlížeče funguje na základě hlaviček, které server posílá prohlížeči. Hlavička pak určuje, jak dlouho má prohlížeč soubory ukládat. Mezi nejpoužívanější hlavičky cache patří následující:

• Cache-Control – Určuje, jak dlouho a kde může být obsah uložen. Může mít hodnoty jako max-age, public, private, no-cache, nebo no-store.
• Expires – Definuje datum a čas, kdy soubor přestane být platný a musí být znovu načten.
• ETag – Slouží k identifikaci konkrétní verze souboru. Prohlížeč může požádat server, aby zjistil, zda je soubor stále aktuální.

Odložte načítání neblokujících skriptů

JS může být jedním z hlavních důvodů pro pomalé načítání stránek, protože skripty blokují vykreslování obsahu. Díky odložení se web bude načítat rychleji.

Co odložení načítání JavaScriptu ovlivňuje?

• Zrychluje načítání stránky – Když se JavaScript načítá bez odkladu, může blokovat ostatní prvky stránky, jako jsou obrázky nebo text. Tím, že skripty načítáte odloženě, umožníte prohlížeči vykreslit obsah stránky jako první a skripty provést až později.
• Zlepšuje uživatelskou zkušenost –Uživateli se stránka zobrazí rychleji, takže s ní může začít interagovat ještě před tím, než jsou všechny skripty načtené a spuštěné.
• Snižuje blokování vykreslování –JavaScript často blokuje vykreslování dalších částí stránky, a tím zhoršuje výkon. To je další problém, který odložením minimalizujete.

Po provedení každého kroku optimalizace nezapomeňte rychlost načítání webu opakovaně testovat pomocí PageSpeed Insights nebo obdobného nástroje, budete tak mít přehled o tom, který krok byl ve vašem případě nejzásadnější a příště budete v případě problému s pomalým webem vědět, kam sáhnout jako první. Věříme, že realizace zmíněných kroků vám s rychlostí webu pomůže a stránky budou o poznání uživatelsky přívětivější.