Obrázky, PHP a ďalšie zrýchlenie

Modul 6: Rýchlosť · Čas čítania: 9 minút

Cieľ lekcie: Po tejto lekcii dokážete aplikovať najväčšie zostávajúce zrýchlenia a odmerať ich efekt.

Kľúčové pojmy: optimalizácia obrázkov, WebP a AVIF, lazy loading, LCP obrázok, fetchpriority, verzia PHP, čistenie databázy (revízie, transienty, autoload), WP-Cron, skutočný cron, DISABLE_WP_CRON, externé písma, Heartbeat

Postupujte v správnom poradí

Po zapnutí cache stránok (lekcia 6.2) prinášajú najväčší efekt tieto kroky, zoradené približne podľa pomeru námahy a prínosu:

1. obrázky v poriadku;
2. aktuálna verzia PHP;
3. menej externých prvkov a náročných pluginov;
4. vyčistená databáza;
5. plánované úlohy na skutočnom crone.

Merajte pred a po každom kroku (lekcia 6.1), inak nezistíte, čo pomohlo. A robte vždy len jednu vec naraz.

Obrázky: najväčší zisk v prehliadači

Na väčšine stránok tvoria obrázky najväčšiu časť toho, čo si návštevník sťahuje. To, čo ste sa naučili v lekcii 4.4, sa tu oplatí:

• Správna veľkosť: nenahrávajte obrázky väčšie, než je potrebné, a nechajte WordPress ponúkať menšie formáty cez srcset.
• Kompresia a formát: WebP je pri rovnakej kvalite zvyčajne výrazne menší než JPEG; AVIF je často ešte menší. Plugin dokáže existujúce obrázky skonvertovať a prehliadačom, ktoré to podporujú, ponúknuť menšiu verziu. Overte si, či sa konverzia deje na vašom vlastnom serveri alebo pri externej službe.
• Lazy loading, ale nie pre všetko. WordPress automaticky priradí obrázkom loading="lazy", okrem prvého veľkého obrázka úplne hore. Tento obrázok je často LCP prvok (lekcia 6.1): najväčší kus obsahu, ktorý návštevník uvidí ako prvý. Ak sa načíta s lazy loadingom, prehliadač práve s ním vyčkáva, a vaše LCP sa zhorší. WordPress preto kandidátovi na LCP často priraďuje fetchpriority="high", aby ho prehliadač načítal ako prvý.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Dielňa s radom bicyklov">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Tím pred obchodom">

Jedna nástraha: niektoré témy, nástroje na tvorbu stránok a optimalizačné pluginy nastavia lazy loading aj na prvý obrázok, alebo načítavajú veľký obrázok ako pozadie cez CSS (ten sa objaví neskôr). V PageSpeed Insights vidíte pri položke LCP, o ktorý prvok ide a či sa načítava s lazy loadingom.

PHP: rýchlosť zadarmo

Každá nová hlavná verzia PHP je rýchlejšia než predchádzajúca, a stránky na WordPresse z toho ťažia okamžite, bez akejkoľvek zmeny na vašej stránke. Okrem toho staršie verzie už nedostávajú bezpečnostné aktualizácie (lekcia 8.4). Pri prechode na novú verziu overte, či ju podporujú vaše pluginy a téma, a najprv to vyskúšajte v testovacom prostredí (staging).

V nastaveniach PHP sa pozrite aj na:

• OPcache: u väčšiny hosterov je štandardne zapnutá. Dôsledok: zmenenému súboru PHP môže chvíľu trvať, kým PHP začne používať novú verziu.
• memory_limit: príliš nízka hodnota spôsobuje chyby pri náročných stránkach; veľmi vysoká hodnota stránku rýchlejšou nerobí.

Externé prvky a náročné pluginy

Každý prvok od inej strany znamená ďalšie spojenie a ďalšiu čakaciu dobu: písma z externej služby, vložené video, chatovací widget, meracie kódy, tlačidlá sociálnych sietí, mapa. Otázky pri každom prvku:

• Je potrebný? Video, ktoré takmer nikto nespustí, môže byť nahradené obrázkom s odkazom.
• Dá sa hostovať lokálne? Písma môžete väčšinou umiestniť na vlastný server (pomocou pluginu alebo cez theme.json pri blokovej téme). Ušetríte tým jedno spojenie a je to lepšie aj z hľadiska súkromia (lekcia 9.3).
• Dá sa načítať neskôr? Chatovací widget alebo video sa môže načítať až po kliknutí.

Pri pluginoch pomôže meranie pomocou X-Ray (pri hostingu s CloudLinux) alebo pluginu ako Query Monitor (dočasne zapnúť, viditeľné len pre administrátorov). Ukážu, ktorý plugin spotrebuje najviac databázových dopytov alebo času.

Vyčistenie databázy

Databáza rastie o veci, ktoré nevidíte:

