Merüljünk el a Wordpress gyorsítás világában - Blog | Versanus

Merüljünk el a Wordpress gyorsítás világában

|

Versanus Kft.
Versanus Kft.

Előző cikkünkben az alapvető webtárhely beállításokkal foglalkoztunk szerver- és honlap oldalról is megközelítve. Most onnan folytatjuk, hogy csak kifejezetten WordPress rendszert fogunk optimalizálni. Kérem, hogy nyissa meg az „Alapvető beállítások egy gyorsabb weboldalért” című írásunkat és végezze el az alábbi lépéseket:

PHP beállítás, azaz 7-es PHP, szükséges modulok és limitek, opcache bekapcsolása. SSL tanúsítvány bekapcsolása, .htaccess fájlt most nem kell szerkesztenie a HTTPS és a HTTP/2 eléréséért, WordPressben máshogy oldjuk meg. Apache optimalizációk - Tömörítés, azaz kapcsolja be a cPanelben a Gzip tömörítést. Tiltsa ki a felesleges marketing robotokat. Itt végezze el ugyan azt a robot.txt fájl szerkesztést



A böngésző oldali gyorsítótárazásra, a CSS és JavaScript fájlok kombinálására és kicsinyítésére, valamint a képek optimalizálására és a WordPress egyéb paraméterezésére, gyorsítására pluginokat fogunk használni. Illetve a végén tovább „tuningoljuk” a Cloudflare CDN bekötésével.

Wordpress esetén érdemes a nem használt pluginokat is kikapcsolni. Mindenképp érdemes átnézni, sok olyan maradhat véletlenül bekapcsolva, ami éles üzemben nem kell vagy eleve nincsenek is használatban. Ezt a Bővítmények menüpont alatt ellenőrizheti.

Itt is fontos, hogy a fenti módosítások elvégzése közben folyamatosan ellenőrizze a honlap működését és ha az egyik műveletnél hiba keletkezik, azt állítsa vissza eredeti állapotára.


„Mondd, Te mit választanál?”

Elmondom: Sokféle WordPress cache bővítmény létezik. Van, ami ingyenes, annyit is ér. Van, aminek volt régen ingyenes verziója, de most fizetős. Olyan is létezik, aminek van ingyenes verziója és van prémium fizetős is, amelyben az ingyenes annyira le lett butítva, hogy szinte reménytelen vele bármit is elérni, a fizetős pedig alsó hangon 100 dollár lett, a beállításai pedig túl bonyolultak. Igen, mindenki rájött, hogy ez nagyon jó üzlet.

Az elmúlt heteket ezek tesztelésére szántuk és mi újfent a „WP Fastest Cache” nevű bővítmény mellett kötöttünk ki. Ennek már az ingyenes verziójával is szép eredményt lehet elérni, a prémium pedig megfizethető 50 dollár. Ajánlom megvásárlásra, látványos eredményt lehet vele elérni. A weboldal, amivel próbálgattuk, több, mint 40 pluginnal van felvértezve és egyedi sablont használ. Optimalizáció nélkül 170 körüli http hívással (request), 4MB körüli mérettel, a Google PageSpeed Insights mérésén alig kapott 72-es értéket mobil, 53-as értéket pedig asztali környezetben, a GTmetrix tesztjén a PageSpeed Score szintén 70 körül volt, a YSlow Score pedig 60 alatt volt.

Jelenleg ezek az értékel 96/94. Igen. 96 pont mobilon és 94 pont asztalin. A GTmetrix-en pedig 90% a sebesség, a YSlow pedig 80%. Ezt a 80%-ot már nem tudtam feljebb tornászni, mert olyan dolgokba kötött bele, ami nincs. Például, hogy érzékel 300x300 pixeles képet 90x90 pixelesként megjelentve, és azt mondja, hogy ne tegyek ilyet. Igaza van, nincs is, de szerinte mégis.

google speed

Ennél magasabb eredményt már csak akkor tudnék elérni, ha kivennék minden „3rd party”, azaz harmadik féltől származó scripteket, mint például a Google Analitycs, a Facebook, Twitter, stb. Ezek olyan kódok, aminek a forráskódját nem szoktuk betenni a saját kódunkba, linkkkel töltjük be, aminek böngésző oldali cache idejét is a szolgáltató állítja be. Szóval ezekre nincs sok ráhatásunk. Ezekkel is lehetne persze tovább játszani, de elégedettek voltunk már így is az eredménnyel.

