Sok oldalon sokféle praktikát írnak a WP alapú oldalak sebességének növelésére. Alább összeszedem a nekünk bevált gyakorlatot. Ha nem az első weboldalad építed, valószínűleg találsz majd ismert tippeket a listában, de remélem találsz néhány újat is. Egy gyorsabb weboldal nem csak a keresők organikus listáján visz előbbre, de jobb felhasználói élményt is nyújtasz vele az ügyfeleidnek.
Ha egyáltalán semmi fogalmad nincs arról amit csinálnod kellene, akkor légy óvatos: egy félresikerült módosítással elérhetetlenné válhat az oldal, vagy – jobb esetben – csak lassabb lesz mint előtte. Lesznek olyan javaslatok, amelyek végrehajtásához a webtárhelyedet üzemeltető cég rendszergazdájának a közreműködésére is szükség lesz.
A sebességérzés néha szubjektív, így érdemes internetes weboldal sebesség mérőket használni. Én az alábbi kettőt használom (mert mindkettő másban jó):
A Pagespeed esetében a cél: mobilon 70+, asztali gépen 95+ pont elérésre. A GTmetrix esetében a cél az „A” kategória, és 95+ pont megszerzése. Alább többször használni fogom a „kulcsszavak” kifejezést, amivel arra szeretnék utalni, hogy ezek a kulcsszavakat érdemes keresgélned az interneten.
1.) Válasszunk olyan szolgáltatót, aki gyors (SSD alapú) tárhelyet kínál. Tudom hogy ez közhely, de egy lassú, elavult szerveren hiába optimalizálod szét az oldalad, lesz egy plafon amit nem tudsz áttörni. Tehát inkább szánj rá egy kicsivel több pénzt, és olyan tárhelyet vásárolj, ahol tisztán SSD-n fut a weboldalad, és legalább 256MB memóriát adnak a fiókodhoz. (Az SSD-n és a memórián kívül ezer más dolog befolyásolhatja a sebességet. A lényeg, hogy tárhely és tárhely között nagy különbségek lehetnek.)
2.) Használd a legfrissebb WP verziót, sablon (templét) verziót és PHP verziót. Ha a sablonod nem támogatja a legfrissebb PHP verziót, akkor fontold meg a sablon cseréjét.
3.) Csak a valóban szükséges pluginokat telepítsd, és azokat is tartsd frissen. (Nincs nehéz dolgod – van automatikus frissítés.)
4.) A webszerver használjon HTTP/2-t. Nem sok szerver van már ahol nem így van, de egy kérdést megér. Könnyű ellenőrizni, csak írd be a weboldalad címét a keresőbe: https://tools.keycdn.com/http2-test Csak a tárhelyszolgáltatód tudja ezt módosítani.
5.) Használj gyors névszervereket! Az első byte megérkezésig számított időt („TTFB” = Time To First Byte) akár jelentősen befolyásolhatja egy kimaradozó, lassú névszerver. (Meg sok minden más is.) A jelenlegi névszervered (a feloldás) sebességét pl. itt is ellenőrizheted a „DNS Check” funkcióval: https://mxtoolbox.com/SuperTool.aspx Ha gyors a névszervered, akkor 20-25 msec alatt lesz a feloldás. Ha efölött van, akkor cselekedni kell, vegyél igénybe ingyenes, gyors névszervereket (a domain regisztrátorodnál tudod módosítani a névszervereid). Javasolt névszerver pl: Google DNS, Cloudflare, stb. Ha a TTFB 200ms alatt van, az jó, ha 200-500ms között, az átlagos, ha 500ms fölött, akkor munkád van vele. A teljes betöltési idő lehetőleg maradjon 1sec alatt, és az oldal teljes méreted 1MB alatt. A TTFB csökkentésében korlátozott a mozgástered. Ha nagyon magas és elfogytak az eszközeid, fontold meg a tárhely váltást.
6.) Tömörítsd a javascript és a CSS fájlokat. A legtöbb cache plugin tudja a tömörítést, mint pl a Total Cache, WP Super Cache, stb. (Nem az a lényeg hogy melyik plugint használod, hanem hogy értsd, hogy mit csinálsz vele.) Tömörítéskor kikerülnek a szóközök, kommentek, üres sorok. Kisebb fájl 7 gyorsabb betöltés. A kicsi (2-3kB-nál kisebb) CSS fájlokat inkább inline illesztesd be, ha van ilyen lehetőség. Kulcsszavaid: minification, minifying, JS compress, CSS compress
7.) Használj memória alapú cache-t a szerveren, mint pl: Redis, APC/APCu, Memcached (php-memcached), eAccelerator, PHP-Opcache (php-opcache), XCache stb. (Nem kell mindet egyszerre, mindegyik másra jó!) Ha nincs, kérd meg a tárhely üzemeltetőd hogy telepítse. (A Total Cache pluginnal könnyű megtalálni az optimálist.)
8.) Apache webszerver alá javaslom telepíteni a Google-féle Pagespeed modult. (mod_pagespeed) Ezt csak a webszervert üzemeltető rendszergazda tudja megcsinálni, ha teheted kérd meg rá. Számtalan kitűnő lehetőséget kínál: https://www.modpagespeed.com/ Érdemes globálisan kikapcsolva tartani, és a .htaccess fájlból be lehet kapcsolni a szükséges funkcióit: https://www.modpagespeed.com/doc/config_filters
Példakód a .htaccess-be:
<IfModule pagespeed_module>
ModPagespeed On
ModPagespeedRewriteLevel OptimizeForBandwidth
ModPagespeedEnableFilters collapse_whitespace,remove_comments,prioritize_critical_css,defer_javascript
</IfModule>9.) Használj korszerű formátumú, kis méretű képeket. Javaslom a webp vagy a jpg használatát, és egy átlag kép ne legyen 500kB-nál nagyobb. (Inkább kisebb.) Online konverter is van, pl: https://cloudconvert.com/webp-converter
10.) Ne felejtsd el méretezni és optimalizálni a képeket. (width=”xx” height=”xx”) A böngésző a képek betöltése előtt már elkezdi az oldal renderelését (felépítését). A képméretek megadása segíti a képi elemek méretének kijelölését. Ha nincsenek megadva méretek, lassítja a megjelenítést. A kevésbé fontos képeket (ha a sablon lehetővé teszi) ne is jelenítsd meg mobil nézetben.
11.) Ha nem standard fontokat használsz, akkor ne real-time betöltéskor illeszd beőket. Számtalan plugin képes letölteni egy könyvtárba, és onnan használni. (Pl. OGMF). Használj helyi fontokat!
12.) Ha nincs ellenérv, használj valamilyen CDN-t! (A Cloudflare-nek pl. van budapesti szervere is, mi is ezt használjuk.) A CDN használatának számos előnye van: a gyorsabb betöltés mellé kapsz DDOS védelmet, gyors névszervereket, és csökkented a webszerver terhelését. Vannak ingyenes szolgáltatók is, csak nyerhetsz vele.
13.) Kerüld a nagy külsős JS könyvtárak betöltését, mint pl a Facebook plugin, stb. Inkább tegyél ki egy linket, de ne ágyazd be. A CSS fájlok általánosságban az oldal tetején, a JS fájlok az oldal alján legyenek (ha nincs ellenérv). Több plugin is van ami ezt lehetővé teszi, a kulcsszavak: „async”, „defer”. (A kettő egy picit más, de bármelyik jobb mint a semmi.)
14.) Használj tömörítést! A legegyszerűbb a gzip vagy a deflate, a legjobb a Brotli. Itt tudod ellenőrizni, hogy tömörítés működik-e az oldaladon: https://www.giftofspeed.com/gzip-test
15.) Használd ki a böngésző gyorsítótárazását! A böngészőkben is vagy cache (gyorsítótár), ráadásul ezért semmit sem kell tenni, csak engedélyezni kell a használatát. A látogatók számára annál gyorsabb nincs is, mintha a saját gépükön van tárolva a file. Itt tudod precízen ellenőrizni fájltípusok szerint: https://www.giftofspeed.com/cache-checker/
A munka úgy zajlik, hogy módosítasz valamit, aztán a fenti sebességmérő eszközökkel megnézed, hogy jobb lett-e vagy rosszabb. Egy mérés nem mérés, mérj kettőt, és átlagold. Ha CDN-t használsz, akkor a reszelgetés idejére kapcsold ki, hogy a valós eredményt lásd. Remélem, segítettem. 🙂