Egy jól működő vállalkozás számára manapság már elengedhetetlen a minőségi online jelenlét. A kulcs a minőségi jelenléten van. Többek között beletartozik az igényesen megtervezett, jól működő honlap és/vagy webshop, közösségi média posztok és bizonyos esetekben az offline anyagok, mint brossúra, szórólap, plakátok. Korábban már írtam róla, hogy mi a SEO szerepe és miért fontos vállalkozásodnak, most pedig maradva a honlapok és a webshopok üzemeltetésénél annak alapjait járjuk körül, hogy azok látogatói számára miként járul hozzá az oldalgyorsaság a jó ügyfélélményhez.
Miért fontos a betöltési idő és mire való?
Napjaink legnépszerűbb honlap építő eszköze a WordPress, melyet a kisvállalkozóktól, a középvállalkozásokon át, már a nagyvállalatok is előszeretettel alkalmaznak. Alapvetően a WordPress gyors betöltési sebességet kínál. De bizonyos bővítmények, beállítások vagy nem megfelelően kiválasztott tárhely is lassíthatják azt.
Egy lassú oldal nagymértékben rombolja a pozitív ügyfélélményt. A hosszú betöltési idő pedig kritikus szintre emeli a kilépési arányt és csökkenti a látogatóból vásárlóvá való átalakítás esélyeit. Mindemellett SEO szempontból is fontos, hiszen különféle keresőmotorok, mint a Google, fontos tényezőként kezeli a találati sorrend felállításánál az oldal gyorsaságát.
Az oldalbetöltési idő esetében legtöbbször az oldaltulajdonosok egyetlen, másodpercekben mérhető számra gondolnak. A valóságban ez sokkal többet rejt magában. Ha a Te eszközeiden úgy érzékeled gyorsan betöltenek oldalaid, még nem biztos, hogy minden felhasználó tapasztalja majd ugyanezt. Nézzünk pár egyszerű példát, hogy többek között mik azok, amelyek befolyásolhatják a betöltési sebességet:
- Már elmentett böngésző gyorsító tárak: még akkor is előfordulhat, hogy oldalad gyorsítótárból tölt be, ha nem használsz ezzel kapcsolatosan összefüggő bővítményeket.
- Különböző eszközökről való megtekintés: az oldalad az adott készülékének képességétől függően eltérő időben tölthet be. A mezei telefon nem fog olyan gyorsaságot produkál, mint egy csúcskategóriás készülék.
- Internetkapcsolat: a betöltés nagyban függ az internet kapcsolattól is. Egy vezetékes hálózat valószínűleg mindig gyorsabb lesz, mint a WiFi hálózat.
- Lokáció: meglepő lehet, de a földrajzi hely is befolyásolhatja oldalad betöltését és így észrevehetően más betöltési sebességet tapasztalhatsz hazai nagyvárosokban, mint egy vidéki kisfaluban, vagy külföldön.
Nincsen kőbe vésve az optimális betöltési idő. Vagy mégis?
A sebességmérő eszközök -amiről később még lesz szó- ezek miatt időnként pontatlanok lehetnek, de mindenképpen hasznos iránymutatást ad a fejlesztés során. Arra, hogy mi számít gyors és optimális betöltésnek nincsen szentírás, de érdemes arra törekedni, hogy a betöltési idő 3–5 másodperc alatt legyen. Ahhoz, hogy ezt elérhessük nagyon sok tényezőt figyelembe kell venni és még akkor sem biztos, hogy minden betöltésnél sikerülni fog tartanunk magunkat ehhez az előirányzathoz.
Számos előirányzat van, így például a Google mobiltelefonok esetében 3 másodpercnél rövidebb betöltési időt javasol, a Pingdom szerint „amint az oldalbetöltési idő meghaladja a 3 másodpercet, a kilépési arány drasztikusan megnő”, amit a Section.io mérései is megerősítenek.
A Google SEO szempontból is jutalmazza azokat a weboldalakat, amelyek jó felhasználói élményt nyújtanak. Ehhez figyelembe veszi az oldalbetöltési időt és a mobilbarát kialakítást is a keresési találatok rangsorolásakor. Az átlagos weboldal betöltési ideje 2,5 másodperc asztali gépeken és 8,6 másodperc mobil eszközökön.
Gyorsaságmérés a műszerfalon
A fejlesztéshez és a gyorsításhoz tökéletesen ismerned kell a saját WordPress weboldaladat és meg kell értened annak betöltési idejét. Az elemzéshez két online eszköz is rendelkezésünkre áll: az első a Google Page Speed Insights, ami emberibb nyelven ad gyors és átfogó elemzést, a második a GTmetrix, ami a fejlesztők számára részletesebb információkat nyújt.
Mi előszeretettel használjuk a Google Site Kit bővítményét, ami a WordPress vezérlőpulton belül a menüben külön pontban négy Google szolgáltatást ötvöz. Egy helyen jeleníti meg a Google Search Console, Analytics, Page Spees Insights és az AdSense adatait.
A manuális Google Page Speed és a MTmetrix általi elemzéshez meg kell adnod weboldalad URL címét és az elemzés gombra kattintani. Azonban a GTmetrix esetében az elemzés megtekintéséhez regisztrációhoz van szükség. Ezekben az eredményekben könnyedén el lehet veszni, de ne koncentrálj túlságosan az absztrakt pontszámokra, bár ezek a pontszámok hasznosak lehetnek problémák diagnosztizálásához. Az egyetlen valóban fontos dolog a weboldalad tényleges oldalbetöltési ideje.
Ha van kedved a saját magad kísérletezni, kicsit tanulmányozni, mi történik a háttérben, amikor az oldalad betöltődik, akkor a GTmetrix elemzései között ajánlott megnézni a vízesés elemzést, ami minden egyes HTTP-kérést megmutat az oldalon. Ez lebontva megmutatja az összes olyan adatot, amit a böngészőnek le kell kérnie, amikor valaki meglátogatja a weboldalad.
Minden kérés más-más ideig tart. Például egy képért tett HTTP-kérés akár 500 miliszekundumot (ms) is igénybe vehet, míg egy kis méretű script betöltése mondjuk csak 50 ms‑t vesz igénybe. Emellett ezeket a kéréseket különböző sorrendben töltik be. A böngésző, mint egy könyvet, fentről lefelé olvassa a weboldal kódját, és ahogy találkozik különböző elemekkel, úgy kéri be azokat. A vízesés elemzés segítségével megtudhatod: hány HTTP-kérés szükséges egy oldalhoz, milyen sorrendben történnek ezek az HTTP-kérések, mennyi ideig tart az egyes HTTP-kérések betöltése.
A fenti mérések megmutatják azokat a kritikus pontokat, amelyek lassítják az oldaladat. Az elemzésekből kinyert adatok mentén elindíthatod az optimalizálási folyamatokat, annak érdekében, hogy oldalaid gyorsabban töltsenek be.
Tárhelyszolgáltató kiválasztása
Mint egy ház esetében a honlapoknál is kiemelten fontos, hogy megfelelő alapunk legyen. Egy weboldal vagy webshop esetében az elsődleges alapot a megfelelő tárhelyszolgáltató kiválasztása fogja biztosítani, aki minden működéshez szükséges erőforráslimitet biztosít számunkra. Ha a tárhelyed lassú, akkor semmiféle teljesítményoptimalizálás nem fogja lehetővé tenni a gyors betöltést.
Munkánk során több hazai tárhelyszolgáltatót kipróbáltunk, és sajnos legtöbb helyen borzalmas hozzáállást tapasztaltunk. A legtöbb szolgáltató az ügyfélszolgálat gyenge válaszaival, hozzá nem értésével azonnal kiesett a versenyből. Mielőtt külföldre helyeztük volna oldalaink működését utolsó mentsvárként kipróbáltuk a Tárhely.eu szolgáltatásait, akikkel már több, mint 5 éve dolgozunk együtt. Számunkra meggyőző érv, hogy a szolgáltatás megfelelő minőségén túl kiemelkedően gyors ügyfélszolgálatot biztosítanak. Emailben akár 0–24-ben fordulhatsz hozzájuk és legtöbb esetben éjjel is pár órán belül válaszolnak, ha valamilyen problémád lenne a szolgáltatásukkal kapcsolatban.
Sok ügyfelünknek készítünk honlapokat és webáruházakat, így sok más hazai szolgáltatóval találkozunk. Tapasztalatunk alapján a hazai piacon még egy olyan szolgáltató van, akikkel szívesen dolgozunk együtt és ajánljuk szolgáltatásaikat, ez nem más, mint a hasonlóan kimagasló színvonalat képviselő Sybell Informatika.
Megfelelő gyors sablon kiválasztása
A második kiemelkedően fontos lépés, hogy megfelelő sablont válasszunk oldalunk felépítéséhez. A weboldal alapját a sablonod fogja meghatározni. Mindenképpen érdemes olyan sablont választani, amelyik gyorsan betöltődik és teljes mértékben személyre szabható. A legtöbb sablonszolgáltató biztosít lehetősége arra, hogy demo-módban kipróbálhasd telepítés előtt. Ha időmilliomos vagy, akkor akár kísérletezhetsz azzal is, hogy feltelepíted a sablont, leteszteled a fenti módszerekkel és megnézed a tapasztalatokat.
Ha szeretnéd elkerülni a hosszas tesztelési folyamatot, akkor személyes konzultáción vagy csoportos online vállalkozói inkubációs foglalkozáson szívesen segítünk neked a kiválasztásban is. Ha pedig egyáltalán nem akarsz ezzel foglalkozni, akkor ügynökségünket bármikor megbízhatod, hogy készítse el számodra a megfelelő honlapot.
A képek optimális méretű feltöltése
A weboldalak tartalmának egy igen jelentős részét képek, gif-ek és különféle vizuális tartalmak teszik ki. Ezeknek az anyagoknak a betöltési ideje nagyban befolyásolja az oldalad teljesítményét is, ha nincsen megfelelő méretre optimalizálva a tartalmad. Tudjuk, hogy nagyon macerás lenne minden egyes kép esetében egyesével zsugorítani, tömöríteni és optimalizálni. A jó hír az, hogy létezik erre is egyszerűbb megoldás, hogy minőségromlás nélkül átméretezd a képeidet.
Mindenek előtt fontos tisztázni, hogy egy átlagos weboldal tartalomterülete 1000 és 1500px szélesség körül mozog. Ebből kifolyólag teljesen felesleges ennél szélesebb képet tervezned, hiszen a képernyőn ez úgysem jelenik majd meg akkorában csak a tárhelyet foglalod vele és növeled az oldal betöltési idejét. Így érdemes akkora méretben feltölteni a képet, amekkora területen megjelenik.
Képoptimalizálás fájlméret csökkentéssel
A legtöbb bővítmény a kép megjelenési méretén nem változtat csupán a fájlméretét csökkenti. A bővítménnyel való tömörítésre legtöbb esetben két lehetőségünk van. Az egyik a veszteséggel járó tömörítés, ami a nagyobb mértékű fájlméret-csökkentéssel, de kisebb minőségveszteséggel jár. A második pedig értelemszerűen a veszteségmentes, ami kisebb mértékű fájlméret-csökkentés, de minőségvesztés nélkül. A legtöbb esetben a veszteséggel járó képtömörítés is jó választás lehet. Ugyanis az emberi szem számára a legtöbb esetben nem jár észrevehető különbséggel az ilyen csökkentés sem. Ugyanakkor nagyobb helyet tudunk felszabadítani tárhelyünkön és megkönnyítjük az oldalbetöltést.
Az, hogy erre a célra melyik bővítményt ajánljuk nagyban függ attól, hogy mivel lett építve az oldalad. De általánosságban ezzel a három bővítménnyel nem nagyon lőhetsz mellé: Autoptimize, Optimole, vagy a ShortPixel Adaptive Images. Ezek a bővítmények az új és régi képek automatikus optimalizálásán felül további funkciókkal is rendelkeznek, mint például:
- látogatók eszközéhez dinamikusan igazított méretű képet szolgáltatnak. Ez azt jelenti, hogy ha valaki okostelefonon böngészik, akkor alacsonyabb felbontású képet kap, mint ha valaki, aki egy nagy felbontású képernyővel rendelkező laptopon böngészik.
- egy globális “tartalomszállító” hálózatról (CDN) szolgáltatják a képeket. Ez felgyorsítja a oldalbetöltési időt. Az Optimole az Amazon CloudFront-ot használja, míg a ShortPixel nem teszi közzé, milyen infrastruktúrát használ.
- Úgynevezett “lazy load” módon töltik be a képeket. Ez felgyorsítja az érzékelt betöltési időt, mivel a látható tartomány alatt elhelyezkedő képeket csak akkor tölti be, amikor a felhasználó elkezd lefelé görgetni. A “látható tartomány alatt” olyan képeket értünk, amelyek nem azonnal láthatóak, amikor egy felhasználó egy oldalra érkezik. Azaz a felhasználónak le kell görgetnie, hogy megnézze őket.
Optimalizáló bővítmény használata a gyorsaságért
A képoptimalizáláson túl egy másik kiváló módszer a WordPress gyorsításához az oldaloptimalizáló bővítmények alkalmazása. Rengeteg kiváló bővítmény van, ami képes különféle módszerekkel gyorsítani a weboldaladat. Ezek között akadnak ingyenesen használhatóak és fizetősek is. Most azokat vesszük sorra, amelyeket már használtunk és ügyfeleink számára ajánlhatunk. Természetesen minden oldal más és más, így azt javasoljuk teszteld le mindegyiket, hogy megtudd melyik bővítmény működik neked.
Az általunk egyik legtöbbet használt ilyen bővítmény a WP Fastest Cache, aminek létezik ingyenes és PRO változata is. Kisforgalmú weboldalak esetében már az ingyenes verzió is csodákat képes tenni annak érdekében, hogy az oldalaid gyorsan töltsenek be a látogatók számára. A PRO verzió olyan funkciókat is tartogat, mint képoptimalizálás, adatbázis tisztítás. Vannak oldalépítők, amelyekkel mint minden más gyorsító bővítmény előfordulhat, hogy kissé összeakad, de ezt gyorsan orvosolhatod egy pár kattintásos kizárással.
Ha csak fizetős verzióban gondolkozol, akkor talán az egyik legjobb megoldás a WP Rocket lehet. Van benne oldalgyorsító (cache), JS és CSS fájl minimalizáló, Gzip tömörítés, “lazy load” és még sok más, melyek tényleg nagyon hasznosak és valóban jól működnek. Ingyenes bővítmények tekintetében érdemes elgondolkozni a W3 Total Cache használatán is.
Általánosságban a gyorsítótárról
A legtöbb bővítmény automatikusan gyorsítótárazza (cache-eli) az oldalakat, bejegyzéseket, keresési eredményeket és más elemeket. Ezáltal azok gyorsabban fognak betöltődni. Ha a tárhelyed támogatja, bekapcsolhatod az objektum gyorsítótárazást is a további optimalizálás érdekében.
A bővítmények beállításoktól függően minimalizálják a JavaScript és CSS fájlokat, ezáltal kisebb lesz a méretük, és kevesebb helyet foglalnak. Mindezek csökkentik az oldal betöltési idejét. A Gzip tömöríti a weboldalakat és stíluslapokat, így az egész weboldal mérete sokkal kisebb lesz. Ez a gyakorlatban általánosan ajánlott. A lazy load vagy késleltetett kép betöltés olyan folyamat, amely során a képek és tartalmak csak akkor töltődnek be, amikor a felhasználó lefelé görget a lap egy adott részére. Lazy load nélkül az egész oldal betöltődik, még akkor is, ha a felhasználó az első bekezdés elolvasása után bezárja a lapot.
Mindig használd a legfrissebb PHP verziót
A WordPress gyorsításához tudnod kell, hogy a PHP az a programnyelv, amin a WordPress motorja működik. Fontos, hogy mindig a legfrissebb PHP verziót használd, mivel az újabb verziók hatékonyabbak és biztonságosabbak, és ezáltal gyorsabbá teszik a weboldaladat. Általában a tárhelyszolgáltató kezeli a PHP verziót és frissíti azt. Azonban érdemes ellenőrizni, hogy milyen verzió van telepítve.
A PHP verzió gyors ellenőrzéséhez menj a WordPress vezérlőpulton belül az oldalsávban az eszközök pont alatt weboldal állapota részhez. Válaszd az Információ fület. Görgess le és keresd meg a Szerver fület. Ott megtalálod a PHP verziót. Ezt a cPanel felületen is ellenőrizheted. Ha régebbi verziót használsz, és frissíteni szeretnéd, akkor többféle lehetőséged is van, hogy ezt megtedd. Megkérheted a tárhelyszolgáltatódat, vagy magad is elvégezheted a frissítést a cPanelen keresztül.
Ezeken a tippeken már túl vagy, de nem működnek?
Cikkünk csak alapinformációkat tartalmazott azokról a beállítási lehetőségekről, amelyeket gyorsan és könnyedén elvégezhetsz a WordPress oldalad gyorsításához. Hamarosan újabb poszttal jelentkezünk amiben már haladó beállításokat is megosztunk veletek. Addig pedig, ha kérdésed van keresd kollégáinkat bizalommal, akik legjobb tudásuk szerint segítenek neked a konzultációk során vagy választhatod weboldal karbantartási szolgáltatásunkat is, amely tartalmazza az oldalak gyorsítótárát is.
Fontos, hogy minden változás előtt készítsünk biztonsági mentést, hogy könnyedén vissza tudjuk állítani az oldalunk eredeti állapotát, ha valami véletlenül balul sülne el.