Kezdje azzal, hogy Ön is megméri az oldala teljesítményét ezekkel a mérő oldalakkal.


WP Fastest Cache telepítése és beállítása

Feltételezek némi WordPress bővítmény telepítési jártasságot, ezért nem mutatom be lépésről lépésre. A WordPress admin felületén menjen a Bővítmények / Új hozzáadása opcióhoz és keressen rá a „WP Fastest Cache” pluginra, majd a találatban a neve mellett kattintson a Telepítésre, végül a bekapcsolásra. Ezután megjelenik a bal oldali menüben, amire kattintva eléri a beállításokat.

A beállítás igen egyszerű. A Settings fülön kapcsoljon be szinte mindent. Amit én inaktívan hagytam (nem pipáltam be), az azok az alábbiak: Logged-in users, Mobile. Minden más pipa, majd mentés a lenti Submit gombbal.

Vannak eleve tiltott elemek, mint például a Mobil theme, Minify HTML Plus, a Minify CSS Plus, Combine JS Plus, Render blocking JS, Google Fonts és a Lazy Load. Ezek a Premium verzió megvásárlása és telepítése után válnak elérhetővé. Amennyiben az ingyenes verzó eredményével nem elégedett és megvásárolta, akkor kapcsolja be ezeket is.

Az én beállításomban így néz ki:

cache setup

Alapból jól végzi a dolgát, da a Plus jelölésű elemék tényleg hozzák azt a pluszt. És már teszi is a dolgát. Ennyi. Egyszerűen, gyorsan, precízen.

A Delete Cache fül alatt lehet törölni a gyorsítótárat, de ennek eléréséhet kitesz a fenti admin sávba is gyors linkeket, amivel szükség esetén kézzel törölhető a cache.  A beállításokban van két opció, a New Post és az Update Post, ami akkor is töröl, amikor új bejegyzést írt vagy meglévőt frissített. Ez hasznos, mert így ezt a kézi törlést szinte felesleges használni. A fizetős verzióban van itt egy kis statisztika is, amely mutatja, hogy mennyi elemet kezel. Jelen példa esetén 198 elem, amiből 27 CSS, 62 JS, a többi pedig kép vagy betűtípus (fonts).

A Cahce Timeout fül alatt beállíthatja, hogy magától is törölje a rendszer az addig eltárolt gyorsítótárat és generáljon újat. Ha sűrűn változik a tartalom az oldalán, mondjuk egy hírmagazint üzemeltet és gyorsan cserélődik a nyitólapi tartalom, akkor felveheti szabálynak, hogy annak például naponta törölje. Ez opció, nem szükséges használni, illetve mindenkinek egyedi igény szerint javaslom a hangolását.

A Premium fül alatt kezdeményezheti a plugin vásárlását. Az Exclude alatt olyan szabályokat hozhat létre, amivel eleve kizár felületeket a gyorsítótárazásból. Ilyen például az admin felület, a belépési felület, stb. Ezeket létre is hozza magától. Hozzá is adhat egyedi oldalt. Például ha van a honlapján valamilyen kérdőív, űrlap, azt érdemes kizárni. A DB fül csak Premium alatt működik.  Ez az opció az adatbázist is képes takarítani, rendet tenni benne. Túl sok szót nem érdemel, jól működik, itt időnként elegendő az ALL-ra nyomni és kész is.

Ezzel az egy pluginnal bekapcsoltuk szinte mindent, amit a Google PageSpeed Insights és a GTmetrix javasol. Gyorsan, egyszerűen, érthetően. A kis kék infós ikonokra kattintva bővebb segítséget is nyújt, angol nyelven, de az is elegendő, ha olvasás nélkül csak leköveti azokat a beállításokat, amiket képernyőmentésekkel illusztrál. Lett Gzip tömörítés, CSS/JS kombinálás és minimalizálás, HTML minimalizálás, böngésző oldali cache, Google Font sasszinkron töltés, stb, stb.