• Revízie (lekcia 4.1): každá uložená verzia každej stránky. Obmedzte ich pomocou WP_POST_REVISIONS a staré vyčistite.
• Spamové komentáre a komentáre v koši, a články v koši.
• Transienty: dočasné údaje pluginov v wp_options, ktoré sa niekedy nevyčistia.
• Autoload: položky v wp_options so zapnutým autoload sa pri každej požiadavke načítajú naraz. Pluginy, ktoré ste už dávno odstránili, tam niekedy zanechajú veľké množstvo údajov. Zdravie webovej stránky (lekcia 5.4) upozorní, ak sú autoload údaje príliš veľké.
• Tabuľky s logmi pluginov (štatistiky, bezpečnostné logy, e-mailové logy), ktoré sa nikdy nevyprázdňujú.

Čistenie môžete vykonať pomocou čistiaceho pluginu, cez WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), alebo pomocou optimalizačnej funkcie phpMyAdmin priamo na tabuľkách. Vždy najprv zálohu. Nič neodstraňujte, ak neviete, čo to je.

Plánované úlohy: WP-Cron

WordPress má úlohy, ktoré musia bežať v určitom čase: zverejnenie naplánovaného článku, kontrola aktualizácií, beh zálohovacieho pluginu. Volá sa to WP-Cron. Štandardne WP-Cron nebeží podľa hodín, ale pri návšteve: pri každej požiadavke na stránku WordPress skontroluje, či je pripravená nejaká úloha. Dva nedostatky:

• Pri málo návštevníkoch bežia úlohy neskoro (naplánovaný článok sa zobrazí až pri prvej nasledujúcej návšteve).
• Pri veľa návštevníkoch sa kontroluje veľmi často, a náročná úloha môže práve spomaliť stránku pre návštevníka.

Lepšie riešenie: vypnite WP-Cron pri návštevách a nechajte skutočný cronjob servera spúšťať ho každých päť alebo desať minút. V súbore wp-config.php (nad riadkom „stop s úpravami“):

define( 'DISABLE_WP_CRON', true );

A v nastaveniach cronu vo vašom hostingovom paneli vytvorte úlohu, každých 10 minút:

*/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šej stránke sa líši podľa hostera; pozrite si návod vášho panela. Alebo použite WP-CLI: wp cron event run --due-now. Neskôr skontrolujte v Zdraví webovej stránky, že žiadne plánované úlohy nemeškajú.

Heartbeat a administrácia

Nástenka WordPressu kým je otvorená, komunikuje so serverom každých 15 až 60 sekúnd (tzv. Heartbeat): kvôli automatickému ukladaniu, upozorneniu, že niekto iný upravuje rovnaký článok, a kvôli notifikáciám. Ak máte celý deň otvorených desať kariet s administráciou, ide o tisíce požiadaviek. Zatvorte karty, ktoré nepoužívate. Niektoré cache pluginy dokážu Heartbeat spomaliť; úplne ho vypínať nie je potrebné a narušilo by to automatické ukladanie.

Zhrnutie

• Po cache stránok nasledujú: obrázky, verzia PHP, externé prvky a pluginy, databáza, cron. Merajte pred a po, vždy jeden krok naraz.
• Lazy loading pre všetko okrem veľkého obrázka úplne hore; ten by mal radšej dostať fetchpriority="high".
• Novšia verzia PHP je rýchlosť zadarmo, pokiaľ to zvládnu vaše pluginy.
• Vyčistite revízie, transienty, spam a veľké autoload údaje, vždy so zálohou.
• Nastavte WP-Cron na skutočný cronjob pomocou DISABLE_WP_CRON a úlohy vo vašom paneli.

Kvíz

Úloha

Úloha A6.3: Lazy loading a formáty na vašej domovskej stránke. Zadajte adresu svojej stránky. Program načíta domovskú stránku a skontroluje obrázky: nemá prvý veľký obrázok atribút loading="lazy" (a ideálne má fetchpriority="high"), majú obrázky nižšie na stránke lazy loading, a aká časť obrázkov je vo formáte WebP alebo AVIF?

Úloha D6.3: Pred a po. Zmerajte stránku vášho webu trikrát v PageSpeed Insights (mobil) a zaznamenajte stredné hodnoty LCP, INP (alebo laboratórnu hodnotu Total Blocking Time, ak nie sú k dispozícii terénne dáta), CLS a TTFB z úlohy A6.1. Potom vykonajte jedno vylepšenie z tejto lekcie (obrázky, verzia PHP, odstránenie externého prvku, vyčistenie databázy alebo skutočný cron). Zmerajte znova trikrát a zaznamenajte nové hodnoty. Opíšte, čo ste urobili, a či je rozdiel väčší než bežné kolísanie medzi meraniami.

Ďalšie čítanie

Tieto články opisujú kroky v paneloch WebOké; v iných paneloch fungujú podobne.

• Návod na DirectAdmin 14.1: Voľba verzie PHP (Select PHP version)
• Návod na DirectAdmin 12.7: Kontrola, oprava a optimalizácia databázy
• Návod na DirectAdmin 15.1: CRON úlohy: automatické spúšťanie úloh
• Vytvorenie cronjobu alebo úlohy (a čo robiť, ak nebeží)
• Návod na DirectAdmin 17.4: X-Ray: odhaľovanie pomalých stránok
• Pripojenie WP-Cron na systémový cron (developer.wordpress.org, Angličtina): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading a LCP (web.dev, Angličtina): https://web.dev/articles/lcp-lazy-loading