Spustíte test rychlosti svého webu a výsledky vám dají skóre, seznam doporučení a téměř žádné vodítko, kde začít. Vědět, jak web zrychlit, znamená rozumět tomu, která vylepšení působí na které části průběhu načítání a která přinesou největší výsledky vzhledem k vynaloženému úsilí. Tento článek popisuje nejúčinnější změny, v jakém pořadí je řešit a co od jednotlivých vylepšení může čekat typický web malé firmy.
Rychlost webu se nezlepší jednou opravou. Je výsledkem několika nezávislých faktorů, které působí společně: jak těžká je stránka, jak rychle server odpovídá, jak efektivně se doručují soubory a kolik práce musí prohlížeč udělat, aby vykreslil to, co návštěvník vidí. Když nejdřív řešíte největší přispěvatele, dostanete nejrychlejší zisky. Souvislosti toho, které metriky načítání jsou důležité a proč, najdete v článku o tom, co je doba načítání stránky a jak se měří.
Jaké jsou nejčastější příčiny pomalého načítání webu?
Než začnete cokoli měnit, pomůže pochopit, kde se čas skutečně ztrácí. Pomalé weby mají téměř vždy společné jednu nebo více z následujících věcí.
Neoptimalizované obrázky
- Obrázky jsou největší soubory na většině stránek a nejčastější jednotlivá příčina pomalého načítání
- Stránka s pěti nezkomprimovanými fotografiemi může být desetkrát až dvacetkrát těžší, než je třeba
- Oprava obrázků obvykle přináší největší zrychlení ze všech jednotlivých změn
Žádná mezipaměť
- Bez mezipaměti musí server při každé návštěvě stránku znovu sestavit a prohlížeč znovu stáhnout každý soubor od začátku
- Mezipaměť umožňuje vracejícím se návštěvníkům načítat stránky z uložených kopií místo stahování všeho znovu
Neminifikované soubory kódu
- Soubory CSS a JavaScript často obsahují mezery, komentáře a formátování, díky nimž jsou čitelné pro vývojáře, ale přidávají prohlížečům zbytečnou váhu
- Minifikace tento nadbytečný obsah odstraní a sníží velikost souborů, někdy o 30 až 50 procent
Pomalá odpověď serveru
- Všechno čeká na server. Pokud server odpovídá déle než 800 milisekund, zpozdí se od začátku všechny ostatní metriky
- Sdílená hostingová prostředí a neoptimalizované databáze jsou nejčastějšími příčinami vysokého Time to First Byte
Zdroje blokující vykreslování
- Skripty a styly načtené v hlavičce dokumentu pozastaví prohlížeč dřív, než může cokoli vykreslit
- Přesunutí nekritických skriptů tak, aby se načítaly po hlavním obsahu, toto úzké hrdlo odstraní
Jak optimalizovat obrázky, abyste snížili váhu stránky?
Optimalizace obrázků je u většiny webů oprava s nejvyšším dopadem, protože přímo zmenšuje největší soubory na stránce. Největší snížení velikosti souborů obrázků přinášejí tři změny dohromady.
Zvolte správný formát
- WebP dává menší soubory než JPEG při stejné vizuální kvalitě a podporuje průhlednost jako PNG
- Pro všechny fotografie a běžnou grafiku přejděte na WebP. PNG používejte jen tam, kde je potřeba průhlednost
Před nahráním změňte velikost
- Nahrání obrázku širokého 4 000 pixelů, který se bude zobrazovat v šířce 800 pixelů, nutí každého návštěvníka stahovat čtyřikrát víc dat, než je nutné
- Obrázky před nahráním zmenšete na jejich maximální zobrazovanou šířku
Zkomprimujte na vhodnou úroveň kvality
- Nastavení kvality 75 až 85 u formátů se ztrátovou kompresí dává soubory o 60 až 80 procent menší než originál, bez viditelného rozdílu v kvalitě u většiny fotografií
- Kombinace správného formátu, správné velikosti a vhodné komprese může snížit váhu obrázků na stránce o 80 až 90 procent
Úplného průvodce formáty souborů, typy komprese, líným načítáním a responzivními obrázky najdete v článku o tom, jak optimalizovat obrázky pro rychlejší načítání.
Jak mezipaměť zkracuje dobu načítání?
Mezipaměť ukládá kopie zdrojů stránky, aby se nemusely stahovat nebo znovu generovat při každém požadavku. Existují dva typy, které působí v různých bodech řetězce doručování.
Mezipaměť prohlížeče
- Prohlížeč návštěvníka po první návštěvě uloží CSS, JavaScript, obrázky a písma
- Při dalších návštěvách se tyto soubory načtou z lokálního zařízení místo opětovného stahování, což výrazně zkrátí dobu načítání pro opakované návštěvníky
- Mezipaměť prohlížeče se řídí hlavičkami mezipaměti nastavenými na serveru. Většina moderních hostingových platforem je nastavuje automaticky
Mezipaměť serveru
- Server ukládá předem vygenerované verze stránek, takže se nemusejí při každém požadavku sestavovat od začátku
- To zrychluje Time to First Byte pro všechny návštěvníky, včetně těch, kteří přicházejí poprvé
- Mezipaměť serveru má největší dopad na dynamických webech, kde se stránky generují z databázových dotazů
Podrobné vysvětlení, jak mezipaměť prohlížeče funguje a jak ji nastavit, najdete v článku o tom, co je mezipaměť prohlížeče a jak funguje.
Co pro rychlost načítání dělá minifikace?
Soubory CSS a JavaScript psané vývojáři obsahují mezery, zalomení řádků a komentáře, které kód usnadňují číst a udržovat. Prohlížeče nic z toho nepotřebují. Minifikace to odstraní a vzniknou menší soubory, které se stahují rychleji a fungují stejně.
- Minifikace CSS obvykle sníží velikost souboru o 20 až 30 procent
- Minifikace JavaScriptu může snížit velikost souboru o 30 až 50 procent, u velkých souborů s množstvím komentářů a prázdných znaků i víc
- Minifikace je jednou z jednodušších výher, protože nevyžaduje žádné změny v tom, jak web vypadá nebo funguje, a často ji lze zapnout pluginem nebo nastavením platformy
Úplný rozbor toho, jak minifikace funguje u CSS, JavaScriptu a HTML, najdete v článku o tom, co je minifikace a jak pomáhá vašemu webu.
Jak CDN zkracuje dobu načítání pro návštěvníky?
Síť pro doručování obsahu (CDN) zkracuje fyzickou vzdálenost mezi návštěvníkem a serverem, který doručuje vaše soubory. Bez CDN se všichni návštěvníci připojují k jednomu serveru na jednom místě. S CDN je každý návštěvník obsloužen ze serveru, který je mu nejblíž.
- U návštěvníků v blízkosti původního serveru je zrychlení díky CDN mírné
- U návštěvníků v jiných zemích nebo regionech může CDN zkrátit Time to First Byte o stovky milisekund
- CDN mají největší dopad na weby s mezinárodním publikem nebo se značným množstvím médií
- Některé hostingové platformy zahrnují doručování přes CDN automaticky. Tam, kde je zahrnuto, není potřeba žádná další konfigurace
Úplné vysvětlení, jak CDN fungují a kdo je potřebuje, najdete v článku o tom, co je CDN a jak pomáhá vašemu webu.
Co je líné načítání a jak zkracuje počáteční dobu načítání?
Líné načítání (lazy loading) odkládá stahování obrázků a dalších zdrojů pod hranou obrazovky, dokud se k nim návštěvník neposune blízko. Tím se snižuje množství dat, která musí prohlížeč stáhnout, než je stránka použitelná.
- Na stránce s dvaceti obrázky znamená líné načítání, že prohlížeč při prvním otevření stránky stáhne jen tři nebo čtyři obrázky viditelné na obrazovce
- Zbývající obrázky se načítají, jak návštěvník stránku posouvá, takže se stahování rozloží v čase, místo aby se nahrnulo na začátek
- Líné načítání přímo zlepšuje Time to Interactive a může mít znatelný vliv na Largest Contentful Paint, když obsah nad hranou obrazovky není plný obrázků
- Líné načítání nepoužívejte u obrázků nad hranou obrazovky. Ty se musejí načíst okamžitě
Úplného průvodce tím, jak líné načítání funguje a jak ho zavést, najdete v článku o tom, co je líné načítání a jak funguje.
Jak zdroje blokující vykreslování zpomalují stránku?
Když prohlížeč narazí v hlavičce dokumentu na skript nebo styl, pozastaví vykreslování, dokud se tento soubor nedokončí načíst. Návštěvník mezitím nevidí nic. Takovému zdroji se říká zdroj blokující vykreslování.
Jak omezit blokování vykreslování
- Nekritický JavaScript přesuňte na konec dokumentu nebo použijte atribut
deferčiasync, aby skripty vykreslování nepozastavovaly - Zjistěte, které CSS je potřeba okamžitě (styly nad hranou obrazovky) a které lze načíst později
- Odstraňte nebo nahraďte skripty třetích stran, které nejsou nezbytné. Chatovací widgety, vložené prvky ze sociálních sítí i sledovací skripty přidávají dobu blokování
A co doba odezvy serveru?
Každé další vylepšení je omezeno tím, jak rychle server vůbec odpovídá. Pomalý server přidává zpoždění, než může prohlížeč začít načítat jakýkoli zdroj.
Co ovlivňuje dobu odezvy serveru
- Kvalita hostingu: sdílená hostingová prostředí dělí procesor a paměť mezi mnoho webů, což způsobuje nepředvídatelné doby odezvy
- Výkon databáze: pomalé nebo neoptimalizované databázové dotazy zdržují schopnost serveru vytvořit odpověď
- Mezipaměť na straně serveru: bez mezipaměti spouští každý požadavek úplné sestavení stránky z databáze
- Zeměpisná vzdálenost k serveru: i bez CDN přidává server daleko od návštěvníka latenci
Dobré Time to First Byte je pod 800 milisekund. Pokud je vaše TTFB trvale nad touto hodnotou, přinese zlepšení hostingu nebo zavedení mezipaměti na straně serveru zisky, které žádná optimalizace na straně prohlížeče nenahradí.
Kde začít se zrychlováním webu?
Pokud se zrychlováním zabýváte poprvé, tohle pořadí přináší u typického webu malé firmy nejrychlejší zisky za nejmenší úsilí.
Pořadí priorit pro většinu webů
- První: optimalizujte obrázky. Řeší největší zdroj váhy stránky a často odpovídá za 60 až 80 procent odstranitelné doby načítání
- Druhé: zapněte mezipaměť. Mezipaměť prohlížeče i serveru snižuje práci při každé návštěvě, zejména u vracejících se návštěvníků
- Třetí: minifikujte CSS a JavaScript. Nižší úsilí, spolehlivé zlepšení dob přenosu souborů
- Čtvrté: přidejte CDN, pokud je vaše publikum zeměpisně rozptýlené nebo pokud je doručování médií významnou součástí webu
- Páté: řešte zdroje blokující vykreslování a dobu odezvy serveru, pokud jsou předchozí kroky zavedené a skóre je stále špatné
Po každé sadě změn spusťte test rychlosti a změřte zlepšení, než přejdete k další oblasti. Jak výsledky testů rychlosti přesně vyložit, najdete v článku o tom, jak otestovat rychlost svého webu. Rozbor konkrétních metrik, které tato vylepšení ovlivňují, najdete v článku o tom, co jsou Core Web Vitals.
Jak WEMASY zkracuje dobu načítání webu
Tvůrce webů WEMASY řeší několik nejběžnějších zrychlení automaticky. Obrázky se při nahrání komprimují a převádějí na WebP. Hlavičky mezipaměti prohlížeče jsou nastavené ve výchozím stavu. Soubory CSS a JavaScript, které platforma doručuje, jsou minifikované. Doručování přes CDN je součástí všech tarifů a statické soubory se doručují z místa nejbližšího každému návštěvníkovi.
Skóre rychlosti stránek a data Core Web Vitals jsou vidět v analytické administraci WEMASY, s doporučeními pro každou stránku, která upozorňují na zbývající problémy. Zlepšení po jakékoli změně obsahu nebo designu tak můžete sledovat, aniž byste ručně spouštěli externí testy.
Co všechno je v ceně, zjistíte u tvůrce webů WEMASY, nebo si projděte možnosti tarifů v ceníku.
Často kladené otázky
Jaký je nejrychlejší způsob, jak web zrychlit?
Optimalizace obrázků přináší u většiny webů největší zrychlení za nejmenší úsilí. Nezkomprimované obrázky jsou jediným největším přispěvatelem k váze stránky a přechod na formát WebP se správnou kompresí a správnými rozměry může velikost souborů obrázků snížit o 80 až 90 procent. Po obrázcích jsou dalšími nejúčinnějšími vylepšeními zapnutí mezipaměti prohlížeče a minifikace souborů CSS a JavaScript. S tvůrcem webů WEMASY to můžete nastavit přímo na svém webu.
Ovlivňuje rychlost webu pozice ve vyhledávání?
Ano. Vyhledávače používají jako signály pro pozice Core Web Vitals, které měří konkrétní metriky načítání, interaktivity a vizuální stability. Stránky s dobrým skóre u Largest Contentful Paint, Interaction to Next Paint a Cumulative Layout Shift mají oproti stránkám se špatným skóre výhodu v pozicích, zejména když mají konkurenční stránky podobnou kvalitu obsahu. Zlepšení rychlosti, která zvyšují skóre Core Web Vitals, mohou přispět k lepší viditelnosti ve vyhledávání.
Jaká je dobrá doba načítání webu?
U Core Web Vitals je hlavním cílem Largest Contentful Paint pod 2,5 sekundy. V praxi stránka, která je plně interaktivní do tří sekund na mobilním připojení, splňuje hranici, na které nejvíc záleží pro zážitek návštěvníků i pozice ve vyhledávání. Úplné načtení stránky pod pět sekund na mobilu je rozumné měřítko pro většinu webů malých firem.
Jak poznám, co můj web zpomaluje?
Spusťte test rychlosti stránky nástrojem, který ukazuje terénní data vedle laboratorních. Dívejte se na konkrétní metriky označené jako neúspěšné, ne na celkové skóre. TTFB nad 800 milisekund ukazuje na problémy se serverem. Špatné skóre LCP obvykle ukazuje na problémy s obrázky nebo zdroji blokujícími vykreslování. Vysoký Total Blocking Time ukazuje na problémy se spouštěním JavaScriptu. Každá metrika ukazuje na jinou oblast k prověření.
Ovlivňuje hosting rychlost webu?
Ano, výrazně. Kvalita hostingu ovlivňuje Time to First Byte, který určuje, jak rychle může prohlížeč začít načítat jakýkoli zdroj. Sdílená hostingová prostředí dělí výpočetní výkon mezi mnoho webů, což vede k nestabilním dobám odezvy. Hosting, který zahrnuje mezipaměť na straně serveru a doručování přes CDN, snižuje TTFB a zlepšuje rychlost doručování pro všechny návštěvníky bez ohledu na další optimalizace provedené na samotné stránce.
Mohu web zrychlit bez vývojáře?
Ano, u většiny vylepšení, která přinášejí největší rozdíl. Optimalizaci obrázků, výběr správných formátů souborů i přidání alternativního textu lze udělat bez zásahu do kódu. Mezipaměť prohlížeče a minifikaci často řeší automaticky webová platforma nebo je lze zapnout v nastavení. Vývojář je obvykle potřeba jen u pokročilých změn, jako je vlastní konfigurace serveru, odstranění zdrojů blokujících vykreslování u ručně psaných webů nebo optimalizace databázových dotazů.