És még nincs vége.


Képek optimalizálása

Egy nagyon fontos elemhez érkeztünk. Sokan csak úgy feltöltik a gépeket a WordPress admin felületére, letöltve innen-onnan, stock fotókból, vagy egyenesen a fényképezőgépről, anélkül, hogy azokat egy képszerkesztő programmal dolgoznánk, méretre vágnák, stb.

Képek optimalizálására van szerencsére több jó bővítmény. Ilyen például az általam is sokáig használt ShortPixel. Okos, könnyű használni. Plugin feltelepít, az beolvassa a képeket, futtatom, várok, kész. Ja és fizetek. 100 kép ingyenes, aztán vagy fizetek 10.000 képenként 10 dollárt vagy havi konstrukcióban előfizetek és 5.000 képet tudok optimalizálni 5 dollárért. Nagyon jó eszköz, ezt is ajánlom.

Ezzel együtt a WP Fastest Cache is szállítja a saját megoldását. Az Image Optimization egy igazán hasznos része ennek a bővítménynek. De csak a Premium verzióban és ez is darabszám után fizetős. Itt egy kép optimalizálása 1 kredit. Alapból ad 1000 kreditet. Ha ez elfogy, akkor 1 dollárért ad 1000 db újabb kreditet. Ki lehet számolni, hogy kinek melyik plugin éri meg jobban.

Az Optimize All gombra kattintva az összes elérhető képpel dolgozik, a Show Images gombra kattintva pedig kilistázza a képeket és i lehet venni azokat, amiket nem szeretnénk, hogy optimalizálja.

Amikor elindítja, legyen türelemmel, sokáig tart. Végül kiírja az optimalizálás eredményét.

Mindenképpen használjon és futtasson időnként optimalizációt a képeire, vagy a ShortPixel-el vagy a WP Fastest Cache beépített eszközével. Amennyiben nem veszi meg a cache bővítmény prémium kiadását és keveseb, mint 100 kép van a WordPressben, akkor javaslom a ShortPixel-t.

Ha egyébként is beruhát a WP Fastest Cache megvásárlására, akkor azt. A képeket egyébként WebP formátumra konvertálja. Amelyik böngésző támogatja, neki ez a WebP lesz letöltve, mindenki másnak a JPG. Ez az opció kikapcsolható úgy, hogy a WordPress wp-config.php fájljába be kell illeszteni ezt a kódot, s ekkor marad minden kép az eredeti formátumában:

define('WPFC_DISABLE_WEBP', true );

Kisebb tárhely esetén ajánlom, hogy kapcsolja ki, mert minden képből duplán lesz 1-1 verzió. Az eredeti, az optimalizált és a WebP. Ha fontosabb a sebesség, mint a tárhely használtsága, akkor maradjon a WebP használatánál.


HTTPS használata

Korábban már a cPanelen telepítette az SSL tanúsítványt, de ezzel a weboldal még nem áll át magától HTTPS csatornára, azt a WordPressben is be kell állítani. Az admin felületen a Beállítások / Általános menüpont alatt a WordPress és a Honlap URL címinél írja á a http-t https-re. Illetve szükség esetén telepítsen egy plugint, ami minden beérkező kérést átirányít a titkosított címre.

Ilyen bővítmény például az Easy HTTPS Redirection. Telepítse, kapcsolja be, működik. És így már a HTTP/2 protokoll is életbe lép. De erről már beszéltünk eleget.


Tiltások a .htaccess használatával

WordPress egy igen elterjedt rendszer, mint az operációs rendszerek között a Windows, így igencsak szeretik támadni. Érdemes 1-1 védelmet a .htaccess fájba is bele szerkeszteni. Ilyen például az általános SPAM/DOS robotok nagy kedvenc célpontja az xmlrpc.php. Van több is, de ha ezt hozzáadja, már többet tett, mint bárki más. A példa kódot a fájl végére illessze be:

# Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
Order deny,allow
deny from all
</Files>


Gyakorlatilag már ezzel is készen vagyunk

Emlékszik még a saját oldalának kezdeti mért eredményére? Most mérje le őket újra a fenti két mérő oldal használatával. Javult? Örülünk? Akkor jó. :)


