WP Rocket: tutoriál pro optimalizaci rychlosti webu

Co je WP Rocket?

WP Rocket je plugin, který se zrodil jako řešení pro různé optimalizace cache ve WordPressu. Dnes je toho mnohem více a můžeme optimalizovat nejen cache, ale prakticky vše, co souvisí s optimalizací výkonu načítání webu.

Pro demonstraci dopadu se podívejte na výkon našeho vlastního webu S a BEZ WP Rocketu:

Proč použít WP Rocket?

Ačkoli jsme řekli, že existují další alternativy pro WPO optimalizaci, a každý je svobodný použít, kterou uzná za vhodnou, v našem případě máme zvláštní preferenci pro WP Rocket. Jeho intuitivní rozhraní, které funguje kliknutím na zaškrtávací políčko, mnoho možností, které nabízí pro konfiguraci cache a načítání zdrojů, dělají z WP Rocket naši favoritku ze všech možností.

Hlavní menu WP Rocketu

S předpokladem, že jsme s instalací WP Rocketu neměli žádné potíže, začněme vysvětlovat jeho rozhraní a různé dostupné možnosti optimalizace. Po kliknutí na záložku dashboardu se objeví následující obrazovka:

Uvítací zpráva a možnosti, které zpočátku můžeme nechat na pokoji, ale které zde vysvětlíme.

My Account

Pokud jste si zakoupili WP Rocket, pole „View my account" vás zavede na stránku uživatelů WP Rocket, abyste tam mohli vyplnit a zkontrolovat vše, co souvisí s vaším uživatelským profilem: data, fakturace atd.

RocketCDN

RocketCDN je CDN služba, kterou WP Rocket nabízí relativně nedávno. Cílem je poskytnout nezbytné nástroje pro dosažení nejlepšího výkonu, aniž byste museli hledat řešení mimo plugin. Existují další velmi populární a stejně účinné CDN služby jako Cloudflare nebo Amazon CloudFront.

My Status

V rámci této volby máme dva přepínače k povolení:

• ›

  Rocket Tester: to je program vylepšení WP Rocket pro testování BETA verzí. Musíte je kontaktovat e-mailem.

• ›

  Rocket Analytics: souhlasíte s anonymním sdílením dat o výkonu WordPressu s vývojovým týmem, abyste pomohli zlepšit WP Rocket.

Tady je málo co říct, jde o osobní rozhodnutí, které by nemělo ovlivnit výkon.

Konfigurace cache ve WP Rocketu

Je čas pustit se do konfiguračních možností a začneme cachem:

Na druhé záložce pluginu vidíme, jaké možnosti cache nám nabízí. Pamatujme, že ve WP Rocketu optimalizujeme cache stránky a, jak nyní uvidíme, máme také volbu pro přihlášené uživatele, ale s touto volbou musíme být opatrní.

Mobilní cache

Obvykle, když mluvíme o mobilu, zahrnujeme i tablety, ale tentokrát mluvíme pouze o mobilních zařízeních. WP Rocket prostřednictvím user agentu detekuje, že prohlížíme ze smartphonů.

Tuto volbu vždy povolíme, protože obecně platí, že desktopové a mobilní designy jsou různé, pokud nemáme responzivní verzi, tato volba bude vždy povolena. Aby bylo jasné, proč bychom chtěli, abychom dostali 2 cachované verze, pokud by design byl stejný? Jinými slovy, kdybychom neměli mobilní verzi, nechtěli bychom, aby tato cache byla zacházena odlišně, že?

Tady se přidává výjimka. Když máme mobilní verzi se zdroji nebo prvky, které se načítají pouze v této verzi, uložíme soubory zvlášť.

Příklad:

• ›Máme reklamu, která na mobilu načítá JS, který desktopová verze nemá.

V tomto případě bychom skutečně uložili oddělené soubory pro mobil.

User Cache

