Elementor je dobrý. Umožňuje vytvářet stránky rychle, pěkně a plně si je přizpůsobit vlastním potřebám, aniž byste museli umět psát kód.
Nicméně kód, který vygeneruje Elementor není zrovna nejčistší. Často je (zbytečně) složitě skládaný, nedá se v něm příliš dobře vyznat a je košatější, než by byl kód, který by napsal člověk.
To vše se může výrazně a negativně promítnout na rychlosti webu.
Nemusíte mi věřit, klidně vložte Váš Elementor web do Google měření rychlosti a přesvědčte se na vlastní oči.
Co s tím můžeme dělat?
I když s Elementorem nejspíše nikdy nedosáhneme skóre rychlost 100/100, tak věřím, že implementace níže zmíněných tipů, Vám stránky zrychlí alespoň o 25%, obzvláště v případě, že jste web nikdy před tím neoptimalozovali.
Proč je vlastně rychlost tak důležitá?
Lidé jsou netrpělivý. Neradi čekají a pomalé weby mohou napjatý závod o naši pozornost vyhrát jen ztěží. Tyto „intuitivní“ důvody však zdaleka nejsou jedinými.Google již 11 let považuje rychlost za jednu z důležitých metrik pro určení pozice stránek ve vyhledávači, přičemž v roce 2018 přidal na rychlost ještě větší váhu a začal ji měřit také na mobilních telefonech.Kromě uspokojení boha Googlu má rychlost i zásadní businessové dopady. Podle dat společnosti Small SEO Tools and Strangeloop 1 vteřina opoždění při načítání snížila konverze o 7 %. Jinými lsovy, podle těchto dat, pokud Vaše stránky denně generují obrat 25000 Kč,- tak zrychlení o jednu vteřinu může přinést denní zvýšení obratu o 1750 Kč.
Jak tedy k zrychlení webu přistoupit?
Proces zrychlení webu
Počáteční měření webu
Zbavení se pomalých částí
Snaha o zrychlení
Kontrola a opětovné měření
I když nás může lákat vrhnout se zrovna na zrychlování, stojí za to nejprve web dobře změřit, což nám často poskytne i dobrou předtavu o tom, kde je největší prostor pro zlepšení. V dalším kroku se pak rád zbyvuji všeho co není na webu nutné, protože už to samo o sobě může vést k citelnému zrychlení. Následně přidám věci, které by mohli web zrychlit, a nakonec stojí za to vše otestovat ještě jednou, jestli jsme naší snahou web zrychlit zároveň i nerozbili.
Počáteční měření webu
Abychom věděli, kam se vydat, potřebujeme nejprve vědět, kde se nacházíme. Při měření webu postupuji většinou tak, že si vytvořím tabulku, kam si zapíši vyslédky testu Google Speed Insight a WebPage testu.Stránky testuji několikrát a v případě Google Speed Insights provádím testy jak pro telefon tak pro počítač zvlášť. Dobrý nápad je také přidat si odkaz stránek na stránkách Pagespeed, které budou rychlost stránek měřit průběžně.
Jestli jste technicky zdatnější můžete si také z této fáze vzít řadu nápověd, ohledně toho, co bude potřeba zlepšit a opravit.
Zbavení se pomalých částí
Říci co nefunguje, je mnohem snažší, než uhádnout, co fungovat bude.
Zbavit se věcí, které web spomalují (a nepřináší) žádnou přidanou hodnotuje základem úspěchu.
Níže uvadím příklad 7 věcí, které přesně toto ilustrují.
Odstraňte nepoužívané šablony- Odstraňte pluginy, které jdou nahradit přímo bloky Elementoru
Odstraňtě nepoužívané pluginy- Odstraňte duplicitní pluginy
Zakažte načítání nepoužívaných Google fontů- Videa namísto ze stránek načítejte z Youtube nebo Vimea
Namísto připravených šablon si stejnou šablonu vytvořte ručně
V případě, že chcete poradit, jak něco z výše zmíněného udělat, napište komentář, nebo se zeptejte na Discordu.
Snaha o zrychlení
Optimalizace hostingu
Na toto téma je řada lepších odborníků než já. Základem však je:
- Hosting, který má verzi PHP verzi 7+
- Hosting, který umožňuje cachování i na úrovni serveru.
Osobně používám SiteGround, ale v České republice je dobrou volbou například WPHosting nebo Váš hosting.
Tipy pro případ, že je Váš web hostován na SiteGroundu
Siteground nabízí svým uživatelům tři možnosti, jak mohou pomocí hostingu web zrychlit, a pokud SiteGround používáte, stojí za to tyto možnosti využít.
- Pokud nepoužívate žádný jiný cachovací plugin, můžete využít plug SG Optimizer, který by dle SiteGroundu měl umožnit naplno vytěžit potenciál SiteGround serverů.
- Můžete zapnout takzvanou možnost memcached, což cachovací systém, který zrychlí stránky pomocí cachování výsledků požadavků databaze na RAM serveru. Jestli z tohoto popisu nejste příliš moudří, tak nezoufejte, uživatelsky bude plně dostačující, když tuto možnost povolíte v nabídce: Site Tools > Speed > Caching, kde můžete zapnout tlačítko Memcached.
- V nabídce Site Tools > Devs > PHP Manager pak můžete použít nabídku Ultrafast PHP, což Vám umožní zrychlit stránky ještě více.
Výběr správné šablony
Špatně zvolená šablona Vám může zrychlení webu znemožnit i kdyby jste se stavili na hlavu. Osobně používám šablonu Hello Elementor!, která má i Child theme, kterou naleznete zde na Githubu.
Pro weby, kde Elementor použit není pak používám šablonu Astra, která má taky jednoduše dostupnou child theme.
Velkou chválu jsme slyšel také na šablonu OceanWP, nicméně osobní zkušenosti s ní nemám.
Povolte caching
Stránky na WordPressu jsou ze své podstaty „dynamické“. To znamená, že pokaždé když si stránky někdo zobrazí, stránka se „poskládá“ z různých částí tak, aby celek vypadal dobře. Jakmile si tedy někdo otevře Vaši stránku, Wordpress započne proces skládání stránky tak, aby ji mohl návštěvníku ukázat.
Jestli na stránkách nemáte žádný dynamický content jako například formulář, vyhledávání apod. můžete stránky převést na html verzi, které jsou z podstaty statické.
Jestli ale dynamický obsah používáte a potřebujete, tak se o cachování budete muset postarat sami, čehož ve WordPressu docílíte nejsnáze pomocí pluginu.
Cachovací plugin vytvoří časově omezenou statickou kopii stránek při Vaší první návštěvě, a následně tuto kopii posílá i dalším uživatelům. Díky tomu nemusí WordPress stránky „skládat“ každému návštěvníkovi odznovu a od nuly, což celý proces rapidně zrychluje.
Jaký cachovací plugin použít?
Z pluginů zdarma se mi dobře pracovalo s WPOptimize pluginem, který i dobře dopadl v mých testech rychlosti. Uživatelsky jednoduchý je SiteGround Speed Optimizer a dobrou alternativou zdarma, která je trochu těžší nastavit pak je WP Super Cache.
Na svých webech pak využívám WP Rocket, s kterým jsem maximálně spokojen, nicméně tento plugin není zdarma a stojí asi 5000,- Kč tisíc na rok. Jeho recenzi v češtině můžete najít na stránkách WPLama.
Optimalizace obrázků
Obrázky na vašich stránkách zabírají s velkou pravděpodobností nejvíce místa a díky tomu jsou i nejčastějším důvodem, proč jsou stránky tak pomalé.
Otázkou je, jak jejich velikost zmenšit a tím výrazně rychlosti Vašich stránek prospět.
Zde můžete na toto téma najít skvělý článek od Adama Laity. V podstatě ale můžete obrázky zmenšit ještě před tím, než je na web nahrajete (například pomocí programu IrfanView), následně na webu pomocí pluginu, jako je například TinyPNG, a pokud budete chtít mít obrázky maximalizované opravdu na maximum, můžete zvážit také cloudové řešení, jakým je například Cloudinary, nebo můžete využít content delivery network tzv. CDN.
Zvažte využití CDN
CDN stands for content delivery network, and this service basically keeps a copy of your website across different word location. Because the traffic is geologically splitted, the site is much faster. You can use CloudFare free version to experiment with that, which is sufficiently good for most of the websites (there’s pro version as well).
Content delivery network dělá ve zkratce to, že udržuje kopii Vašich stránek na různých místech na světě. Když se pak snaží na Vaší stránku někdo přijít CDN mu zobrazí stránku, která je momentálně nejblíže jeho aktuální poloze, díky čemuž je toto zobrazení o mnoho rychlejší.
Cloudflare CDN můžete na svých stránkách využít dokonce zdarma (pokud nepřesáhnete kvóty návštěvnosti).
Z placených CDN pak optikou poměř cena/výkon vypadá velice zajímavě Bunny CDN.
Minifikace kódu
Elementor je známý tím, že kód, který produkuje není zrovna nejčistší. Stačí stisknout kombinaci kláves Ctrl + Shift + I a můžete se přesvědčit na vlastní oči. Zbytečná komplikovanost kódu je i důvodem, proč někteří zkušenější lidé dávají například přednost Oxygen builderu.
Jestli jste však jako já a máte rádi Elementor pro jeho široké možnosti a ohebnost je dobrým nápadem kód na stránkách tzv. zminifikovat.
Pluginy, které provádí minifikaci CSS a JavaScript kódu dělají, dle toho, jak tomu rozumím, především to, že se v kódu zbavují mezer, odstraňují nepotřebné znaky, nebo provádí jakousi konsolidaci v rámci, které zkombinují více souborů do souboru jednoho.
Osobně k tomuto účelu používám již zmiňovaný plugin WPRocket, přičemž plugin WPOptimize, se mi osvědčil jako dobrá alternativa zdarma. Nicméně je důležité říct, že jsem příliš pluginů nevyzkoušel, a dost možná stojí za to, zaexperimentovat s více řešeními.
Povolení GZip komprese
GZip je další formou komprese dat. Originální data se vezmou a zkomprimují, díky čemuž dosáhneme menší velikosti konečného souboru. Originální data pak dostane uživatel tak, že si soubor opět „odzippuje“. HTTP protokol tuto formu komprese podporuje, takže jde o dobrou možnost, jak zrychlit Vaše stránky tím, že umožníte návštěvníkům stahovat soubory o menší velikosti.
Jak povolit GZip kompresi na Vašem Elementor webu?
První možností je přidat níže přiložený kód do Vašeho souboru .htaccess ve File Manageru.
Jestli si editací htaccessu nevíte rady, zanechte komentář pod článkem a mohu Vám natočit krátké video, jak to udělat (opravdu nejde o nic složitého). Nicméně Gzip kompresi Vám umožní zapnout i některé pluginy jako například WP Super Cache.
Omezení počtu revizí
WordPress v základu ukládá velké množství revizí příspěvků a stránek. To Vám jednak zabírá místo, a navíc to ani není příliš užitečné z praktického hlediska.
Proto je dobrým nápadem (opět ve File manageru) přidat níže přiložený kus kódu do složky wp-confing.php.
Zakázaní hotlinků
Pokud nemáte zakázané tzv. hotlinkování, tak umožňujete ostatním stránkám, aby používali obrázky z Vašich stránek tak, že na ně odkazují, takže i když se Vám obrázky na stránkách zobrazují, ve skutečnosti se načítají přímo z Vašich stránek (což vede přirozeně ke spomalení).
Hotlinkování můžete jednoduše zakázat tím, že opět přidáte do htaccessu níže přiložený kus kódu.
Kontrola a opětovné měření
I když nás může lákat vrhnout se zrovna na zrychlování, stojí za to nejprve web dobře změřit, což nám často poskytne i dobrou předtavu o tom, kde je největší prostor pro zlepšení. V dalším kroku se pak rád zbyvuji všeho co není na webu nutné, protože už to samo o sobě může vést k citelnému zrychlení. Následně přidám věci, které by mohli web zrychlit, a nakonec stojí za to vše otestovat ještě jednou, jestli jsme naší snahou web zrychlit zároveň i nerozbili.Motivační obrázek, který je rozhodně dobré mít na paměti.
Závěr
Optimalizovat web se vyplatí ve všech směrech. Občas to může být trochu složité, ale dejte tomu čas a uvidíte, že to přinese ovoce.
Pokud byste chtěli s optimalizací pomoci, neváhejte mě kontaktovat nebo se přijďte poradit na náš Discord.
