WebFusion

„Hogyan csökkenthetném le WordPress weboldalam betöltődési idejét?”

Ez az egyik leggyakrabban ismételt kérdés a Földön, rögtön a „Hogyan legyek gazdag?” és a „Mit tehetnék kopaszodás ellen?” után.

Sokan azt hiszik, hogy a Wordpress egy eredendően lomha monstrum, ami már csak a puszta létezése okán is lassú. Ez ugyan nem állja meg a helyét, viszont a rossz fejlesztői szokások beárnyékolják az egyébként jól optimalizálható rendszer jóhírnevét.

A következő rövid cikkben hoztunk nektek 5 pontot, amiket minden esetben érdemes betartani, ha WordPress oldal üzemeltetésére adjuk a fejünk.

Lássunk neki!

Optimalizáljuk a médiafájlokat

Gyakran találkozunk azzal a hibával, hogy a weboldalak indokolatlanul nagy képeket használnak, lassítva ezzel az oldal betöltődését. Általános ökölszabály, hogy ne töltsük fel a képet a szükségesnél nagyobb méretben – ha a képed a dizájnban 800 pixel szélesen jelenik meg, felesleges 3000 pixeles változatot feltölteni.

Gyakran elkövetett hibák közé tartozik, hogy a szerkesztők a képeket minden méretezés nélkül feltöltik, függetlenül attól, hogy az adott kép a dizájnban mekkorában jelenik meg.

TIPPA Beállítások / Média / Képméretek menüpontban állítsd be azt a méretet, ami a sablonodnak megfelelő, a WordPress automatikusan elkészíti a feltöltött képek kisebb változatait.

Tömörítsük a képeket

Sok esetben tömöríthetők úgy a képek, hogy az emberi szem nem képes észrevenni a minőségromlást, viszont esetenként ugrásszerű – akár ~60% körüli – méretcsökkenést is elérhetünk.

Legjobb online eszköz erre az Optimizilla, ahol tömegesen feltölthetők a képek, majd a rendszer automatikusan elkészíti a legoptimálisabb kompromisszumot a képméret és képminőség között.

Szabadon állíthatod a kép színtelitettségét, mellyel újabb százalékokat és kilobájtokat tudsz lefaragni a kép méretéből. Külön segítség, hogy a képen látható csúszka segítségével tudod ellenőrizni, hogy az eredeti képhez képest (bal oldalt) keletkezett-e látható minőségromlás. Kiváló eszköz!

Ökölszabály az is, hogy mindenhol a megfelelő képformátumot használjuk: ahol nincs átlátszóság, nem érdemes PNG-t használni – válasszunk JPG-t vagy WebP-t. Ahol megoldható, használjunk SVG vektoros képeket az ikonokhoz és illusztrációkhoz – ezek fájlmérete töredéke a raszteres képeknek, és bármilyen felbontáson élesek maradnak.

WebP formátum

A WebP egy modern képformátum, amelyet a Google fejlesztett ki. Azonos vizuális minőség mellett 25-35%-kal kisebb fájlméretet eredményez a JPG-hez képest, átlátszóság esetén pedig a PNG-t is veri. Minden modern böngésző támogatja.

A WordPress az 5.8-as verzió óta alapértelmezetten támogatja a WebP képformátumot, ami azt jelenti, hogy a WebP fájlokat ugyanúgy feltöltheted a médiatárba és használhatod a bejegyzéseidben, mint a JPEG vagy PNG képeket, anélkül, hogy külön bővítményt kellene telepítened.

Lazy loading - lusta betöltődés

A lazy loading (lusta betöltés) azt jelenti, hogy a képek csak akkor töltődnek be, amikor a látogató a közelükbe görget. Ezzel drámaian csökken a kezdeti betöltési idő, hiszen csak annyi tartalom tölt be rögtön az elején, amennyi feltétlen szükséges.

INFÓA WordPress 5.5 óta a lazy loading alapértelmezetten be van kapcsolva minden képre. Ha régebbi témaverziót vagy bővítményt használsz, ellenőrizd, hogy a loading="lazy" attribútum jelen van-e a képeken.

Gyorsítótár használata

Amikor egy látogató megnyitja a WordPress oldaladat, a motorháztető alatt a szerver elvégez egy sor műveletet: lekérdezi az adatbázist, lefuttatja a PHP kódot, összerakja a HTML-t, majd elküldi a böngészőnek. Ez minden egyes látogatásnál megtörténik – és ez az, ami lasssá teszi a dinamikus oldalakat.

A gyorsítótárazás (caching) lényege, hogy ez a folyamat csak egyszer fut le, és az eredmény – egy statikus HTML fájl – elmentésre kerül. A következő látogató már ezt a kész változatot kapja meg, adatbázis-lekérdezés és PHP futtatás nélkül. A különbség akár 10-szeres sebességnövekedést is jelenthet.

Kiváló cache megoldás a W3 Total Cache. Telepítés előtt inaktiváld az esetlegesen futó egyéb cache pluginokat, elkerülendő az ütközéseket.

TELEPÍTÉSMenj a Bővítmények > Új hozzáadása menüpontra a WordPress admin felületen. Keresd meg a „W3 Total Cache" bővítményt, kattints a „Telepítés", majd az „Aktiválás" gombra. Első indítás után a beállítások varázslója végigvezet a konfiguráción.

