Utasítások és tippek a WP Rocket beépülő modul beállításához, amely láthatóan felgyorsíthatja WordPress webhelyét.
Mi az a gyorsítótár
A gyorsítótár olyan gyakran eldobott szó mostanában, hogy lassan még a nagymamám is beszél róla. A gyorsítótár az ideiglenes ill mind a számítógép, mind a szerver gyorsítótár.
Ahelyett, hogy a teljes weboldalt újra kellene tölteni (tehát hatékonyan letölteni a szerverről), bizonyos részek, amelyek nem változnak, ebből a memóriából töltődnek be.
Így csökken az adatáramlás a kliens és a szerver között, ami kisebb mennyiségű átvitt adattal és különösen gyorsabb oldalbetöltési sebességgel jár.
Szerver oldali gyorsítótár
Minden átlagos szervernek saját gyorsítótár-rendszere van. A szerver általában megjegyzi a mentett képeket, CSS- és JS-fájlokat, amelyek az egész oldalon közösek.
Ahelyett, hogy mindig elküldené az elmentett logót a kliensnek, csak arról küld információt, hogy az ügyfél már elmentette a logót, és ezért tudja azt használni.
Ez az oldalon található legtöbb képre vonatkozik. Lehet, hogy valaha is szembesült azzal a problémával, hogy még akkor is látja a régi képet, ha kicseréli egy újra. Tehát a gyorsítótár a hibás.
A weboldal fejlesztése során természetesen ki kell kapcsolnunk a gyorsítótárat, mert azonnal látnunk kell az elvégzett változtatásokat. Ezt megteheti a szerver oldalon, a tárhely vezérlőpultján.
Oldaloldali gyorsítótár
A gyorsítótárat a WordPress oldalán is beállíthatjuk. Bár gyorsítótárnak hívják, valójában csak a használt kódok és egyéb fájlok optimalizálása.
Több plugint is használhatunk erre a célra. Némelyikük ingyenes, és többnyire csak az alapvető funkciókat fedi le. Sokuknak van fizetős verziója, vagy az alapoktól kezdve fizetik őket.
Ebben a cikkben a WP Rocket bővítményre koncentrálunk, amely fizetős, de nyugodt lelkiismerettel egyértelműen a legjobb sebességoptimalizáló bővítmények közé sorolhatom.
Hogyan szerezhető be a WP Rocket? mi az ára?
A WP Rocketet kizárólag a hivatalos webhelyükről kapjuk meg. Az árat tekintve három terv közül választhatunk – SINGLE 49 $ évente, egy weboldalra használjuk. A 99 dolláros PLUSZ tervet három webhelyre, az évi 249 dolláros INFINITE tervet pedig végtelen számú webhelyre használjuk (nagyon jó azoknak a fejlesztőknek, akik sok webhelyet készítenek).
A számlázási adatok kitöltése és a fizetés után egy .zip fájlt kapunk letöltésre, amely tartalmazza a bővítményünket és a licencünket. A bővítményt a wp-admin segítségével töltjük fel oldalunkra (Plugins-> add new-> upload plugin). A sikeres telepítés után ne felejtse el aktiválni a bővítményt.
Útmutató a WP Rocket bővítmény beállításához
A gyakorlatban már többször találkoztam azzal, hogy valaki gyorsítótár-bővítményt telepített, és nem vett észre semmilyen változást. Természetesen. A gyorsítótár bővítmény jó dolog, de olyan, mint a jogosítvány (de nem vezetni). A teljesítmény javítása és a sebesség optimalizálása érdekében konfigurálnunk kell a WP Rocketet.
A WP Rocket beállításai a wp-admin alkalmazásban érhetők el a Beállítások szakasz bal fő oszlopában –> WP rakéta . Kattintunk. Megjelenítünk egy faliújságot és sok különböző, első pillantásra ijesztő lehetőséget. Nézzük végig őket egyenként.
Irányítópult
faliújság. Itt jelennek meg a fiókjával, licenceivel stb. kapcsolatos alapvető információk. Itt lehetőségünk van a „Rocket Analytics” bekapcsolására, ami azt jelenti, hogy bizonyos adatokat elküldünk a WP Rocket HQ-nak. Ez segíthet a bővítmények fejlesztőinek.
Gyorsítótár
A gyorsítótár alapvető beállításai.
Ki /be tudjuk kapcsolni a mobil gyorsítótárat , javaslom, hogy hagyja bekapcsolva. A gyorsítótár fájlokat külön is el tudjuk különíteni a nagy PC-khez és külön a mobilokhoz. Én személy szerint soha nem csinálom ezt, mert nem látom okát.
A gyorsítótárazás engedélyezése a bejelentkezett WordPress-felhasználók számára bekapcsolja a gyorsítótárat a bejelentkezett felhasználók számára. Az egyszerűbb és prezentációs oldalakhoz szükségtelen, de ha van olyan oldal, ahol a felhasználók bejelentkeznek (pl. e-shop), akkor ez a funkció hasznos lehet. Alapvetően a bejelentkezett felhasználó nem használja a gyorsítótárat (feltételezzük, hogy a bejelentkezett felhasználó webhely adminisztrátora, akinek gyorsítótár nélkül kell látnia az oldalt, hogy azonnal ellenőrizni tudja a változásokat). Ha bejelöli ezt a négyzetet, a gyorsítótárat a bejelentkezett felhasználók is használni fogják.
Gyorsítótár élettartama – itt állítjuk be azt az időtartamot, amely után a gyorsítótárat automatikusan meg kell tisztítani. Miután rákattintott a „Percek” elemre, elegendő az óra és a nap kiválasztásához. Mindig meghagyom az alapértelmezett értéket, de természetesen ez rajtad múlik. Tehát ha valaha változtatsz, az nem kezd el azonnal megjelenni, hanem manuálisan kell „kiüríteni” a gyorsítótárat, azaz visszaállítani. Ha elfelejti, az itt megadott idő után automatikusan visszaáll.
A gyorsítótár manuálisan törölhető az Admin panelen (fekete csík a tetején), keresse meg benne a WP Rocket elemet, és kattintson a Gyorsítótár törlése gombra a teljes gyorsítótár kiürítéséhez. Ezzel mindenhol megjelennek a változások, még a be nem jelentkezett felhasználók számára is.
Fájl optimalizálás
Talán a legérdekesebb rész. Itt beállítjuk, hogy a WP Rocket hogyan dolgozza fel a webhelyet alkotó fájlokat.
Alapbeállítások
HTML kicsinyítése – kicsinyíti az oldal HTML-forráskódját a sortörések és a felesleges szóközök eltávolításával. Kevéssé hatékony, de gyakorlatilag nincs itt semmi baj. Mindig bekapcsolom.
A Google Fonts optimalizálása – ezt mindenképpen hagyja bekapcsolva, ez javítja a Google Fonts betöltését, amelyet szinte biztosan használ.
Megjegyzés: A WP Rocket újabb verzióiban az alapbeállítások már nem érhetők el (már nem releváns).
CSS fájlok
CSS egy olyan nyelv, amellyel – leegyszerűsítve – beállítják az oldal megjelenését. Egy ideális univerzumban minden oldal egyetlen .css fájlt tartalmaz, amelyben az összes vizuális elem be van állítva. De ez biztosan nem igaz a WordPressre. Mivel a WordPress egy összetett platform, és témákból és beépülő modulokból áll, szinte minden beépülő modulnak saját CSS-fájlja van (és ritkán csak egy). Ennek eredményeként több tíz CSS-fájlt tölt be minden alkalommal, amikor az oldal betöltődik.
CSS-fájlok kicsinyítése – kicsinyíti a .css-fájlokat a behúzások és szóközök eltávolításával. Hasonló a HTML kicsinyítéshez. Mivel több CSS-fájl van, ez a beállítás szinte kötelező.
CSS-fájlok kombinálása – ez a beállítás az, hogy végigmegy az oldal által használt összes .css-fájlon, és létrehoz egy nagy fájlt (csak egyet). Lépjünk tehát közelebb az ideális univerzum állapotához – csak egy .css fájlt tölt be, bár egy nagyobbat. Ezt az opciót feltétlenül engedélyezni kell.
CSS-kézbesítés optimalizálása – ezt a beállítást is bekapcsolom. Ez azt eredményezi, hogy a CSS „aszinkron módon” töltődik be, azaz a weboldal többi tartalmától függetlenül.
Természetesen, hogy ne legyen olyan egyszerű, a CSS-fájlok kombinációjának beállítása vizuális hibákat (ún. bugokat) okozhat az oldalon. Ebben az esetben ki kell deríteni, hogy mi okozza az adott problémát, és az adott .css fájlt a „Kizárt CSS-fájlok” közé kell tenni.
Javascript fájlok
A CSS-hez hasonlóan a Javascript fájlokat is optimalizálhatjuk.
A kicsinyítés és a kombinálás ugyanúgy működik, mint a CSS
A jQuery Migrate eltávolítása – A jQuery Migrate a jQuery segédfunkciója, amely figyelmezteti a jQuery verziói és a harmadik féltől származó beépülő modulok vagy témák közötti összeférhetetlenségre. A WordPress 5.5 óta már nem használják, ezért letilthatja.
A JavaScript betöltése késleltetett – alapvetően ugyanazt teszi, mint a CSS-kézbesítés optimalizálása – a javascript az oldalon lévő többi fájltól függetlenül töltődik be.
Megjegyzés: Ha a http2 protokollt használja, nincs szükség CSS- vagy JS-fájlok kombinálására.
A média
Ebben a részben képeket, videókat és egyéb multimédiás tartalmakat állítunk be.
Lusta terhelés
A Lazy Load egy olyan funkció, amely lelassítja az oldalon azonnal nem látható képek szükségtelen betöltését. Ez jelentős sebességnövekedést fog okozni, mivel a képek csak akkor kezdődnek el betölteni, ha közel kerülünk a helyükhöz. Beírom a www.wp.sk oldalt , és a láblécben a legalul a wp.sk logó, ami tulajdonképpen egy kép.
A késleltetett betöltés hatására az oldal e kép nélkül is betöltődik. Csak amikor az egér görgőjének elforgatásával közel érünk a lábléchez, a kép betöltődik a háttérben és megjelenik. Addig nincs rá szükség. Lusta betöltés nélkül az egész oldal már az elején betöltődik.
Képek engedélyezése – engedélyezi a képek lusta betöltését.
Enable for iframe / videos – lehetővé teszi a videók és iframe-ek lusta betöltését. Az iframe-et gyakran használják pl. Facebook hírfolyam esetén, vagy YouTube-videó vagy más oldalról származó tartalom beszúrásakor.
YouTube iframe cseréje előnézeti képpel – a ki nem töltött videót előnézeti képpel helyettesíti (pl. ha gyorsan görgetünk arra a helyre, ahol a videónak lennie kell, és nem volt ideje betölteni a háttérben).
Emoji
Az emojik meglehetősen haszontalan részei a WordPressnek, de néhány blogon megtalálják alkalmazásukat. Valójában hangulatjelek (hangulatjelek), amelyeket a WordPress automatikusan grafikus formává alakít át. Ha nincs rá szüksége, könnyedén kikapcsolhatja őket.
Beágyaz
A WordPress beágyazásának letiltása – megakadályozza, hogy mások külső webhelyekre „húzzák” a webhely egy részét. Azt javaslom, hagyja rajta.
WebP kompatibilitás
Beállítja a WebP-képek gyorsítótárazását. A WebP egy viszonylag új képformátum, amelyet elsősorban az interneten való megjelenítésre terveztek. A kép kisebb méretű, de minőségében a jpg-hez hasonlítható. Minden jpg és png konvertálható WebP-re valamilyen konverteren keresztül, és feltölthető az oldalra. Ha azonban nem WebP-t használ, nem szükséges engedélyezni ezt a beállítást.
Előtöltés
Ahogy fentebb említettem, a WP Rocket úgy működik, hogy egyedi fájlokat hoz létre (főleg .css és .js), amelyeket aztán a webhely élő működésében használnak az eredetiek helyett. Az előtöltés az a funkció, amely elindítja ezt a fájlgenerálást. Ugyanez vonatkozik a már létrehozott fájlok újragenerálására is, ha változás történik az oldalon (pl. új cikk hozzáadása stb.).
Itt azt javaslom, hogy hagyja bekapcsolva az „Előtöltés aktiválása”, valamint a „Webhelytérkép-alapú gyorsítótár-előtöltés aktiválása”, „Yoast SEO XML webhelytérkép” (ha a Yoast SEO bővítményt használja) és a „Link előtöltés engedélyezése” lehetőséget. Ez a webhelyek 99%-ára elegendő.
Speciális szabályok
Itt a WP Rocket speciális szabályait állítjuk be. Itt például megadhatunk aloldalakat, fájlokat stb. amelyeket soha nem szabad gyorsítótárban tárolni. Kivételt állíthatunk be a cookie-k gyorsítótárazásakor, vagy a használt böngésző alapján.
A WP Rocketen belül lehetőség van az ún helyettesítő karakterek, azaz a csillag helyettesítő karakter *. Ha szükségünk van pl. hogy a teljes plugint eltávolítsuk a gyorsítótárból, mondjuk a Contact form 7-et nonszensz 10 .css fájlt egymás alá sorolni, amik a contact-form-7 mappában találhatók. Helyette helyettesítő karaktert használunk, valami ilyesmit:
Wp-content/plugins/contact-form-7/*, amely biztosítja, hogy a teljes mappa (és így a teljes bővítmény) gyorsítótár nélkül maradjon.
Adatbázis
Ebben a részben bizonyos esetekben szépen felgyorsíthatjuk az oldalt, de ez megbosszulja magát. Itt végezhetjük el az ún az adatbázis megtisztítása a látszólag felesleges adatoktól. A WP Rocket azt javasolja, hogy az ilyen adatbázis-műveletek végrehajtása előtt készítsen biztonsági másolatot az adatbázisról.
Itt törölhetjük a revíziókat, az automatikus piszkozatokat, a bejegyzéseket a kukából, a nem jóváhagyott megjegyzéseket, a tranzienseket, optimalizálhatjuk a táblázatokat és beállíthatjuk az automatikus tisztítást.
Az egyes aloldalak vagy cikkek létrehozásakor a WordPressben annyi revíziót mentünk el, ahányszor a FRISSÍTÉS gombra kattintunk. A főként cikkeket tartalmazó nagy webhelyek esetében ez komoly problémát jelenthet, tekintve, hogy több millió változat is előfordulhat. Ezen átdolgozások törlésével nagyban megkönnyítjük az adatbázis életét, de elveszítjük a cikk vagy aloldal korábbi verzióira való visszatérés lehetőségét.
CDN
A CDN a Content Delivery Network rövidítése. Használod, és lehet, hogy nem is tudod. A weboldal kódszintjén különféle könyvtárak találhatók, amelyeket általában a weboldal létrehozásához használnak.
Tipikus példa erre a jQuery vagy a Google fontok. Előnye, hogy a weboldalunk látogatójának valószínűleg már egy másik oldaláról lesz letöltve a jQuery a számítógépén, így a böngészőjének nem a szerverről, hanem annak gyorsítótárából kell újra előhívnia a jQuery fájlt az oldal renderelésekor.
Ez befolyásolja a webhely sebességét. A valóságban azonban csak néhány kilobájtos fájlokról van szó, amelyek nem lesznek extrém hatással a sebességre, ha egy klasszikus webhelyről van szó.
Szívverés
A Heartbeat egy beépített wordpress funkció. Ez valamiféle szabályos „impulzus”, ami alapján rendszeres időközönként (percenként egyszer) ajax kéréseket küldenek a szerverre.
Az adminisztrátori környezetben megjelenő értesítésekhez, cikkek és aloldalak automatikus mentéséhez, tartalom zárolására szolgál, ha egy másik felhasználó szerkeszti (felugrik a „Felhasználó #név szerkeszti ezt a cikket” közmondásos táblázat).
Nekem személy szerint soha nem volt gondom ezzel, és nem is foglalkoztam vele. Itt elméletileg ki lehet kapcsolni a Heartbeat-et, de én biztosan nem javaslom, mert zavarja a WordPress beépített funkcionalitását, nem beszélve a használt pluginokról, amelyek használhatatlanná válhatnak. Tehát ennek a beállításnak a korlátozása csak néhány gyenge beépülő modul esetében releváns.
Kiegészítők
Lehetőség más bővítmények telepítésére, amelyek együttműködnek a WP Rocket-tel, és még jobb sebességet biztosítanak.
Képoptimalizálás
Már a weboldal készítésekor érdemes gondolni a képoptimalizálásra, ill tartalom feltöltésekor. A tisztesség azt diktálja, hogy 300 kB-nál nagyobb kép ne kerüljön az oldalra. A FullHD méret (azaz 1920×1080) a legtöbb weboldalhoz teljesen elegendő. Egyáltalán nem javaslom, hogy gigantikus tükörreflexes képeket töltsön fel az internetre (pl. 6000×4000).
Bár a WordPress továbbra is 4K méretűre vágja őket, a kép adatmérete fontosabb, mint a méretek. Valójában csak néhány kivétel van, amikor nagy adatképet kell használni.
Az ilyen képeknél azonban mindig csak akkor használjuk a miniatűrt és a teljes képet, amikor rákattintunk (pl. Lightboxban megnyitva). A WP Rocket mindenesetre nem tartalmazza a képoptimalizálási lehetőséget, de az Imagify pluginnal nagyon szépen működik .
Egy másik jól ismert plugin a képek optimalizálására az EWWWW Image optimizer (javaslom, hogy használat után távolítsa el).
Eszközök
Plugin eszközök. Importálás, exportálás, visszaállítás egy régebbi verzióra. Amit tudunk.
Oktatóanyagok
Végül pedig a WP Rocket beépülő modul Oktatóprogramok részében találsz angol nyelvű oktatóvideókat.
Utolsó tipp: nézze meg ezt az oktatóanyagot a WordPress-webhely felgyorsításáról .
Segített Önnek ez a cikk? Kérem, egy megosztással támogasson. 👍
