Vytvořili jste nedávno web pro sebe nebo někoho jiného? Tak to byste určitě měli vědět, že ideální by se měl načíst do 2 vteřin.
Máte blog? Určitě se vašim čtenářům nechce čekat neúměrně mnoho vteřin, než se článek načte. Vám by se také určitě nechtělo.
Podle statistik byli lidé v roce 1999 ochotni čekat až 8 sekund na načtení stránky. Dnes čtvrtina návštěvníků odchází z webu, pokud se nenačte do 4 vteřin. Pouhé 2 sekundové zdržení v načtení může zvýšit odchody z košíku až o 87%. Na mobilech dokonce až 74% lidí odchází, pokud se stránka nenačte do 5 vteřin.
Nezáleží tedy na tom, jakému účelu má sloužit web, rychlost načítání stránky je klíčová v každém případě. Pomalá stránka znamená méně návštěv, méně konverzí, méně nákupů a menší spokojenost.
Obsah
Jak si otestovat rychlost stránky?
Existuje několik skvělých nástrojů, jak si změřit rychlost načítání. Doporučuji GTmetrix nebo Webpagetest. A do třetice je nejlepší odstopovat si načítání manuálně. Stačí vzít stopky na mobilu a změřit čas.
Užitečný nástroj je také Page Speed Insights od Googlu. Sice vám neukáže rychlost načítání stránky, ale odhalí vám některé z nedostatků, o kterých bude řeč v tomto článku.
Pro rychlost načítání na mobilech doporučuji nástroj Testmysite .
Za kolik by se vám stránka měla načíst?
Ideální čas je 2 sekundy a méně. Alespoň to jsou očekávání internetových uživatelů a doporučení z Google. Samozřejmě, ne vždy bude možné takového času dosáhnout. Dobré jsou také 3 sekundy. Tak jako tak, měli byste se co nejvíce těm 2 sekundám přiblížit a snížit čas načítání co to jen půjde. Nikdo si nebude stěžovat, že se vám web načte příliš rychle.
4 faktory ovlivňující rychlost načítání WordPress stránky
- Rychlost připojení na internet – neovlivníte na straně návštěvníka
- Internetový prohlížeč – neovlivníte na straně návštěvníka
- Webhosting
- WordPress šablona a nastavení
Pojďme se na ně podívat trochu detailněji.
Rychlost připojení na internetu
Pochopitelně, čím pomalejší internet, tím pomaleji se bude web stránka načítat.
Vzhledem k tomu, že dnes již není internet napojen po telefonu jako kdysi, a poskytovatelé internetového připojení i mobilní operátoři poskytují v dnešní době vysokorychlostní připojení, tento faktor v úvahu nemusíte brát.
Nicméně není ve vašich možnostech ovlivnit rychlost internetového připojení lidí, kteří přijdou na váš web.
Internetový prohlížeč
Dalším faktorem je samotný internetový prohlížeč. V minulosti byly rozdíly dosti výrazné, ale dnes jsou tyto rozdíly menší. Nejrychlejší prohlížeče jsou jednoznačně Google Chrome a Firefox .
Naneštěstí nemáte jak ovlivnit to, jaký prohlížeč lidé používají nebo zda používají starší neaktuální a potenciálně i pomalejší verzi z toho důvodu, že starší prohlížeč nemusí umět načíst některé části webu nebo kódu.
Webhosting a jeho vliv na rychlost načítání stránky
Když přes prohlížeč chcete najít nějakou web stránku, v podstatě zadáváte příkaz vzdálenému počítači (serveru, na kterém je web stránka umístěna), aby vám zpřístupnil a zobrazil soubory dané stránky. Samozřejmě platí, že čím výkonnější server, tím rychleji se vám stránka načte.
Výkon serveru ovlivňují:
- Dedikované zdroje – každý server má určitý výkon (RAM – paměť; CPU – procesory). V případě sdíleného hostingu si výkon serveru „sdílí“ více webových stránek. V případě Virtuálního serveru (VPS) si již můžete nakonfigurovat prostředky serveru podle svých potřeb.
- Rychlý hardware – data se načítají z novějších SSD disků se mnohem rychleji než z klasických HDD.
- Propojení – aby se vám WordPress stránka načítala, potřebujete přístup k databázím a dalším zdrojům. V ideálním případě by tyto zdroje měly být na jednom serveru pro rychlejší propojení a komunikaci mezi nimi. Pokud jsou rozděleny na více serverech, načtení může být pomalejší, pokud to není dobře nastaveno.
Na co si dát pozor při výběru hostingu
Pochopitelně, asi každý hostingový poskytovatel vám řekne, že jeho řešení je super rychlé, neboť má SSD disky, nebo je jeho sdílený hosting optimalizován (ať už to znamená cokoliv).
Jenže server určený ke sdílenému hostingu při optimálním fungování a za ideálních podmínek zvládne několik set běžných web stránek. Pokud jich už je 1000 a více, server mohou vytěžovat „sousedské“ stránky a tím pádem vás zpomalit.
Jiný příklad: u jednoho silného hráče, který se pyšní rychlým hostingem nejen pro WordPress stránky, mám dva WordPress weby. Jedna má rychlost odezvy serveru podle nástroje Pagespeed Insights 0,53 sekund, což by mohlo být také rychlejší, ale dá se říci, že je to v pořádku. Jenže druhý web měl odezvu serveru 2 sekundy. Jen pro vysvětlení, odezva serveru neznamená načtení celé stránky, pouze čas od doby, kdy server začal odesílat soubory stránky. Teprve když jsem udělal několik změn v nastavení, tak se mi podařilo snížit celkovou dobu načítání na 1,6 sekundy.
Co to znamená? Mají nekvalitní hosting? To určitě ne. Spokojen jsem, ale naučilo mě to nevěřit tvrzením o rychlém hostingu. Jednoduše, dokud to neotestujete naostro, neuděláte nějaké úpravy v nastaveních svého WordPress , o kterých si povíme více již za chvíli, web vám rychleji nepoběží. Hostingová firma za vás ty změny neudělá, dokonce ani ty úpravy nejsou vždy sto procentní zárukou rychlého webu na daném hostingu.
Tentýž web se stejnými nastaveními může někde fungovat rychleji, někde o něco pomaleji. Proto dokud nespustíte web naostro, ve skutečnosti nemáte jistotu.
Tip redakce: doporučujeme použít hosting WY nebo WebSupport .
Jak zrychlit načítání WordPress u
Pravidelné aktualizace
Nemám jimi na mysli jen aktualizace WordPress u jako takového, ale také technologického pozadí hostingu. Většinu by měl za vás udělat poskytovatel hostingu, ale některé věci si často můžete nastavit také sami v administračním rozhraní svého hostingu. Jedna z nich by měla být také aktualizace na PHP 7 , pokud jste tak dosud neučinili.
Pokud byste nevěděli, PHP je skriptovací jazyk pro tvorbu dynamických a interaktivních web stránek. A ano, je na něm postaven i WordPress .
A proč byste měli své PHP aktualizovat alespoň na verzi 7? Protože můžete zaznamenat značné zrychlení své stránky. Několik srovnání v rychlosti se starší verzí naleznete tady , tady a tady .
Dejte si však pozor na to, aby vaše šablona byla plně kompatibilní s novou verzí PHP, jinak budete mít problém v zobrazení některých prvků na webu, případně celého webu.
Vyberte si WordPress šablonu optimalizovanou pro rychlost
Výběr WordPress šablony je jedním ze 3 kroků při tvorbě WordPress stránky .
Jenže obecně platí, že čím více kódu bude na stránce, tím déle se bude stránka načítat. Totéž platí u nekorektně nakódovaných šablon.
Možností na výběr šablon máte velmi mnoho i na oficiální stránce WordPress u. Jelikož jsou zdarma, nemusí být pravidelně aktualizovány, nebo vhodně nakódovány. Toto řešení je nejlepší tehdy, když s weby nebo blogováním teprve začínáte. Abyste však měli větší jistotu, je lepší investovat do placené šablony.
Osobně mám zkušenosti s Divi (na ní se mi podařilo snížit rychlost načítání na zmíněných 1,6 vteřiny z původních 4 sekund) a OptimizePress , které jsou skvěle naprogramované, pravidelně aktualizované a dost rychlé.
Určitě takto víte najít i další, ale ujistěte se, že programátoři mysleli i na rychlost – nejen na desktopech ale také na mobilních zařízeních.
Odstraňte zbytečné sledovací kódy
Jak jste se již dočetli v bodě výše, čím více kódu na stránce máte, tím pomaleji se bude načítat. Problém v tomto ohledu mohou dělat také různé marketingové sledovací kódy jako Facebook pixel, nástroje pro sledování chování na webu jako Hotjar, Smartlook a podobně.
Pokud je nevyužíváte, odstraňte je úplně nebo vyzkoušejte jejich implementaci do stránky prostřednictvím Google Tag managera, přes který umíte spravovat různé kódy bez nutnosti vkládat je na web. Takto vyměníte více kódů za jeden.
Používejte WordPress pluginy s rozumem
WordPress pluginy jsou užitečná věc. Chcete-li nějakou funkcionalitu, která vám chybí na stránce, snadno najdete potřebný plugin , ať už zdarma nebo nějaký placený.
Jenže čím více jich máte na stránce, tím pomaleji se vám může načíst. Navíc, pokud je špatně naprogramován, může web stránku ještě více zpomalovat. Základní pravidlo tedy je čím méně pluginů, tím lépe .
Vyčistěte si databázi
Databáze vašeho webu se postupně může zaplnit zbytečnými daty. Z toho důvodu je užitečné čas od času databázi pročistit, například od revizí stránek, které nepotřebujete. V pročištění vám pomůže například plugin WP-Optimize nebo WP-Sweep. Manuálně umíte nastavit i maximální počet revizí přes wp-config.php .
Odstraňte prvky, které se dlouho načítají
Mezi oblíbené prvky na stránkách patří například slidery. Sice jsou hezké, ale zcela zbytečné pro většinu webů, zhoršují konverze , lidé na ně nelikají a pokud ano, tak ve většině případů jen na první slide.
A to nejhorší – dost zpomalují načítání vaší stránky. Mnoho silderů se načte až za 2 vteřiny.
Zdroj: https://soliloquywp.com/wordpress-slider-slow-to-load-heres-why-and-how-to-fix-it/
Když si vezmete, že ideálně by se měla celá vaše stránka načíst do 2 vteřin a vám se za tu dobu načte pouze slider, tak to je dost mizerný výkon. Nejlepší proto uděláte, pokud slider vyměníte za rychlejší element, který splní stejný účel. Nebo když už na něm trváte, najděte si nějaký, který se načte rychleji.
Snižte počet požadavků na server
Vyhledáním domény stránky do prohlížeče nebo kliknutím na odkaz směřující na stránku pošlete požadavek na server, kde je daná stránka umístěna. Jenže tento požadavek není ve skutečnosti jeden. Je jich několik – od souborů, ce po různé skripty.
Jak jste již uhodli, čím více požadavků, tím pomalejší načítání. Co tedy dělat, abyste snížili jejich počet?
- Ukažte při proklicích na články jen prvních pár vět
- Rozdělte článek na více stránek ( návod jak na to )
- Snižte počet zobrazených článků na stránce, například na 5
- Deaktivujte pluginy, které nepotřebujete
- Snižte počet obrázků/videí na stránce
- Využijte tzv. lazy loading, to znamená že prvky jako obrázky či videa se načítají až když se uživatel doscrolluje na stránce k danému prvku, pomocí tohoto nebo tohoto pluginu.
Optimalizujte (komprimujte) obrázky
Oproti běžnému kódu, který je v textové podobě, zabírají obrázky mnohem více místa. Proto je důležité mít obrázky, které zabírají co nejméně dat při zachování jejich kvality.
Snížit jejich velikost před nahráním do WordPress můžete přes stránku Tinypng.com. Ještě rychlejším řešením je plugin WP Smush nebo EWWW Image Optimization , které umí automaticky zmenšit obrázky při jejich nahrání do WordPress .
Embedujte videa
WordPress bez problémů zvládne přehrát videa, která do něj nahrajete, ale mnohem lepší je video nahrát například na YouTube a přes funkci embed ho vložit na vaši stránku. Proč? Protože Video soubory bývají zpravidla větší a jejich načítání ze serveru by zpomalilo i načítání stránky.
Využijte caching
Cache je rychlá vyrovnávací paměť, která slouží k dočasnému uložení souborů nebo dat, takže budoucí požadavky na tato data se zrealizují rychleji.
Abychom komplikované udělali jednoduchým, stačí vám využít cacheovací pluginy jako WP Rocket , WP Super Cache nebo W3 Total Cache (doporučuji).
S W3 Total Cache a komprimací 3 obrázků se mi na jednom svém webu podařilo snížit rychlost načítání z původních 4 vteřin na 1,6 sekundy.
Znemožněte hotlinkování
Multimediální obsah jako obrázky či videa na vaší stránce můžete zobrazit dvěma základními způsoby. Buď je nahrajete přímo do svého WordPressu nebo na ně odkážete přes url adresu, čímž odešlete požadavek na načtení z jiného serveru.
Čili pokud nahrajete obrázek přímo na váš WordPress hosting, váš html kód bude vypadat asi takto:
<img src=“nazevobrazka.jpg“>
Pokud byste zobrazovali obrázek z jiného webu, html kód by vypadal následovně:
<img src=“https://domena.koncovka/nazevciziehoobrazka.jpg“>
Pokud byste takto zobrazovali multimediální soubory z jiných stránek vy, až takový problém to není, pokud nejsou autorsky chráněny. Jenže pokud by takto zobrazovaly jiné weby vaše soubory, už by to problém být mohl, protože by vám jiné weby posílaly požadavky na váš server. Jinak řečeno, vytěžovali by ho a tedy i zpomalovali.
Na to je důležité myslet u větších portálů/webů, které pracují se spoustou obrázků nebo videí. Znemožnit hotlinkování můžete přidáním následujícího kódu do souboru .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)://(www\.)vasadomena.koncovka/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ – [F]
V předposledním řádku stačí zadat vaši doménu a v posledním řádku si také můžete zvolit typ souborů, pro které chcete hotlinkování zakázat.
Minifikace kódu, Gzip komprese
Podíváte-li se na zdrojový kód nějakého WordPress webu (stisknutím tlačítka ctrl + uv prohlížeči Chrome), uvidíte velký shluk kódů html, css či javascriptu.
Minifikace/Gzip komprese znamená, že to, co vidíte, může být menší a tedy zabírat méně prostoru. Jinými slovy, odráží se to na rychlejším načítání vaší stránky.
Funguje to na jednoduchém principu. Představte si, že na stránce je kód ve tvaru AA BBB CCC DDDDD. Zjednodušeně by to mohlo být i 2A 3B 3C 5D. Původních čtrnáct znaků lze takto minifikovat na osm.
Takto umíte vzít kód vaší stránky a na podobném principu jej zmenšit o desítky procent.
Jak to udělat? Dá se to pomocí výše zmíněných pluginů WP Rocket , WP Super Cache, W3 Total Cache, dále pluginem Autooptimize nebo v nejlepším případě je minifikace kódu a Gzip komprese součástí vaší WordPress šablony.
Při výběru programátoru dbejte na to, aby znal osvědčené postupy
Pokud byste si chtěli dát naprogramovat WordPress šablonu podle vašich konkrétních požadavků, ujistěte se, že výše zmíněná doporučení nejsou pro programátora neznámé pojmy a dobře se v nich orientuje. Mít hezký web se špatným kódem by pro vás nebyla žádná výhra.
Také by měl ovládat minifikování všech PHP požadavků a přístupů na databázi.
V praxi by zbytečné PHP požadavky vypadaly takto:
<title><?php bloginfo(‚name‘); ?> <?php bloginfo(‚description‘);?></title>
<link rel=“shorcut icon“ type=“image/x-ico“ href=“<?php bloginfo(‚template_url‘); ?>/favicon.jpg“ />
<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“<?php bloginfo(‚stylesheet_url‘); ?>„/>
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“<?php bloginfo(‚template_url‘); ?>/print.css“ />
<link rel=“alternate“ type=“application/rss+xml“ title=“RSS .92″ href=“<?php bloginfo(‚rss_url‘); ?>“ />
Namísto toho by měly být změněny na běžné textové html zápisy, což by mohlo vypadat nějak takto:
<title> Název vaší WordPress stránky< /title>
<link rel=“shorcut icon“ type=“image/x-ico“ href=“http://nazevvasejdomeny.cz/wp-content/themes/sablona/favicon.jpg“ />
<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“http://nazevvasejdomeny.cz/wp-content/themes/sablona/style.css“/>
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“http://nazevvasejdomeny.cz/wp-content/themes/sablona/print.css“ />
<link rel=“alternate“ type=“application/rss+xml“ title=“RSS .92″ href=“nazevvasejdomeny.cz/feed/rss/“ />
Slovo na závěr
Pokud jste dočetli až sem, gratuluji, protože toho bylo fakt hodně. Ale zato jste nyní mnohem lépe připraven ke zrychlení načítání stránky než většina lidí, co má WordPress web.
Samozřejmě nemusíte využít všech postupů, které zde byly zmíněny. Začněte hlavně s tím, co je ve vašich silách. Určitě nepřehlédněte optimalizaci obrázků, jelikož tam lze nejčastěji ušetřit spoustu prostoru.
Případně, pokud znáte ještě další způsoby, jak zrychlit rychlost načítání stránky, podělte se o ně v komentářích.
Was this article helpful for you? Support me by sharing, please. 👍
