Elementor je dobrý. Umožňuje rýchlo, pekne vytvoriť stránky a plne ich prispôsobiť vlastným potrebám bez toho, aby ste museli vedieť písať kód.
Kód, ktorý generuje Elementor, však nie je najčistejší. Často je (zbytočne) zložitý, nie je veľmi prehľadný a je viac slovný ako kód, ktorý by napísal človek.
Všetko toto môže mať výrazný a negatívny vplyv na rýchlosť webu.
Nemusíte mi veriť, pokojne vložte svoju stránku Elementor do sledovania rýchlosti Google a presvedčte sa sami.
Čo s tým môžeme urobiť?
Aj keď s Elementorom pravdepodobne nikdy nedosiahneme rýchlosť 100/100, verím, že implementácia nižšie uvedených tipov zrýchli vašu stránku aspoň o 25 %, najmä ak ste svoju stránku nikdy predtým neoptimalizovali.
Prečo je rýchlosť vôbec taká dôležitá?
Ľudia sú netrpezliví. Neradi čakajú a pomalé stránky môžu sťažovať tesný súboj o našu pozornosť. Tieto “intuitívne” dôvody však zďaleka nie sú jediné. Už 11 rokov považuje spoločnosť Google rýchlosť za jeden z dôležitých ukazovateľov na určenie pozície stránky vo vyhľadávači a v roku 2018 pridal rýchlosti ešte väčšiu váhu a začal ju merať aj na mobilných telefónoch. okrem uspokojenia boha spoločnosti Google má rýchlosť aj významné obchodné dôsledky. Podľa údajov od Small SEO Tools a Strangeloop znížilo 1-sekundové oneskorenie pri načítaní konverziu o 7 %. Inými slovami, podľa týchto údajov, ak vaša stránka generuje denný obrat 25 000 Kč,-, potom jednosekundové zrýchlenie môže viesť k dennému zvýšeniu obratu o 1750 Kč.
Ako teda postupovať pri zrýchľovaní svojej stránky?
Proces zrýchľovania webu
Iniciálne meranie stránky
Zbavenie sa pomalých častí
Zameranie na rýchlosť
Kontrola a premeranie
Akkoľvek môžeme byť v pokušení vrhnúť sa len na zrýchlenie, oplatí sa najprv dobre zmerať stránku, čo nám často poskytne dobrú predstavu o tom, kde je najväčší priestor na zlepšenie. V ďalšom kroku sa potom rád zbavím všetkého, čo na stránke nie je potrebné, pretože už len to môže viesť k znateľnému zrýchleniu. Potom pridávam veci, ktoré by mohli web zrýchliť, a nakoniec sa oplatí všetko znova otestovať, aby sme zistili, či sme svojou snahou o zrýchlenie webu zároveň nenarušili jeho chod.
Počiatočné merania stránky
Aby sme vedeli, kam máme ísť, musíme najprv vedieť, kde sa nachádzame. Pri meraní webu to zvyčajne robím tak, že si vytvorím tabuľku, do ktorej zapíšem výsledky testu Google Speed Insight a testu webových stránok.Stránky testujem viackrát a v prípade Google Speed Insights robím samostatne testy pre telefón aj pre počítač. Je tiež dobré pridať odkaz na stránku na Pagespeed, aby sa rýchlosť stránky merala priebežne.
Ak ste technicky zdatnejší, môžete si z tejto fázy vziať aj niekoľko tipov, čo bude potrebné zlepšiť a opraviť.
Zbavenie sa pomalých častí
Povedať, čo nefunguje, je oveľa jednoduchšie ako hádať, čo bude fungovať.
Zbavenie sa vecí, ktoré spomaľujú stránku (a nepridávajú žiadnu hodnotu), je základom úspechu.
Nižšie uvádzam príklad 7 vecí, ktoré presne toto ilustrujú.
Odstrániť nepoužívané šablóny- Odstrániť zásuvné moduly, ktoré možno nahradiť priamo blokmi Elementor
Odstrániť nepoužívané pluginy- Odstrániť duplicitné pluginy
Zakázať načítanie nepoužívaných písiem Google- Načítanie videí z YouTube alebo Vimeo namiesto z webu
Miesto hotových šablón vytvorte rovnakú šablónu ručne
Ak chcete poradiť, ako urobiť niečo z vyššie uvedeného, napíšte komentár alebo sa opýtajte na Discord.
Zameranie na rýchlosť
Optimalizácia umiestnenia
Na túto tému je mnoho lepších odborníkov ako ja. Podstata však je:
- Hosting, ktorý má PHP verzie 7+
- Hosting, ktorý umožňuje ukladanie do vyrovnávacej pamäte aj na úrovni servera
Osobne používam SiteGround, ale v Českej republike je dobrou voľbou WPHosting alebo Váš hosting.
Tipy pre prípad, že je vaša stránka hostovaná na SiteGround
Siteground ponúka svojim používateľom tri spôsoby, ako zrýchliť svoju stránku pomocou hostingu, a ak používate SiteGround, oplatí sa tieto možnosti využiť.
- Ak nepoužívate žiadny iný doplnok cachovania, môžete použiť doplnok SG Optimizer, ktorý by vám podľa spoločnosti SiteGround mal umožniť využiť plný potenciál serverov SiteGround.
- Môžete zapnúť tzv. možnosť memcached, čo je systém ukladania do vyrovnávacej pamäte, ktorý urýchľuje stránku ukladaním výsledkov požiadaviek na databázu do vyrovnávacej pamäte RAM servera. Ak z tohto popisu nie ste príliš múdri, nezúfajte, používateľsky bude plne postačovať zapnutie tejto možnosti v ponuke Nástroje stránky > Rýchlosť > Caching, kde môžete zapnúť tlačidlo Memcached.
- V ponuke Nástroje stránky > Devs > PHP Manager potom môžete použiť ponuku Ultrafast PHP, ktorá vám umožní ešte viac zrýchliť vašu stránku.
Výber správnej šablóny
Zle nastavená šablóna môže znemožniť zrýchlenie vašej stránky, aj keby ste sa na hlavu postavili. Osobne používam šablónu Hello Elementor!, ktorá má aj detskú tému, ktorú nájdete tu na Githube.
Pre stránky, kde sa nepoužíva Elementor, potom používam šablónu Astra, ktorá má aj ľahko dostupnú detskú tému.
Veľkú chválu sme počuli aj na šablónu OceanWP, ale osobnú skúsenosť s ňou nemám.
Zapnúť ukladanie do vyrovnávacej pamäte
Stránky WordPressu sú vo svojej podstate “dynamické”. To znamená, že zakaždým, keď si niekto stránku zobrazí, je stránka “poskladaná” z rôznych častí tak, aby celok vyzeral dobre. Takže hneď ako niekto otvorí vašu stránku, Wordpress začne proces skladania stránky tak, aby sa mohla návštevníkovi zobraziť.
Ak na stránke nemáte žiadny dynamický obsah, ako napríklad formulár, vyhľadávanie atď. môžete stránky previesť na html verzie, ktoré sú vo svojej podstate statické.
Ak však používate a potrebujete dynamický obsah, budete sa musieť sami postarať o ukladanie do vyrovnávacej pamäte, čo sa vo WordPress najjednoduchšie vykonáva pomocou doplnku.
Zásuvný modul cachovania vytvorí pri prvej návšteve časovo obmedzenú statickú kópiu stránky a potom ju odošle ďalším používateľom. To znamená, že WordPress nemusí pre každého návštevníka “prestavovať” stránku od začiatku, čo výrazne urýchľuje tento proces.
Aký zásuvný modul vyrovnávacej pamäte použiť?
Z bezplatných pluginov sa mi osvedčil plugin WPOptimize, ktorý sa dobre osvedčil aj v mojich testoch rýchlosti. Užívateľsky prívetivý je SiteGround Speed Optimizer a dobrou bezplatnou alternatívou, ktorá sa potom trochu ťažšie nastavuje, je WP Super Cache.
Na svojich stránkach potom používam WP Rocket, s ktorým som mimoriadne spokojný, avšak tento plugin nie je zadarmo a stojí približne 5000,- Kč tisíc ročne. Jeho recenziu v angličtine nájdete na WPLama.
Optimalizácia obrázkov
Obrázky zaberajú na vašej stránke s najväčšou pravdepodobnosťou najviac miesta, a preto sú najčastejším dôvodom, prečo sú stránky také pomalé.
Otázka znie, ako zmenšiť ich veľkosť a tým výrazne prospieť rýchlosti vašich stránok.
Na túto tému nájdete skvelý článok od Adam Laity. V zásade však môžete obrázky zmenšiť pred ich odoslaním na web (napríklad pomocou programu IrfanView), potom môžete na webe použiť zásuvný modul, ako je napríklad TinyPNG, a ak chcete svoje obrázky naozaj maximalizovať, môžete zvážiť aj cloudové riešenie, ako je Cloudinary, alebo môžete použiť sieť na doručovanie obsahu nazývanú CDN.
Zvážte použitie siete CDN
CDN je skratka pre content delivery network (sieť na doručovanie obsahu) a táto služba v podstate uchováva kópiu vašej webovej stránky na rôznych miestach slova. Keďže prevádzka je geograficky rozdelená, stránka je oveľa rýchlejšia. Na experimentovanie môžete použiť bezplatnú verziu CloudFare, ktorá je dostatočne dobrá pre väčšinu webových stránok (existuje aj profesionálna verzia).
Content delivery network robí v skratke to, že uchováva kópiu vášho webu na rôznych miestach na svete. Potom, keď sa niekto pokúsi prísť na vašu stránku, sieť CDN mu zobrazí stránku, ktorá je aktuálne najbližšie k jeho aktuálnej polohe, vďaka čomu je toto zobrazenie oveľa rýchlejšie.
Cloudflare CDN môžete na svojej stránke používať dokonca zadarmo (pokiaľ neprekročíte kvótu návštevnosti).
Z platených CDN potom Bunny CDN vyzerá veľmi zaujímavo z hľadiska pomeru cena/výkon.
Minifikácia kódu
Elementor je známy tým, že kód, ktorý vytvára, nie je najčistejší. Stačí stlačiť kombináciu kláves Ctrl + Shift + I a môžete sa o tom presvedčiť sami. Zbytočná zložitosť kódu je jedným z dôvodov, prečo niektorí skúsenejší ľudia dávajú prednosť napríklad builderu Oxygen.
Ak ste však ako ja a máte radi Elementor pre jeho široké možnosti a flexibilitu, je dobré kód na stránke minimalizovať.
Pluginy, ktoré minifikujú kód CSS a JavaScript, sa, ako som pochopil, zbavujú najmä medzier v kóde, odstraňujú nepotrebné znaky alebo vykonávajú akúsi konsolidáciu v rámci, ktorá spája viacero súborov do jedného súboru.
Osobne na tento účel používam vyššie uvedený doplnok WPRocket, zatiaľ čo doplnok WPOptimize, sa osvedčil ako dobrá bezplatná alternatíva. Je však dôležité povedať, že som nevyskúšal príliš veľa pluginov a možno by stálo za to experimentovať s viacerými riešeniami.
Zapnutie kompresie GZip
GZip je ďalšia forma kompresie dát. Pôvodné údaje sa vezmú a komprimujú, čím sa dosiahne menšia konečná veľkosť súboru. Používateľ potom získa pôvodné údaje opätovným “rozbalením” súboru. Protokol HTTP podporuje túto formu kompresie, takže je to dobrý spôsob, ako zrýchliť vašu lokalitu tým, že umožníte návštevníkom sťahovať menšie súbory.
Ako povoliť kompresiu GZip na vašej stránke Elementor
Prvá možnosť je pridať nižšie priložený kód do súboru .htaccess v Správcovi súborov.
Ak neviete, ako upraviť htaccess, zanechajte komentár nižšie a ja môžem urobiť krátke video, ako to urobiť (naozaj to nie je také zložité). Kompresiu Gzip vám však umožnia aj niektoré pluginy, napríklad WP Super Cache.
Obmedzenie počtu revízií
WordPress štandardne ukladá veľký počet revízií príspevkov a stránok. To jednak zaberá miesto a jednak to nie je veľmi užitočné z praktického hľadiska.
Preto je dobré (opäť v Správcovi súborov) pridať nižšie priložený kus kódu do priečinka wp-confing.php.
Zakázanie horúcich odkazov
Ak nezakážete horúce odkazy, umožňujete iným stránkam používať obrázky z vašej stránky tak, že na ne odkazujú, takže aj keď sa obrázky zobrazujú na vašej stránke, v skutočnosti sa načítavajú priamo z vašej stránky (čo prirodzene vedie k spomaleniu).
Prepojenie môžete jednoducho zakázať tak, že do htaccess opäť pridáte nižšie priložený kus kódu.
Kontrola a premeranie
Akkoľvek môžeme byť v pokušení vrhnúť sa hneď do zrýchľovania, oplatí sa najprv dobre zmerať stránku, čo nám často poskytne dobrú predstavu o tom, kde je najväčší priestor na zlepšenie. V ďalšom kroku sa potom rád zbavím všetkého, čo na stránke nie je potrebné, pretože už len to môže viesť k výraznému zrýchleniu. Potom pridávam veci, ktoré by mohli web zrýchliť, a nakoniec sa oplatí všetko znova otestovať, aby sme zistili, či sme svojou snahou o zrýchlenie webu zároveň nenarušili jeho chod. motivačný obrázok, ktorý je určite dobré mať na pamäti.
Titulok
Optimalizácia webu sa oplatí v každom smere. Niekedy to môže byť trochu zložité, ale dajte tomu čas a uvidíte, že to prinesie ovocie.
Elementor je len taký dobrý, ako ho optimalizujete. Funguje, ale nie hneď.
Ak by ste chceli pomôcť s optimalizáciou, neváhajte a kontaktujte ma alebo si príďte po radu na náš Diskurz.