Speed advisor: čo zapnúť pre rýchlejší web

Poradca rýchlosti číta vašu domovskú stránku (a posledný importovaný report Lighthouse) a uvádza, čo zapnúť v Baza Helper a čo môže opraviť iba téma. Je to karta navrchu diagnostiky výkonu v Baza Helper > Vyrovnávacia pamäť a optimalizácia.

Spustenie

1. Otvorte Baza Helper > Vyrovnávacia pamäť a optimalizácia a nájdite kartu Poradca rýchlosti.
2. Stlačte Analyzovať tento web. Plugin si vyžiada vašu domovskú stránku z rovnakého webu a použije aj posledný report Lighthouse, ak ste ho importovali.
3. Prečítajte si rady. Každá položka má krátky dôvod. Rada, ktorá je už zapnutá, sa neponúka znova.
4. Označte, čo chcete, a stlačte Zapnúť vybrané. Prepínače sa zapnú spolu, cache stránok sa vyčistí a začne zahrievanie.
5. Otvorte web a otestujte ho, najmä formuláre, menu a posuvníky.

Rada, ktorú plugin vie použiť, má prepínač a tlačidlo použije vybrané naraz. Rada, ktorú plugin použiť nevie, je obyčajný text so štítkom Urobte sami a bez prepínača.

Ak je všetko odporúčané už zapnuté, karta napíše „Nie je čo zapnúť: odporúčané prepínače sú už zapnuté“. Ak domovská stránka neodpovie kódom HTTP 200, poradca to povie a neposkytne rady.

Čo môže odporučiť

• Cache stránok so statickým doručovaním: stránka sa pre každého návštevníka stavia znova, a to je čas do prvého bajtu. Uložená kópia odpovie hneď.
• Dlhšia životnosť cache (6 hodín): kópia, ktorá žije päť minút, je často preč, keď príde návštevník alebo test rýchlosti. Cache sa aj tak vyčistí pri zmene obsahu.
• Spojiť lokálne štýly do jedného súboru, keď stránku blokuje viac ako šesť štýlových súborov: jeden súbor je jedna požiadavka namiesto mnohých.
• Písma: zobraziť text hneď (font-display swap) a načítať hlavné písma včas (automatické predbežné načítanie).
• Odložiť skripty Elementora a jeho doplnkov.
• Odložiť všetky skripty, vrátane jQuery a témy: plugin ich odloží v bezpečnom poradí a nechá jQuery prvé, keď stránka spúšťa vložený kód, ktorý ho potrebuje.
• Chrániť a vopred načítať najväčší obrázok: najväčší obrázok prvej obrazovky sa nájde a načíta prvý a nikdy sa neodkladá.
• Odložiť načítanie obrázkov pod prvou obrazovkou, keď má stránka viac ako osem obrázkov.
• Vynechať štýly, ktoré úvodná stránka nepoužíva: keď report Lighthouse ukáže štýlový súbor, ktorý je na domovskej stránke z viac ako 90 percent nepoužitý, poradca ponúkne vynechať ho len z domovskej stránky (pridá rukoväť s @front do pravidiel v „Skripty a štýly“). Zlúčené kópie, chránené rukoväte a jQuery sa nikdy neponúkajú. Potom stránku skontrolujte.
• Nechať vlastné skripty témy mimo odkladania: zobrazí sa, keď je zapnuté odkladanie všetkých skriptov a prvá obrazovka sa vykreslí neskôr než sekundu po príchode stránky.
• Načítať zlúčené štýly po prvej obrazovke: vyžaduje to Critical CSS.
• Urobte sami: urobte kópie veľkých obrázkov vo veľkosti telefónu (karta Obrázky, „Vytvoriť“ s „Vytvoriť znova všetky“), vygenerujte Critical CSS tlačidlom „Generovať automaticky“ v paneli Critical CSS a vygenerujte ho znova, keď je väčší než 30 KB (vytvára sa pre jednu veľkosť obrazovky, telefón). Potom skontrolujte stránku.

Pre vývojára témy

Niektoré problémy nevyrieši prepínač pluginu. Druhý zoznam, Pre vývojára témy, ich zbiera zo stránky a reportu: skripty v head bez defer a plugin alebo tému, ktoré ich vypisujú, vynútený reflow, farby textu s príliš malým kontrastom, atribúty ARIA nepovolené na prvku, obrázky väčšie, než sa zobrazujú, štýly, ktoré stránka nepoužíva, a príliš veľa práce v hlavnom vlákne. Stlačte Skopírovať zoznam a pošlite ho tomu, kto vytvára vašu tému.

Ak musí jQuery zostať prvé, pretože stránka vypisuje vložený kód, ktorý ho sám volá, poradca to povie a pomenuje skripty. Zabaľte tento kód do obsluhy DOMContentLoaded alebo ho vypíšte cez wp_add_inline_script.

Dobre vedieť

• Poradca mení len vlastné prepínače pluginu v Vyrovnávacia pamäť a optimalizácia. Nikdy neupravuje vašu tému ani iné pluginy.
• Číta len domovskú stránku. Spustite ho znova po zmene témy alebo pridaní pluginu.
• Importujte čerstvý report Lighthouse v karte diagnostiky, aby ste získali fakty o nepoužitom CSS, kontraste a veľkých obrázkoch.