User Cache je možnost, kterou WP Rocket poskytuje pro ty uživatele, kteří prohlíží přihlášení.

Aktivací této volby můžeme nabídnout individualizovanou cache verzi pro každého uživatele. Nejlepší je ji povolit, pokud se uživatelé přihlašují, ale musíte být obzvláště opatrní, které stránky jsou cachovány a které ne, protože pokud uživatel zadá osobní data (například bankovní informace), jejich uložení v cache by nám mohlo způsobit právní problémy.

Jak vyloučit stránku z cachování?

Pokud se chcete vyhnout problémům tohoto typu, nejlepší je jít přímo na stránku, kterou chcete vyloučit, a v možnostech WP Rocket (boční panel nebo dolní) vybrat „never cache this page".

Doba platnosti cache

V této sekci stačí uvést dobu, kterou chceme pro generované cache soubory. To znamená, WP Rocket generuje soubor uchovávající verzi vaší stránky, a tento soubor bude doručen uživateli při přístupu na web.

Prostřednictvím správce procesů (CRON) budou soubory generované překračující uvedenou dobu mazány a budou vytvořeny nové.

Co mít na paměti

WP Rocket už zohledňuje určité procesy pro mazání a generování nových cache souborů, které jsou následující:

• ›

  Generování nových příspěvků, stránek, kategorií, taxonomií nebo úprav.

• ›

  Generování a editace nových modulů, widgetů nebo jakéhokoli prvku webu.

• ›

  Když se mění konfigurace WP Rocketu, které ovlivňují frontend.

Jinak musíte mít na paměti, že ukládání cache souborů zabírá místo na serveru a toto místo je omezené. Také je doporučeno cache z WP Rocketu vymazat, aby se aktualizoval a nezůstaly soubory, které už nejsou potřeba.

Co se týče času, můžete nechat výchozí hodnotu.

Optimalizace souborů ve WP Rocketu

Po krátkém přezkoumání konfigurace cache je čas pracovat na optimalizaci souborů. Optimalizace souborů se dělá k odlehčení načítání a renderování HTML. Jak na této optimalizaci pracovat?

Několika způsoby:

• ›

  Snížením váhy souboru.

• ›

  Odstraněním nepotřebných souborů a

• ›

  Postupným prováděním souborů, jak jsou potřeba.

CSS soubory

CSS soubory jsou zodpovědné za vizuální část webu. Stylové listy, které dávají tvar, barvu a styl WordPressu. V tomto aspektu může být atraktivní design neoptimalizovaným designem, protože designér při tvorbě CSS nemusel dodržovat řadu základních pravidel optimalizace.

Mezi nejčastější problémy, na které obvykle narazíme u stylových listů:

• ›

  Těžké CSS soubory.

• ›

  CSS soubory, které se načítají na stránkách, které tyto styly nepoužívají.

• ›

  Špatně postavené CSS soubory.

• ›

  Načítání příliš mnoha externích CSS.

• ›

  Použití @import k načtení externích stylových listů.

Stručně řečeno, existuje svět praktik, které se často používají a nejsou doporučené pro optimalizaci dobrého designu, ale pojďme k tomu, co nám nabízí WP Rocket.

Minify CSS soubory

Tato možnost má za cíl snížit váhu CSS souborů odstraněním mezer a zalomení řádků. WP Rocket ji implementuje aktivací zaškrtávacího políčka.

Tip SEOcrawl: Kdykoli provedeme akci, je dobré zkusit načíst web a zkontrolovat, zda je vše v pořádku, dělejte to v anonymním režimu prohlížeče.

Proces je znázorněn na následujícím obrázku z nástroje minifier.org.

Combine CSS soubory

Tato funkce provádí druh „kopírování a vkládání" kódu z jednoho CSS do jiného, abychom se vyhnuli načítání více CSS souborů a měli jen jeden.