Legfontosabb beállítások, amelyeket mindenképp engedélyezz:

• Page Cache: engedélyezd az oldal gyorsítótárazást – ahogy ezt már írtuk, ez a leghatékonyabb beállítás, a dinamikus PHP oldalakból egy statikus HTML fájlt készít

• Minify: CSS, JS és HTML fájlok tömörítése és összevonása – kevesebb és kisebb fájlt kell letöltenie a böngészőnek.

• Browser Cache: Utasítja a böngészőt, hogy tárolja el a statikus fájlokat, így a visszatérő látogatóknál azonnal betöltődnek.

• CDN integráció: A statikus fájlok a látogatóhoz legközelebbi szerverről töltődnek be.

• Database Cache: Adatbázis-lekérdezések gyorsítótárazása – nagy forgalmú weboldalaknál és webshopokban különösen hatékony.

Ha a W3 Total Cache konfigurálása túl bonyolultnak tűnik, érdemes megfontolni a WP Rocket fizetős bővítményt. Ez jelenleg a legtöbbet ajánlott WordPress cache megoldás, telepítés után azonnal működik, és a legtöbb beállítást automatikusan elvégzi helyetted. Éves díja kb. 59 dollár, ami nem olcsó, de egy lassú oldal elveszített bevételeihez képest ez eltörül.

Bővítmények

Tudom-tudom, szinte mindenre van már előre elkészített bővítmény, és nagyon egyszerű megoldásnak tűnhet minden felmerülő problémát külön pluginnal megoldani. De mint mindennel, ezzel is csínyán kell bánni – könnyen weboldal-lassuláshoz és egyéb problémákhoz vezethetnek.

Nem arról van szó, hogy indokolt esetben ne használjuk őket, de ne essünk át a ló túloldalára. Gyakran látom azt, hogy a fejlesztők a legapróbb, pár órás fejlesztést igénylő problémákat is valamilyen csodaplugin használatával oldják meg, amitől a kész termék lassú lesz, tele biztonsági résekkel.

Mi a probléma az ilyen szemlélettel?

• Minden bővítmény extra CSS-t, JS-t és adatbázis-lekérdezéseket ad az oldalhoz,
• a rosszul karbantartott pluginek a legtöbb WordPress feltörés belépési pontjai,
• a különböző fejlesztőktől származó kódok ütközhetnek egymással,
• minden plugin saját táblákat hoz létre, amelyek törlés után sem mindig tűnnek el, adatbázisszemét halmozódhat fel

Félreértés ne essék, semmi baj nincs a pluginok használatával, de érdemes mérlegelni, hogy vajon szükséges-e minden szöget egy külön-külön bővítménnyel beverni.

Vizsgáld felül, kell-e!

Érdemes végigmenni az összes telepített bővítményen, és feltenni a kérdést: „Valóban szükségem van erre?". Ha nem, irgalom nélkül távolítsd el! Az inaktív (de telepített) pluginek is biztonsági kockázatot jelentenek – törölni kell őket, nem csak kikapcsolni.

PRO TIPP!
A Query Monitor plugin megmutatja, hogy az egyes oldalletöltések során melyik bővítmény mennyi adatbázis-lekérdezést végez és mennyi ideig tart. Ezzel pontosan beazonosíthatók a leglassabb pluginek.

Adatbázis(ok) karbantartása

A bővítményekről szóló bekezdésben már szó volt az adatbázisszemét-felhalmozódásról, de mit is jelent ez?

Ahogy már fentebb említettük, a bővítmények a működésükhöz létrehoznak adatbázis táblákat, oszlopokat, sorokat, amik sajnos nem minden esetben törlődnek a plugin eltávolításakor.

Ha össze-vissza telepítgetjük a bővítményeket, akkor jelentős mennyiségű szemét gyűlik össze, ami pedig akár mérhető teljesítményromláshoz is vezethet, tehát, ha az oldalunk optimalizálásán dolgozunk, célszerű ezt a megfelelő eszközök használatával kiküszöbölni.

Ajánlott eszközA WP Optimize plugin egyetlen kattintással elvégzi a teljes adatbázis-tisztítást, és ütemezetten automatikusan is futtatható. Emellett az adatbázis táblák töredezettségmentesítését is elvégzi, ami szintén gyorsítja a lekérdezéseket.

Az adatbázis karbantartása nem egyszeri feladat – érdemes havonta egyszer elvégezni, különösen aktívan szerkesztett oldalakon és webshopokban, ahol folyamatosan keletkeznek új adatok.

Válasszunk jó tárhelyszolgáltatót

Ha már a képek, és egyéb médiafájlok megfelelő méretűek, a cache be van kapcsolva, a szükségtelen plugin-októl is megszabadultunk, nincs adatbázisszemét, viszont a weboldalunk még mindig lassú, akkor érdemes egyet hátralépni, és számításba venni azt, hogy egy komolyabb tárhelykonstrukciót válasszunk. Ma már nagyon jó SSD tárhelyek vannak, nagyon jó válaszidőkkel, ha ez a kérdés felmerül, érdemes szakember véleményét kérni.

Mire figyeljA legolcsóbb tárhely ritkán a legjobb megoldás. Egy lassú tárhely miatt elveszített látogatók és megrendelések sokszor többe kerülnek, mint a minőségi tárhely havi díja. Ha bizonytalan vagy, kérj szakember véleményt.