Utasítások és tippek a WP Rocket bővítmény 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 határozottan a legjobb sebességoptimalizáló bővítmények közé sorolhatom.
Hogyan szerezhető be a WP Rocket? mi az ára?
WP Rocket kizárólag a hivatalos webhelyükről kapjuk meg. Az árat tekintve három terv közül választhatunk – SINGLE 49 dollárért é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. Persze jó, ha van egy gyorsítótár-bővítmény, 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 Rocket . 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 adatok elküldésre kerülnek 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. 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
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). 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 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 .
