Obrázky, PHP a další zrychlení

Modul 6: Rychlost · Doba čtení: 9 minut

Cíl lekce: Po této lekci dokážete uplatnit největší zbývající zrychlení a změřit jejich efekt.

Klíčové pojmy: optimalizace obrázků, WebP a AVIF, lazy loading, LCP obrázek, fetchpriority, verze PHP, úklid databáze (starší verze, transients, autoload), WP-Cron, skutečný cron, DISABLE_WP_CRON, externí fonty, Heartbeat

Postupujte ve správném pořadí

Po zapnutí cache stránek (lekce 6.2) jsou toto kroky, které přinášejí největší zisk, přibližně v pořadí podle poměru námahy a efektu:

1. obrázky v pořádku;
2. aktuální verze PHP;
3. méně externích prvků a náročných pluginů;
4. uklizená databáze;
5. naplánované úlohy na skutečném cronu.

Měřte před každým krokem a po něm (lekce 6.1), jinak nepoznáte, co opravdu pomohlo. A dělejte vždy jednu věc najednou.

Obrázky: největší zisk v prohlížeči

Na většině stránek tvoří obrázky největší část toho, co návštěvník stahuje. To, co jste se naučili v lekci 4.4, se zde vyplatí:

• Správná velikost: nenahrávejte obrázky větší, než je potřeba, a nechte WordPress nabízet menší varianty přes srcset.
• Komprese a formát: WebP je při stejné kvalitě obvykle výrazně menší než JPEG; AVIF bývá ještě menší. Plugin dokáže existující obrázky převést a prohlížečům, které to podporují, nabídnout menší verzi. Zkontrolujte, zda převod probíhá na Vašem vlastním serveru, nebo u externí služby.
• Lazy loading, ale ne pro vše. WordPress obrázkům automaticky přidává loading="lazy", kromě prvního velkého obrázku nahoře na stránce. Tento obrázek je často LCP prvek (lekce 6.1): největší kus obsahu, který návštěvník uvidí jako první. Pokud by se načítal líně (lazy), prohlížeč by na něj právě proto čekal a Vaše LCP by se zhoršilo. WordPress proto u kandidáta na LCP často přidává fetchpriority="high", aby ho prohlížeč načetl jako první.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Dílna s koly v řadě">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Tým před obchodem">

Jedna past: některé šablony, nástroje pro tvorbu stránek a optimalizační pluginy nastaví lazy loading i na první obrázek, nebo načítají velký obrázek jako pozadí přes CSS (to se odhalí až později). V nástroji PageSpeed Insights vidíte u položky LCP, o který prvek jde a zda se načítá líně (lazy).

PHP: zrychlení zadarmo

Každá nová hlavní verze PHP je rychlejší než ta předchozí a weby na WordPressu z toho těží okamžitě, aniž byste museli na webu cokoliv měnit. Staré verze navíc přestávají dostávat bezpečnostní aktualizace (lekce 8.4). Pokud přecházíte na novou verzi, zkontrolujte nejprve, zda ji podporují Vaše pluginy a šablona, a proveďte to nejlépe nejprve v testovacím prostředí (staging).

U nastavení PHP se podívejte také na:

• OPcache: u většiny hostingů je standardně zapnutý. Důsledek: po změně PHP souboru může chvíli trvat, než PHP začne používat novou verzi.
• memory_limit: příliš nízká hodnota způsobuje chyby u náročných stránek; velmi vysoká hodnota web nezrychlí.

Externí prvky a náročné pluginy

Každý prvek jiné strany znamená další spojení a další čekání: fonty z externí služby, vložené video, chatovací widget, měřicí kódy, tlačítka sociálních sítí, mapa. Otázky k jednotlivým prvkům:

• Je to potřeba? Video, které téměř nikdo nepřehraje, může být nahrazeno obrázkem s odkazem.
• Dá se to provozovat lokálně? Fonty si většinou můžete umístit na svůj vlastní server (pomocí pluginu nebo přes soubor theme.json u blokové šablony). Ušetříte tím jedno spojení a je to lepší i pro soukromí (lekce 9.3).
• Dá se to načíst později? Chatovací widget nebo video se může načíst až po kliknutí.

U pluginů pomůže měření pomocí nástroje X-Ray (u hostingu s CloudLinux) nebo pomocí pluginu jako Query Monitor (dočasně zapnout, viditelné jen pro administrátory). Ty ukážou, který plugin spotřebovává nejvíce databázových dotazů nebo času.

Úklid databáze

Databáze roste o věci, které nevidíte:

• Starší verze (lekce 4.1): každá uložená verze každé stránky. Omezte je pomocí WP_POST_REVISIONS a staré uklízejte.
• Spamové komentáře a komentáře v koši a příspěvky v koši.
• Transients: dočasná data pluginů v tabulce wp_options, která se někdy neuklízejí.
• Autoload: volby v tabulce wp_options se zapnutým autoload se načítají najednou při každém požadavku. Pluginy, které jste už dávno odstranili, tam někdy zanechávají velké množství dat. Stav webu (lekce 5.4) upozorní, pokud jsou autoload data příliš velká.
• Log tabulky pluginů (statistiky, bezpečnostní logy, e-mailové logy), které se nikdy nevyprazdňují.

