WordPress weboldal gyorsítása és optimalizálása
A WordPress az egyik legnépszerűbb és legsokoldalúbb tartalomkezelő rendszer (CMS). Alapértelmezett beállításban azonban nem mindig a leggyorsabb, különösen, ha az oldalad sok látogatót kap, nagy mennyiségű médiát tartalmaz, vagy funkciókban gazdag sablont használ. 2010 óta a Google a keresési rangsorolásnál figyelembe veszi az oldalbetöltési sebességet is, ami azt jelenti, hogy egy lassú oldal ronthatja a felhasználói élményt és a keresési eredményekben való láthatóságot is.
A jó hír? A WordPress elég rugalmas ahhoz, hogy sokféleképpen optimalizálható legyen, így jelentősen csökkentheted a betöltési időket. Az előrehaladásod méréséhez minden változtatás után futtathatsz sebességteszteket online eszközökkel, például:
Google PageSpeed Insights – Kiváló kezdőknek, könnyen követhető optimalizálási javaslatokkal.
GTmetrix – Teljesítménypontszámokat és gyakorlati tippeket is ad.
Pingdom – Részletes betöltési idő bontást ad, de kicsit több technikai tudást igényelhet.
Ezek az eszközök kiemelik, mely részek lassítják az oldaladat, így könnyebb eldönteni, mit érdemes először javítani.
Az alábbiakban bemutatunk néhány gyakorlati lépést, amelyekkel gyorsabbá teheted a WordPress oldaladat – érdemes már a weboldal készítésének kezdetétől alkalmazni ezeket a tippeket.
MEGJEGYZÉS: Minden módosítás előtt készíts biztonsági mentést az oldaladról.
Tippek a weboldal felgyorsításához
A megfelelő sablon kiválasztása
A WordPress sablonod nem csak a kinézetről szól – közvetlen hatással van arra, milyen gyorsan töltődik be az oldalad. Ha nagy forgalmú blogot vagy tartalomközpontú oldalt tervezel, érdemes időt szánni a kutatásra és tesztelésre. Egy jól optimalizált, könnyű sablon jelentősen javíthatja a felhasználói élményt és a keresési rangsorolást is.
Az aranyszabály sablonválasztáskor, hogy a dizájnt igazítsd a tartalomhoz. Először döntsd el, mire fókuszál majd a weboldalad, és milyen típusú tartalmat teszel közzé. Csak ezután válassz olyan sablont, amely támogatja ezeket a célokat.
Bár a legtöbb WordPress sablon széleskörű testreszabást tesz lehetővé, a rosszul megírt opciók később problémákat okozhatnak, különösen, ha később sablont váltasz. Egyes látványos dizájnok elsőre jól néznek ki, de felesleges funkciókkal vannak tele, amelyek lelassítják az oldaladat.
Íme néhány tipp, amelyek segítenek stílusos és gyors sablont választani:
Tartsd egyszerűen – Kerüld a túl bonyolult elrendezéseket és nehéz animációkat.
Legyen reszponzív – Olyan sablont válassz, amely zökkenőmentesen alkalmazkodik mobil, tablet és asztali képernyőkhöz.
Ellenőrizd a bővítmény-kompatibilitást – Győződj meg róla, hogy jól működik a szükséges, jól értékelt bővítményekkel és a WordPress aktuális verziójával.
Értékeld az oldalkészítőket – A beépített oldalkészítővel rendelkező sablonok hasznosak lehetnek, de extra terhet jelenthetnek. Teszteld a teljesítményt, mielőtt elköteleződsz.
Keress SEO-barát kódolást – A tiszta, szemantikus kódszerkezet segíti a keresőmotorokat az oldalad jobb megértésében.
Végül a legtöbb sablonfejlesztő élő demókat kínál a termékeiről. Használd ki ezt, és futtasd a demó oldalt sebességtesztelő eszközökön, mielőtt vásárolsz. Így reális képet kapsz arról, hogyan teljesít a sablon valós körülmények között.
Képek optimalizálása
A nagy, tömörítetlen képek a lassan betöltődő oldalak egyik leggyakoribb okai. Számos eszköz, bővítmény és online szolgáltatás létezik, amelyek jelentősen csökkenthetik a fájlméretet anélkül, hogy észrevehetően romlana a minőség.
Ha automatizált megoldást szeretnél, olyan bővítmények, mint az EWWW Image Optimizer és mások közvetlenül a WordPressen belül kezelik a tömörítést. Az EWWW Image Optimizer saját funkciókkal, rugalmas beállításokkal és tömeges optimalizálással rendelkezik.
Megjegyzés: A bővítmény működéséhez szükséges a exec() függvény engedélyezése.
Telepítés és aktiválás után menj a Média > Tömeges optimalizálás menüpontra:
Kattints a Nem optimalizált képek keresése gombra, hogy megtaláld az összes tömöríthető képet:
A keresés után kattints a Optimalizálás indítása gombra a képek tömeges méretcsökkentéséhez:
A bővítményt beállíthatod úgy is, hogy ütemezett optimalizálásokat futtasson az „Advanced Settings” menüből.
Fontos tudni:
A tömeges optimalizálás ideiglenesen sok szervererőforrást használhat, és elérheti a CPU-korlátokat.
A magasabb tömörítési szint kisebb fájlméretet eredményez, de az agresszív tömörítés látható minőségromlást okozhat, különösen képekben gazdag oldalaknál.
Bár a bővítmények gyorsak és kényelmesek, nem mindig érik el a legjobb tömörítési arányt. A legjobb eredmény érdekében képeidet feltöltés előtt manuálisan is feldolgozhatod online eszközökkel, például:
TinyPNG – Kiváló PNG- és JPEG-tömörítéshez.
Compressor.io – Több formátummal működik, és erős optimalizációt kínál.
Igen, a manuális tömörítés több időt vesz igénybe, de gyakran élesebb, könnyebb képeket eredményez, így a látogatók jobb élményt kapnak a minőség feláldozása nélkül.
Gyorsítótárazó bővítmények
A gyorsítótárazó bővítmények a leghatékonyabb módszerek közé tartoznak egy WordPress weboldal felgyorsítására. Azáltal, hogy előre generált oldalverziókat tárolnak és szolgálnak ki, csökkentik a szerver terhelését minden látogatónál, így drámaian javítják a betöltési időket.
A legnépszerűbb és legmegbízhatóbb lehetőségek közé tartoznak:
Böngésző gyorsítótárazás
A böngésző gyorsítótárazás arra utasítja a látogatók böngészőit, hogy bizonyos weboldalfájlokat, például képeket, stíluslapokat és szkripteket, egy meghatározott ideig helyben tároljanak. Így amikor visszatérnek az oldaladra, a böngészőjük ezeket a fájlokat a saját eszközről tölti be, nem kell újra letölteniük. Ez csökkenti a szerverterhelést, gyorsítja a visszatérő látogatásokat, és javítja az általános böngészési élményt.
A böngésző gyorsítótárazást többféleképpen is beállíthatod:
1. W3 Total Cache használata
Ha már használod a W3 Total Cache bővítményt, a böngésző gyorsítótárazás engedélyezése egyszerű:
A WordPress vezérlőpultban menj a Performance > Browser Cache menüpontra.
Jelöld be az olyan opciókat, mint például:
Last-Modified fejléc beállítása.
Expires fejléc beállítása.
HTTP (gzip) tömörítés engedélyezése.
Mentsd el a beállításokat:
A W3TC ezután automatikusan hozzáadja a szükséges szabályokat a .htaccess fájlodhoz.
2. Szabályok manuális hozzáadása
Ha nem szeretnél bővítményt használni, közvetlenül a .htaccess fájl szerkesztésével is engedélyezheted a böngésző gyorsítótárazást (Apache szervereknél). Az alábbi kód például különböző fájltípusokhoz állít be „lejárati” időt:
ExpiresActive on
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType image/x-icon "access plus 2 weeks"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType audio/x-wav "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType video/x-ms-wmv "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
ExpiresByType application/javascript "access plus 2 weeks"
A beállított időértékeket módosíthatod attól függően, milyen gyakran frissíted a fájlokat.
Tippek weboldal optimalizálásához
Főoldal optimalizálása
A főoldal az első, amit a látogatók látnak, és gyakran a legnehezebb oldal az oldalon. Egy jól optimalizált főoldal nemcsak jó első benyomást kelt, hanem gyorsabban is töltődik be, így a látogatók tovább maradnak.
A főoldal sebességének egyik kulcstényezője a HTTP-kérések száma. Minden kép, szkript, stílus vagy widget külön kérést jelent a szerver felé. Minél kevesebb kérés szükséges, annál gyorsabban jelenik meg az oldalad.
Eszközök a kérések csökkentésére és a betöltési idő javítására
WP Asset Clean Up
Ez a bővítmény átvizsgálja az oldalakat, és azonosítja a felesleges szkripteket és stílusokat, megakadályozva, hogy ott töltődjenek be, ahol nincs rájuk szükség. Az oldal HTML-kódját is minimalizálhatja a tisztább, könnyebb oldalakért.JavaScript to Footer
A JavaScript fájlokat az oldal fejléce helyett a láblécbe helyezi, így nem késleltetik az oldal elsődleges tartalmának megjelenését. Ez biztosítja, hogy a látható részek előbb betöltődjenek, javítva a látszólagos sebességet.
Legjobb gyakorlatok egy gyors főoldalhoz
Kerüld a túl sok widgetet – Például a közösségi megosztás gombokat inkább az egyes blogbejegyzésekre helyezd, ne a főoldalra.
Csak kivonatokat jeleníts meg, ne teljes bejegyzéseket – Ez csökkenti a betöltendő tartalom mennyiségét, és átláthatóbbá teszi az oldalt.
Korlátozd a megjelenített bejegyzések számát – Tartsd körülbelül öt legfrissebb bejegyzésnél az optimális sebesség és olvashatóság érdekében.
A renderelést blokkoló JavaScript és CSS javítása
Ha az oldaladat a Google PageSpeed Insights eszközzel teszteled, ilyen figyelmeztetést láthatsz:
"A renderelést blokkoló JavaScript és CSS eltávolítása a hajtás feletti tartalomból"
Ez azt jelenti, hogy bizonyos JavaScript vagy CSS fájlok késleltetik a látható (hajtás feletti) tartalom megjelenítését. Egyszerűen fogalmazva: a látogatók böngészőjének meg kell várnia ezeknek a fájloknak a betöltését, mielőtt megjeleníthetné az oldal tartalmát, ami lassítja a betöltést.
Megoldás W3 Total Cache (W3TC) használatával
Ezt úgy javíthatod, ha módosítod a Minify beállításokat a W3 Total Cache-ben:
Menj a Performance > General Settings menüpontra a WordPress vezérlőpultban.
A Minify szekcióban állítsd a Minify módotKézi értékre, majd mentsd el a változtatásokat:
Ezután nyissa meg a Teljesítmény > Minify menüt, és győződjön meg róla, hogy a JavaScript minify beállítások megfelelnek az ajánlott konfigurációnak:
Adja hozzá a Google PageSpeed által jelzett JavaScript fájl URL-eket a JS fájlkezelés szekcióhoz:
Ismételje meg a folyamatot a CSS fájloknál is – adja hozzá a jelzett CSS URL-eket a CSS fájlkezelés szekcióhoz:
Miután ezzel végzett, tesztelje újra webhelyét a PageSpeed Insights-ban. Ha minden helyesen van beállítva, az oldalblokkoló figyelmeztetésnek el kell tűnnie.
Alternatíva: Autoptimize bővítmény
Ha egyszerűbb eszközt szeretne, az Autoptimize egy másik kiváló lehetőség a renderelést blokkoló erőforrások csökkentésére. Az alábbiakat tudja:
JavaScript és CSS fájlok egyesítése és tömörítése
CSS és JS áthelyezése a betöltési sorrend javításához
HTML tömörítése a könnyebb oldalakért
Együttműködik olyan gyorsítótárazó bővítményekkel, mint a WP Super Cache a még jobb eredményekért.
Az Autoptimize fő beállításai:
JavaScript beállítások – Több JS fájl egyesítése egybe a kérések számának csökkentéséhez
CSS beállítások – Kritikus CSS inline elhelyezése, kis képek közvetlen beágyazása a CSS-be és egyebek
HTML beállítások – HTML tömörítése, opcionálisan a megjegyzések megtartásával
CDN beállítások – CDN alap URL beállítása a statikus fájlok gyorsabb betöltéséhez
Képek fül – Képek automatikus tömörítése és optimalizálása
Extra / További optimalizálás – További haladó beállítások tapasztalt felhasználóknak.
Az összes funkció eléréséhez:
Lépjen a Beállítások > Autoptimize > kattintson a Haladó beállítások megjelenítése gombra:
Állítsa be az opciókat a webhely igényei szerint:
Kattintson a Változtatások mentése és gyorsítótár ürítése gombra az optimalizálások alkalmazásához:
Hotlink védelem engedélyezése
Ha egy másik weboldal közvetlenül hivatkozik egy, az Ön szerverén tárolt képre (például úgy jeleníti meg az Ön képét a saját oldalán, hogy azt nem ő tárolja), ezt hotlinkelésnek nevezik.
Ez ártalmatlannak tűnhet, de minden alkalommal, amikor az ő látogatóik betöltik azt a képet, az Ön szervere dolgozik, és az Ön sávszélességét használja, ami lassítja az oldalát és növeli a tárhely költségeit.
A legegyszerűbb módja a hotlinkelés megakadályozásának, ha engedélyezi a hotlink védelmet a cPanelben. Ezt a Hotlink védelem menüből teheti meg:
Bekapcsolás után más weboldalak már nem tudják közvetlenül a szerveredről betölteni a képeidet, így véded az erőforrásaidat, és gyors marad az oldalad a látogatók számára.
Adatbázis optimalizálása
Idővel a WordPress adatbázisodban felesleges adatok halmozódhatnak fel, például régi verziók, spam hozzászólások és bővítményekből visszamaradt beállítások, amelyek lassíthatják a weboldalad.
Alapértelmezés szerint a WordPress 11 alapvető táblát használ, de a legtöbb oldalon további táblákat hoznak létre a bővítmények és sablonok. A rendszeres adatbázis-optimalizálás segít tisztán, hatékonyan és gyorsan tartani a rendszert.
Így optimalizáld a WordPress adatbázisodat:
Kövess egy adatbázis-optimalizálási útmutatót, hogy csak a biztonságosan törölhető elemeket távolítsd el
Használj speciális bővítményt a gyors és biztonságos optimalizáláshoz, például:
WP-Optimize – Közvetlen SQL-lekérdezéseket futtat a tisztításhoz (gyors, de árva adatokat hagyhat maga után).
Optimize Database after Deleting Revisions – A bejegyzésverziók tisztítására fókuszál.
WP-Sweep – A WordPress hivatalos törlési funkcióit használja, így csökkenti az árva adatok kockázatát.
WP-DB Manager – Optimalizálási és biztonsági mentési funkciókat kínál.
A WordPress weboldalad teljesítményének becslése
A bővítmények extra funkciókkal és testreszabási lehetőségekkel bővítik a WordPress oldaladat. Néhány bővítmény azonban negatívan befolyásolhatja a teljesítményt, ha túl sok CPU-t és I/O erőforrást használ.
A hatékony működés érdekében elengedhetetlen, hogy mérd a bővítmények és sablonok hatását a weboldaladra.
1. lépés – Erőforrás-használat elemzése
Használd a Code Profiler bővítményt, hogy PHP szinten vizsgáld meg a weboldaladat. Világos, részletes jelentéseket ad grafikonokkal és táblázatokkal, amelyek megmutatják:
Mely bővítmények vagy sablonok lassítják az oldaladat;
Azokat a PHP-szkripteket, osztályokat, metódusokat és függvényeket, amelyek a legtöbb erőforrást használják.
2. lépés – Bővítmények betöltésének szabályozása
Telepítsd a Plugin Organizer bővítményt, hogy:
Bizonyos bővítményeket letilthatsz kiválasztott oldalakon vagy bejegyzéseken
Megváltoztathatod a bővítmények betöltési sorrendjét
Javítsd a teljesítményt azzal, hogy csak a szükséges bővítmények futnak ott, ahol tényleg szükség van rájuk.
3. lépés – Az általános weboldal-optimalizáció ellenőrzése
A fenti fejlesztések bevezetése után használd a GTmetrix for WordPress bővítményt az optimalizációs pontszámod mérésére. Ez az eszköz értékeli a weboldalad sebességét és teljesítményét, világos mérőszámokat adva az előrehaladás követéséhez.