Cloudflare CDN

Több, mint valószínű, hogy fog az optimalizáció során azzal a kifejezéssel találkozni, hogy CDN, hogy használjon CDN-t. Na de mi az a CDN? A CDN (Content Delivery Network vagy Content Distribution Network) kifejezés, magyarul tartalomelosztó hálózatnak lehet nevezni.

Akkor lesz rá szüksége, ha a fentiek eredményén tovább szeretne javítani, amikor például a GTmetrix, vagy egyéb mérő oldalak azt javasolják, hogy használjon CDN-t. Hozzá kell tegyem persze, hogy ezek a mérő oldalak külföldről futnak, így biztos, hogy mondani fogják. Mert a CDN lényege az, hogy az Ön tárhelye itt van Magyarországon, egy látogató pedig Japánból nézi a honlapját, akkor innen el kell oda juttatni az adatokat. A CDN hálózatába kötött cache szerverek röviden úgy működnek, hogy a statikus tartalmakat (CSS,JS,Képek) átmásolja a saját szervereire, így a látogatóhoz legközelebbi gépről tölti be neki, nem pedig Magyarországról. És akkor nagyon leegyszerűsítettem. Így mivel az adatnak rövidebb utat kell megtenni, gyorsabb lesz. Kevesebb forgalom jut el az eredeti szerverre, ami így tehermentesül, az is gyorsabb lesz.

Ebből is van sok féle, egyre elterjedtebbek, olcsóbbak és van olyan is, amelyik ingyenes opcióval is rendelkezik. Én most röviden a Cloudflare megoldásáról írok. CloudFlare cég nagyon összetett szolgáltatáscsomagot nyújt, és amiért mi örülünk, hogy a legfontosabb dolgokat ingyen biztosítja.

Ez a gyorsítás már önmagában is hasznos, de ezen felül a Cloudflare védelmet tud nyújtani DDOS támadásokkal szemben. És arra is ad megoldást, ha például leáll a forrás szerver, a tárhely, akkor képes a weboldalunkat statikus oldalként eltárolni, ezáltal az elmentett statikus oldalt küldi el a látogatóknak. Persze ilyenkor sok funkció nem mindig működik, de biztos, hogy ez is jobb, mintha semmi nem töltene be.

A CDN fül alatt összekötheti a Cloudflare CDN-t. Előbb regisztráljon a szolgáltató oldalán, kövesse az ottani lépéseket, cserélje ki a domain címének a névszerverét az ott kapott névszerverre, aktiválja a szolgáltatást, majd adja meg az adott API kulcsot a WP Fastest Cache-nek, majd kövesse az általa adott utasításokat, amiket a Cloudflare felületén kell elvégeznie.

Vegye figyelembe, hogy innentől kezdve a Cloudflare adja a névszerver kiszolgálást, azaz, ha nálunk van a szolgáltatása, se a vCRM rendszerünkben sem a cPanel felületén nem tudja tovább kezelni a domain zóna rekordjait. Ez nem probléma, csak tudja, hogy ha kell egy új rekord, vagy módosítani mondjuk a levelező szerver MX rekordját, akkor a Cloudflare admin felületén tudja azt elvégezni.
cdn
Ugyan ez vonatkozik az SSL tanúsítványra. Ha kicseréli a névszerver és átáll Cloudflarre, onnantól kezdve, ha van saját tanúsítványa, akkor oda kell telepíteni, vagy használhatja az általuk adott ingyenes megoldást, a cPaneles AutoSSL nem fog működni.

A Cloudflare-en való regisztráció, a névszerver cseréje, annak aktiválása és az API-val való összekapcsolás pár perces munka, de mire befrissül, akár 24-48 óra is lehet, így az eredmények csak napokkal később mérhetők.

Érdemes használni, mert azon ritka szolgáltatók egyike, akiknek van BUDAPEST cache szervere, így akkor is élvezheti minden előnyét, ha legfőbb látogatói hazánkból keresik fel a weboldalát.

A demo oldal eredményeit megtekinthetik itt a Google felületén , valamint a GTmetrixen .

Iratkozzon fel hírlevelünkre Adja meg nevét és e-mail címét.