Úklid lze provést pomocí úklidového pluginu, pomocí WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), nebo pomocí optimalizační funkce v phpMyAdmin přímo pro tabulky. Vždy nejprve zálohujte. Neodstraňujte nic, o čem nevíte, co to je.

Naplánované úlohy: WP-Cron

WordPress má úlohy, které musí proběhnout v určitý čas: zveřejnění naplánovaného příspěvku, kontrola aktualizací, spuštění zálohovacího pluginu. Tomu se říká WP-Cron. Ve výchozím nastavení neběží WP-Cron podle hodin, ale při návštěvě: při každém požadavku na stránku WordPress zkontroluje, zda nějaká úloha čeká na spuštění. Dva nedostatky:

• Při málo návštěvnících se úlohy spouštějí pozdě (naplánovaný příspěvek se zobrazí až při první návštěvě po plánovaném čase).
• Při mnoha návštěvnících se kontrola provádí velmi často a náročná úloha může právě zpomalit stránku návštěvníkovi.

Lepší je: vypnout WP-Cron při návštěvách a nechat ho spouštět skutečnou cronovou úlohou serveru každých pět nebo deset minut. V souboru wp-config.php (nad řádkem „přestaňte upravovat“):

define( 'DISABLE_WP_CRON', true );

A v nastavení cronu ve Vašem hostingovém panelu nastavte úlohu, každých 10 minut:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Cesta k PHP a k Vašemu webu se u jednotlivých hostingů liší; podívejte se do návodu ke svému panelu. Nebo použijte WP-CLI: wp cron event run --due-now. Následně ve Stavu webu zkontrolujte, zda žádné naplánované úlohy nezaostávají.

Heartbeat a administrace

Administrace WordPressu, pokud je otevřená, komunikuje se serverem každých 15 až 60 sekund (Heartbeat): kvůli automatickému ukládání, kvůli upozornění, že stejný příspěvek upravuje někdo jiný, a kvůli oznámením. Pokud máte celý den otevřených deset karet s administrací, jde o tisíce požadavků. Zavírejte karty, které nepoužíváte. Některé cache pluginy dokážou Heartbeat zpomalit; úplné vypnutí není nutné a poruší automatické ukládání.

Shrnutí

• Po zapnutí cache stránek: obrázky, verze PHP, externí prvky a pluginy, databáze, cron. Měřte před a po, vždy jeden krok najednou.
• Lazy loading pro vše kromě velkého obrázku nahoře na stránce; ten by měl mít raději fetchpriority="high".
• Novější verze PHP je zrychlení zdarma, pokud to zvládnou Vaše pluginy.
• Uklízejte starší verze, transients, spam a velká autoload data, vždy se zálohou předem.
• Nastavte WP-Cron na skutečnou cronovou úlohu pomocí DISABLE_WP_CRON a úlohy ve svém panelu.

Kvíz

Úkol

Úkol A6.3: Lazy loading a formáty na Vaší domovské stránce. Zadejte adresu svého webu. Program přečte domovskou stránku a podívá se na obrázky: nemá první velký obrázek loading="lazy" (a nejlépe má fetchpriority="high"), mají obrázky dále na stránce lazy loading a jaká část obrázků je ve formátu WebP nebo AVIF?

Úkol D6.3: Před a po. Změřte stránku svého webu třikrát v nástroji PageSpeed Insights (mobilní verze) a zapište si prostřední hodnotu LCP, INP (nebo laboratorní hodnotu Total Blocking Time, pokud nejsou k dispozici data z pole), CLS a hodnotu TTFB z úkolu A6.1. Poté proveďte jedno vylepšení z této lekce (obrázky, verze PHP, odstranění externího prvku, úklid databáze nebo skutečný cron). Změřte znovu třikrát a zapište si nové hodnoty. Popište, co jste udělali a zda je rozdíl větší než běžné kolísání mezi měřeními.

Další čtení

Tyto články popisují kroky v panelech WebOké; v jiných panelech fungují obdobně.

• Příručka k DirectAdmin 14.1: Výběr verze PHP (Select PHP version)
• Příručka k DirectAdmin 12.7: Kontrola, oprava a optimalizace databáze
• Příručka k DirectAdmin 15.1: Naplánované úlohy: automatické spouštění úloh
• Vytvoření cronjobu nebo úlohy (a co dělat, pokud neběží)
• Příručka k DirectAdmin 17.4: X-Ray: zjišťování pomalých stránek
• Propojení WP-Cronu se systémovým cronem (developer.wordpress.org, anglicky): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading a LCP (web.dev, anglicky): https://web.dev/articles/lcp-lazy-loading