Doporučujeme stále testovat, protože hodně závisí na tom, jak byla šablona vyvinuta, protože pokud mám CSS soubor, který se načítá pouze na konkrétním typu stránky, nechci, aby se tento kód načítal do jediného souboru na všech stránkách.

Ideální je načítat kód používaný URL. Zaškrtněte políčko a otestujte s nějakým nástrojem jako GTMETRIX, abyste viděli, zda jste zlepšili rychlost načítání.

Výhodou kombinování CSS souborů je snížení požadavků na server.

Optimalizace načítání CSS

WP Rocket byl aktualizován s ohledem na doporučení poskytovaná různými nástroji Googlu pro optimalizaci rychlosti načítání. Pokud už máme zkušenosti s těmito nástroji, určitě jsme narazili na varování „Eliminate render-blocking resources". Aktivací tohoto checku zabráníme CSS blokovat načítání tím, že ho necháme načíst asynchronně.

To znamená, že renderování HTML se nezastaví, když musí stáhnout CSS soubor; tento soubor se načte na pozadí, čímž se zabrání zastavení procesu načítání. Takže stojí za to ho povolit.

JS soubory (JavaScript)

JavaScript byl jedním z velkých problémů, na které Google narazil při zpracování HTML. Bez příliš hlubokého pohledu do tohoto typu jazyka WP Rocket navrhl 5 základních akcí pro optimalizaci tohoto typu souboru. Pojďme se na to podívat!

Odstranit jQuery Migrate

jQuery Migrate je JavaScriptová knihovna, která umožňuje kompatibilitu s jQuery kódem vyvinutým pro verze jQuery starší než 1.9. Tato knihovna přichází nativně ve WordPressu, ale prakticky se nepoužívá (některé pluginy ji mohou potřebovat).

Touto akcí chceme zabránit zbytečnému požadavku a načítání JS, který se nepoužije. Deaktivujte ji a projděte své weby, abyste viděli, zda vše funguje správně!

Minify JavaScript soubory

Stejně jako bylo vysvětleno u CSS souborů, tato akce by se aplikovala na JS soubory, mírně snižující velikost JS souborů.

Combine JavaScript soubory

Další akce podobná modulu optimalizace CSS. Pamatujte, že když aktivujeme tato zaškrtávací políčka, musíme ověřit, zda vše funguje jako dříve.

Načíst JavaScript soubory odložené

Zaškrtnutí této akce přináší dvě vylepšení výkonu:

• ›

  Přidává atribut „defer" k JS, aby se zabránilo zastavení renderování HTML kvůli načítání JS. Touto akcí stahuje paralelně a spouští se na konci zpracování HTML.

• ›

  Posouvá JS, který blokuje počáteční renderování.

WP Rocket nás varuje, že tento typ aktivace může způsobit problémy, proto zavádí bezpečný režim, aby se vyhnul problémům s načítáním nezbytných prvků pro správné zobrazení stránky.

Zpoždění provedení JavaScriptu

Další možnost, jak zpozdit provedení JavaScriptu, který není nezbytný, dokud uživatel s stránkou neinteraguje. Tato akce nepůsobí příliš důležitě, ale umožňuje nám získat čas pro rychlejší načítání. Interakce může být kliknutí, scroll, pohyb myši…

Optimalizace médií

V této záložce se podíváme na optimalizaci klíčových prvků v prvních krocích WPO optimalizace. Mluvíme o obrázcích, videích, iframech a prvcích zabudovaných ve WordPressu, jejichž funkčnost je přinejmenším diskutabilní.

Lazyload

Nezbytná akce v jakékoli optimalizaci rychlosti načítání. Funkce Lazyload způsobí, že se prvky jako obrázky, videa a iframy nenačítají, dokud nejsou nezbytné pro zobrazení.

Dám vám příklad. Jak scrollujeme, načítají se obrázky. Představte si, jaké by bylo načítání této stránky, kdyby se 30 obrázků načetlo najednou, zejména pokud je uživatel ani zpočátku neprohlíží.

