Azt tanácsolják, hogy ne állítsa túl rövidre az időkorlát értékét, különben a JS késleltetési funkció nem fog megfelelően működni. Továbbá az időkorlátozástól függetlenül, az esetek 99%-ában minden az első felhasználói interakciónál fog elsülni, legyen az görgetés, kattintás vagy az első egérmozgás.
CSS
A Perfmatters szerint a "Reduce unused CSS" figyelmeztetés feloldásának legegyszerűbb módja, ha engedélyezed ezt a funkciót, amelyet még a béta-verzió idején vizsgáltam, és amely mindent automatikusan elvégez. A fejlesztők azt állítják, hogy több száz URL-címen tesztelték (különböző sablonok és beállítások használatával), és ez néhány az általuk állítólag elért eredmények közül:
- Átlagos FCP-csökkenés 15,20%.
- Átlagos LCP csökkenés 19,66%.
- Átlagos TTI csökkenés 14,95%.
A Perfmattersben a "Fel nem használt CSS eltávolítása" funkció aktiválása előtt azt javasolják, hogy távolítsuk el a Perfmattersben beállított, meglévő CSS előtöltéseket (kivéve a Google Fonts helyi stíluslapokat).
Ne egyesítsük a CSS-t (amit a WP Rocket, Litespeed, Autoptimize és mások gyakran csinálnak). A CSS egyesítése a HTTP/2 óta elavult optimalizálási technika. Bizonyos esetekben a CSS egyesítése árthat a teljesítménynek(az én esetemben nem ártott), és végül győződj meg róla, hogy nem próbálod meg eltávolítani a nem használt CSS-t egy másik pluginnal.
Az eltávolításnak három módja van:
- Késleltetés (alapértelmezett): Minden eredeti CSS stíluslap (nem használt CSS) késleltetve van, és a felhasználói interakcióra töltődik be. Ez az ajánlott opció.
- Aszinkron: Az összes eredeti CSS stíluslap (nem használt CSS) aszinkron módon töltődik be. Ez a módszer segíthet elkerülni a beugró megjelenéseket, mivel a stíluslapok aszinkron módon kerülnek végrehajtásra, miközben az oldal betöltődik. Ez a módszer valamivel magasabb LCP/FCP értéket eredményez, mint a késleltetési viselkedés.
- Remove: Az összes eredeti CSS-stíluslap (nem használt CSS) eltávolításra kerül. Ez a legagresszívabb módszer, de valószínűleg kivételek hozzáadását is igényli. Csak haladó felhasználóknak ajánlott.
Itt nincs más titok, mint a tesztkörnyezetben való kísérletezés és az eredmények mérése, mind elszigetelten, mind a többi funkcióval való kölcsönhatásban.
Ezen funkciók némelyike kikapcsolható bármelyik poszton vagy oldalon a WP-szerkesztésben.
Kód
Egy hasznos klasszikus, amit sok más plugin tartalmaz, amit akár kézzel is el lehet végezni, de ami leegyszerűsíti és megkönnyíti az egyéni kód hozzáadásának működését a blog fejlécéhez, törzséhez vagy láblécéhez.
A következő mezők közvetlenül a front-endre nyomtatják a kódot, így annak érvényes HTML-nek kell lennie. Ez magában foglalja a <style> címkéken belüli inline CSS-t vagy a <script> címkéken belüli inline JS-t. Egy JS vagy CSS fájlt is feltölthet.
Nem támogatja a szerveroldali nyelveket, például a PHP-t. Egyéni PHP-kód hozzáadásához ajánlott a Code Snippets bővítmény használata.
Előbetöltés
Az előtöltésnél az első,"Instant Page" nevű opció az instant.page könyvtárat használja, és egy kis, kevesebb mint 2 KB-os JS fájlt(instantpage.js) tölt be helyileg az oldaladra, és az URL-ek előtöltésére szolgál, amikor a felhasználó egy link vagy kép fölé mozgatja a mutatót az asztali verzióban. Mobilon az URL előretöltődik, miután a felhasználó elkezdi megérinteni a linket a képernyőjén, és mielőtt elengedné azt.
65 milliszekundum után az URL előtöltése automatikusan elindul a háttérben.
Ez az eszköz a Litespeed"Instant Click" és a WP Rocket"Preload Links" funkciójának megfelelője, így ha ezt az opciót használja e két plugin valamelyikében, akkor érdemes kikapcsolni, hogy kipróbálhassa a Perfmatters-t.
Az én esetemben egy kicsit jobban működött, mint a Litespeed megfelelő opciója, bár meg kell jegyezni, hogy bizonyos esetekben növelheti a szerverterhelést.
A Javascript és a CSS opciókhoz hasonlóan az előtöltés és az előcsatlakozás használatát is az Ön igényei szerint kell használni a különböző tesztek alapján.
A kritikus képek (a hajtás felettiek) előretöltése egy még béta fázisban lévő opció, amely segíthet csökkenteni a nagyobb tartalmak (LCP) festéséhez szükséges időt a Core Web Vitalsban.
Ezek általában olyan képek, mint például egy logó, egy kiemelt kép egy posztban, egy fő kép egy landing page-en stb. Amikor előretölti őket, a vízesés tetejére kerülnek, és lényegében azt üzenik a böngészőnek, hogy elsőbbséget élveznek, és azonnal be kell tölteni őket.
Választhatsz a nulla, azaz egy sem (az alapértelmezett beállítás) és az öt kép előretöltése között. A Permatters azt ajánlja, hogy kettő vagy legfeljebb három képet válasszon, mivel a Chrome korlátozza az előretöltött képek számát, amelyek a vízesés tetején jelennek meg.
Lusta betöltés
Egy másik klasszikus teljesítményhez kapcsolódó funkció, amelyet a WordPress natívan tartalmaz a 2020-as 5.4-es kiadás óta.
Az én esetemben a Litespeed opciót használom, mert a tesztek során valamivel jobb eredményeket találtam, ennek ellenére a Perfmatters egy nagyon jól működik, és a háttérképek CSS-ére is alkalmazza.
Betűtípusok
Egy másik jó dolog. Ez az opció, amelyet az 1.7.4-es verzióhoz adtak hozzá a Perfmatters 1.7.42022. június 7-én jelent meg. Lehetővé teszi a Google betűtípusok helyi hosztolását és feltöltését néhány kattintással.
A betűtípusok helyi hosztolásának számos előnye van, teljes ellenőrzést szerez felettük, kiküszöböli az összes kérést és ezáltal a betöltési időt, és eldöntheti, hogyan szolgálja ki őket.
A funkció automatikusan megkeresi a blogodon létező Google Fonts hivatkozásokat, letölti a megfelelő betűtípusokat a fonts.google.com oldalról, és helyben tárolja őket a szervereden a következő könyvtárban: /wp-content/cache/perfmatters/your-domain.com/fonts/
Ez a bejegyzés részletesebben elmagyarázza a használatát.
CDN
Itt nincs semmi különös, és kevés a kommentálnivaló. Egy eszköz, mindig hasznos hozzáadni a használt CDN-t. Mivel én a QUIC.CLOUD-ot használom, még nem volt rá szükségem.
Analitika
Bár most nem használom, mivel megkezdtem az átállást a Matomóra, és az Analytics szkript kezelését az RGPD/CCPA cookie-k hozzájárulásának kezelését végző pluginomra hárítottam, amely szintén megfelelően kezeli, de tudom, hogy nagyon jól működik a Perfmatters-szel, mert annak idején használtam.
Innentől kezdve a Google Analytics szkriptet lokálisan hosztolhatod. Ez segít felgyorsítani az oldaladat, mivel csökkenti a további DNS-kereséseket, és megoldja a szkriptjük "böngésző gyorsítótárának kihasználása" problémáját.
A Perfmatters szerint ironikus módon a Google saját szkriptje figyelmeztetést ad ki a gyorsítótárazással kapcsolatban, de ez azért van, mert nagyon rövid a HTTP-cache fejléc lejárati ideje. Ha saját maga hosztolja, akkor a saját CDN-je vagy szervere HTTP-cache fejléceit automatikusan alkalmazza. Más szóval, teljes ellenőrzést nyer a szkript gyorsítótárazása felett.
Megjegyzik azt is, hogy ezt az eszközt a Google hivatalosan nem támogatja, de évek óta gond nélkül használják.
A Google Analytics helyi tárhelye és a szkript saját CDN-ről vagy szerverről történő kiszolgálása azt is lehetővé teszi, hogy kihasználja az egyetlen HTTP/2 kapcsolat előnyeit.
