WP Rocket – utasítások a webhely felgyorsításához

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.

💡 Tipp: A gyors ⏱ WordPress webért kulcsfontosságú a megfelelő tárhely kiválasztása. A hitelesített minőséget javaslom használni ➡️ Webonic.

Ú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 .

WordPress Návod v PDF

LEAVE A REPLY

Please enter your comment!
Please enter your name here