Emoji

Prohlížeče už zahrnují vlastní emoji, takže můžeme ušetřit ten požadavek, který se dělá, pokud tento check neaktivujeme. Moje doporučení je, abyste ho aktivovali.

Vložený obsah

Brání jiným lidem vkládat obsah z vašeho webu a také zabraňuje vám vkládat obsah z jiných neautorizovaných webů. Snižují se tím požadavky vytvořené tímto JS.

Kompatibilita WebP

WebP je relativně nový formát, který Google představil kolem roku 2010, pro ztrátovou kompresi 24bitové grafiky na webu, zlepšující poskytování těchto zdrojů pro urychlení jejich načítání.

V současnosti ho nepodporují všechny prohlížeče, takže budete muset být opatrní a vědět, který prohlížeč používají vaši uživatelé při práci s tímto formátem. Aktivujte tuto možnost, pokud pracujete s WebP obrázky.

Konfigurace předběžného načítání cache

Musíme dobře pochopit, jak se generují cache soubory WP Rocketu, abychom pochopili funkci Preload.

Když uživatel poprvé navštíví stránku našeho webu, tehdy se stránka cachuje a generuje se cachovaný soubor, který bude doručen následným uživatelům. To samé se stane, když cache vyprší (čas, který jsme určili) a cachovaná verze se eliminuje, nebo když sami vymažeme cache všech našich URL.

Preload Cache

Aktivací volby Preload uděláme to, že načteme předem cachovanou verzi, takže i první uživatel má rychlejší verzi našeho webu. Tato akce se provádí prostřednictvím odkazů sitemap, takže budeme potřebovat sitemap.

Sitemap je generovaný soubor, kde jsou zobrazeny URL našeho webu. S pluginy jako „Rank Math" nebo „Yoast" ji můžeme snadno vygenerovat. Pokud chcete vidět, jak vytvořit sitemap s Rank Math, tady vám to ukazujeme.

Preload Links

Toto je funkce, kterou WP Rocket začlenil ve svých nejnovějších verzích. Cílem je předjímat načítání „dalších stránek, které uživatel navštíví". Při najetí kurzorem se stránka předem načte v případě, že uživatel klikne na odkaz.

WP Rocket převzal tuto funkci, kterou už implementovaly specifické pluginy jako „Flying Pages" k vylepšení plynulosti navigace v rámci webu (uživatelská zkušenost). Avšak toto není faktor, který by zlepšil čas načítání, a vylepšení neuvidíte v metrikách auditovacích nástrojů WPO.

Předběžné načítání DNS požadavků

Předběžné načítání DNS požadavků se hodí, když používáme zdroje třetích stran jako YouTube, Facebook, fonty nebo iframy, které často požadujeme.

Když děláme jakékoli připojení na internetu, dělá se DNS požadavek, který musí být vyřešen a poslán na server. Toto má trvání, které můžeme zlepšit, pokud přidáme URL nezbytných zdrojů do tohoto pole, které nám WP Rocket poskytuje.

Jak vidíme v příkladu, je nutné použít pouze název domény //youtube.com //facebook.com

DNS resoluce trvá přibližně 20 až 120 milisekund, jak GTMETRIX uvádí, prohlížeč nestáhne nic od hostitele, dokud tento proces nebude dokončen.

Preload Fonts

Předběžné načítání fontů vyžaduje předchozí krok, kterým je stažení fontů a jejich umístění na našem serveru. Jakmile tam jsou, můžeme udělat tu samou akci, jakou jsme udělali s preload cache, vytvořit mnohem rychlejší verzi souboru fontu a poskytnout ji uživateli při připojení k naší stránce.

Jakmile jsou fonty hostovány, oznámíme WP Rocketu přesnou cestu používaných fontů. Doporučujeme nezneužívat různé fonty na našich stránkách, protože vyžadují různá stahování. Také si všimněte, že požadavky na server se dělají s různými variantami fontu, vysvětluji:

• ›

  Tučný font --> 1 požadavek

• ›

  Podtržený font --> 1 požadavek

• ›

  Velká písmena fontu --> 1 požadavek

Konfigurace pokročilých pravidel WP Rocketu

Nikdy necachovat tyto URL

Existují určité URL, u kterých kvůli jejich jedinečnosti nechceme uloženou cache verzi. Z této záložky nám WP Rocket umožňuje zadat seznam URL, které nikdy nechceme cachovat.

Nikdy necachovat tyto cookies

WP Rocket nám dává další kontrolní nástroj kromě URL. Mnoho pluginů pracuje s vlastními cookies, nebo můžeme dokonce instalovat vlastní k identifikaci určitých uživatelů; existuje mnoho způsobů, jak používat tyto malé soubory.

S WP Rocketem můžeme přestat cachovat URL identifikované ID cookie, jakmile je staženo v prohlížeči uživatele, čímž dále přizpůsobujeme typ URL, které chceme cachovat.

Nikdy necachovat tyto user agenty

User agent je popisné pole v rámci HTTP protokolu, používané k poskytnutí informací o zařízení, které dělá požadavek. S touto informací můžeme zabránit, aby cachované stránky byly doručeny těmto user agentům.

Například jeden z user agentů Googlu je Googlebot, takže jeho uvedením v této části webu mu pokaždé, když přistoupí k našemu webu, nabídneme stránky bez cachování.

Vždy promazat tyto URL

Tato možnost je velmi zajímavá pro typ URL, u kterého máte zájem, abyste cache soubor vždy smazali, když je aktualizován.

Například mám URL se sportovními výsledky a co nechci, je doručit uživateli cachovanou verzi, protože výsledky se aktualizují velmi často.

Cachovat tyto query stringy

Query stringy jsou data, která se posílají při dělání požadavku na webovou stránku prostřednictvím URL.

Obvykle se identifikují symbolem otazníku „?" a obecně WP Rocket tento typ URL necachuje. V této možnosti ho můžeme přinutit, aby tak udělal.

Konfigurace databáze s WP Rocketem

Jak jsme opakovaně řekli během článku, WP Rocket přestal být jen cache pluginem, aby se stal pluginem pro optimalizaci rychlosti načítání webu. V této konfigurační sekci můžeme jít hlouběji do optimalizace databáze.

Jak pracujeme na obsahu ve WordPressu, generujeme jiné typy informací, které nejsou užitečné a poškozují výkon webu. K tomu nám WP Rocket poskytuje tento nástroj k provedení více či méně důkladné očisty.

Vyčištění příspěvků

Jak vidíme na obrázku, jsou 3 prvky, které mohou zabírat místo v databázi, aniž by nás zajímaly. Když aktualizujeme obsah, uloží se předchozí verze, generuje se také auto-draft toho, co upravujeme, a vyřazené příspěvky.

Pokud tyto prvky odstraníme, uvolníme místo v databázi.

Vyčištění komentářů

Tato část je důležitá, protože někdy se naše databáze plní „spam" komentáři, proto WP Rocket představil tuto možnost vyčištění tohoto typu prvku.

Vyčištění tranzientů

Když pracujeme ve WordPressu, generují se určité tranzitní prvky, které můžeme bez problému smazat, protože budou regenerovány.

Vyčištění databáze

Jak v tomto bodě, tak v dalším doporučuji udělat zálohu databáze, protože i když by se nemělo nic stát, jít hlouběji do akcí v databázi má vždy svá rizika, takže není od věci udělat zálohu.

Aktivace tohoto checku provede vyčištění databázových tabulek. Tento proces lze automatizovat.

Konfigurace CDN s WP Rocketem

Než půjdeme hlouběji do toho, jak konfigurovat CDN s WP Rocketem, chci vysvětlit, co je CDN a proč se používá.

Co je CDN?

CDN (Content Delivery Network) je služba, jejímž cílem je zlepšit rychlost přenosu obsahu k uživateli. K tomu vytváří síť pro distribuci obsahu na různých serverech po světě, aby zkrátila časy v požadavku uživatele na zdroje. To znamená, pokud je uživatel v Brazílii, CDN nabízí obsah hostovaný na serveru blíže k němu než skutečný hostingový server webu.

Obrázky převzaty ze stránky WP Rocket

Jak CDN funguje?

Funguje prostřednictvím těchto dalších serverů, které ukládají cachovanou kopii webu, a když uživatel požaduje tento obsah/zdroje, bližší server provádí přenos.

Tento typ služby je velmi užitečný, když máte těžký obsah jako obrázky, audio, video a/nebo mnoho návštěv. Pokud zpočátku máte web s málo návštěvami, neměli byste se tímto aspektem znepokojovat.

RocketCDN

WP Rocket nám nabízí možnost najmout svou CDN za cenu 7,99 dolarů měsíčně, méně než 7 eur.

CDN

Když si najmeme CDN, dostaneme informace pro její použití. Jedním z těchto poskytnutých prvků je CNAME, ačkoli pokud není poskytnut, můžeme ho získat.

CNAME je typ DNS záznamu, který mapuje název zdrojové domény na název cílové domény.

Pro použití této funkce stačí uvést to CNAME a říct, pro které soubory jej chceme.

Vyloučit soubory z CDN

Další možnost, jak se očekává, je vyloučit ty soubory, u kterých nechceme, aby procházely CDN.

Optimalizace funkce WordPress Heartbeat

WordPress heartbeat je přenos kontrolních dat k navázání komunikace mezi backendem a frontendem WordPressu a serverem. Tento typ procesu může být jedním z důvodů, proč můžete pociťovat pomalost ve WordPressu.

Mezi akce, které lze omezit:

• ›

  Auto-save a revize v editoru příspěvků.

• ›

  Oznámení v administračním panelu WordPressu.

• ›

  Informace o tom, kdo edituje.

• ›

  Realtime data.

Pokud váš WordPress funguje správně, nedoporučuji v tomto bodě nic dělat, ale pokud zaznamenáme pomalost, můžeme zkusit omezit aktivitu v různých možnostech.

Konfigurace doplňků WP Rocket

Existují určité prvky jako Google Analytics a Facebook skripty, jejich aktivací v této části konfigurace můžeme získat cache verzi a zlepšit výkon. Tato akce přímo reaguje na jeden z požadavků obvykle uváděných v auditech rychlosti načítání jako Pagespeed „Leverage browser caching".

Optimalizace obrázků

Optimalizace obrázků je proces, který by díky své komplexnosti mohl mít vlastního průvodce. WP Rocket nabízí samostatný plugin pro práci s těmito zdroji. Z WP Rocketu můžeme přistupovat ke stažení jeho „Free" verze.

Nástroje WP Rocketu

Konfigurace WP Rocketu lze ukládat a importovat, abyste se vyhnuli nutnosti znovu trávit čas tímto procesem. Také nám dává možnost provedení „Rollbacku", tedy vrátit se z hlediska instalované verze.

Tutoriály WP Rocket

K závěru tohoto průvodce WP Rocket plugin sám poskytuje sérii videí dávajících informace o různých prováděných akcích a jak je provádět.

Závěry

Jak jste viděli, WP Rocket je víc než cache plugin; máme k dispozici kompletní sadu pro optimalizaci rychlosti a výkonu webu, takže teď stačí jen vyzkoušet různé možnosti. Na co čekáte, abyste přiměli WordPress letět?

Znali jste WP Rocket? Zlepšili jste výkon díky tomuto průvodci? Máte nějaké otázky? Čekáme na vás v komentářích!