honlap optimalizálás

Honlap optimalizálás – 20 tipp a gyorsabb weboldal érdekében

Ebben a cikkben:

Honlap optimalizálás üzleti szempontból

A weboldalad sebessége több szempontból is kritikus fontosságú. Minden egyes másodperccel olyan látogatókat veszítesz akikből akár vásárló is lehetett volna. Számtalanszor vizsgálták már a weboldalak betöltési sebessége és a konverziós arány közötti összefüggéseket és szinte mindig ugyanarra jutottak. A gyorsabb weboldalak jobban konvertálnak.

Nézzük például a Loadstorm kutatását amelyben rámutattak, hogy ha egy weboldal betöltése több, mint 4 másodpercig tart azt 4 látogatóból 1 biztosan nem várja meg. Vagy itt egy másik kutatás Neil Pateltől, mely szerint a látogatók 47%-a elvárja egy webshoptól, hogy két másodperc alatt betöltsön.

Azt hiszem nem kell túlragoznom az egyértelműt. Felhasználói élmény szempontjából kiemelkedő fontosságú, hogy minél jobban optimalizáld honlapodat és ezzel minél lejjebb tornászd a betöltéshez szükséges időt.

Weboldal optimalizálás SEO szempontból

Végső soron ez is az üzleti szempont része, de úgy gondolom érdemes különválasztani és külön kezelni a keresőoptimalizálási szempontokat. Ez a másik jellemző tényező ami miatt valaki belefog a honlap optimalizálás folyamatába.

Manapság már egyértelműen tudjuk azt, hogy a weboldal sebessége befolyásolja annak, a SERP-ben, azaz a keresési találatok közt elfoglalt pozícióját. Ha nem is a legfontosabb tényező, de a legfontosabbak között van. Egy gyorsabb és ezzel együtt felhasználóbarát honlapot, mind a Google, mind a Bing előrébb fog rangsorolni, mint egy hasonló tulajdonságokkal rendelkező, de lassabb weboldalt.

Ha szeretnél előkelőbb helyezéseket, ezáltal nagyobb forgalmat és árbevételt generálni, akkor nem hagyhatod figyelmen kívül weboldalad sebességét.

honlap optimalizálás

Hogyan ellenőrizheted weboldalad sebességét?

Lokációtól, eszköztől, az internet sávszélességétől és sok egyéb tényezőtől függően más teljesítményt tapasztalhatnak az egyes felhasználók. Te valószínűleg gyakran használod a saját honlapodat, így a böngésződ sok fájlt eltárolhatott az úgynevezett cache memóriában. Biztosan gyorsabban be fog tölteni a weboldalad, mint annak aki először jár nálad, vagy például annak aki egy másik országból látogat el hozzád.

Ezért fontos, hogy több eszközzel is feltérképezzük a weboldalad sebességét.

A másik dolog ami felett gyakran elsiklanak, az az hogy csak egyetlen aloldalt tesztelnek. Ez nagy hiba, hiszen a különböző aloldalakon jellemzően más és más tartalom található. Egy rengeteg képi tartalommal rendelkező blog bejegyzés valószínűleg lassabb lesz, mint egy egyszerű kapcsolat aloldal.

Javaslom, hogy mindig teszteld le a legforgalmasabb aloldalaidat.

Szóval ahhoz, hogy ismerjük a weboldal aktuális teljesítményét meg kell ismerkednünk néhány eszközzel. Ezek a Google Pagespeed Insights, A GTMetrix, valamint az Isitwp WordPress weboldalakra kihegyezett teljesítménymérő eszköze.

Ezeket a következő linkekre kattintva érheted el:

https://developers.google.com/speed/pagespeed/insights/

https://gtmetrix.com/

https://www.isitwp.com/free-website-speed-testtool-for-wordpress/

Használatuk rendkívül egyszerű. írd, vagy másold be a vizsgálni kívánt weboldal URL-jét a szövegmezőbe és indítsd el a mérést.

Rövid idő elteltével láthatod a kapott pontszámot. Emellett egy részletes jellemzést arról, hogy mi az ami jól működik, mi az amin javítanod kell, illetve javaslatokat is ad a honlapod gyorsítására.

20 tipp a weboldalad sebességének optimalizálásához

Az alábbi listában 20 olyan tippet mutatok be amivel könnyedén javíthatsz a honlapod sebességén, akkor is, ha nem vagy informatikai guru. A lista főleg a plugineket és témákat érintő része WordPress weboldalakra lesz kihegyezve, de a tippek többségét akkor is végrehajthatod, ha más típusú weboldalad van. Honlap optimalizálásra fel!

1. Megfelelő tárhelyszolgáltató és csomag választása

Kezdjük a legalapvetőbbel. A weboldaladat nyilván tárolnod kell valahol, azonban nem mindegy hol mely szolgáltatónál és milyen feltételekkel bérelsz tárhelyet. A megfelelő táhelyszolgáltatás kiemelt szerepet játszik honlapod teljesítményében.

Jellemzően négy különböző típus közül választhatsz.

Osztott tárhely: Ez a legolcsóbb megoldás, a hátulütője az, hogy más felhasználókkal együtt osztozol az adott szerver erőforrásain.

Virtuális szerver (VPS): Itt is másokkal osztozol az erőforrásokon, azonban ez már jóval kevesebb felhasználót jelent. Ezen a szinten már elkülönített erőforrásokat kapsz, így nincs teljesítménybeli ingadozás. Ez egyfokkal drágább, de jobb megoldás.

Dedikált szerver: Ebben az esetben már senkivel sem kell osztozkodnod, egy egész szerver áll a rendelkezésedre, minden rendelkezésre álló erőforrás a tiéd. A hátránya, hogy az ára jóval magasabb, mint az előbbieknek, valamint technikai tudás szükséges az üzemeltetéshez.

Menedzselt tárhely: Olyan dedikált szerver, ahol minden technikai műveletet elvégeznek helyetted. Jellemzően ez a legjobb, de legdrágább megoldás.

Azt szoktam javasolni, hogy ha az anyagiak engedik ruházz be egy VPS-re. Átlagos forgalmú weboldal esetében egy VPS bőven kiszolgálja az igényeket.

2. Használj Content Delivery Network-öt, azaz CDN-t

Hogy tovább haladjunk a honlap optimalizálás folyamatában nézzünk még egy, a weboldal sebességét kívülről befolyásoló elemek sorában, ejtsünk szót a CDN-ekről.

A CDN-ek olyan szerverek, amelyek a világ különböző pontjain vannak elhelyezve és a legfőbb feladatuk, hogy a weboldalad statikus elemeit (képek, videók, bizonyos kódok, stb.) másolatait tárolják és eljuttassák a felhasználóhoz.

Hogy miért jó ez? Mert ha a felhasználóhoz egy másik szerver közelebb van, mint az ahol a weboldalad tárolod, akkor sokkal gyorsabb oldalbetöltést érhetsz el.

Elérhetőek ingyenes megoldások is, de minimális havidíjért cserébe már igen jó csomagokat lehet választani. Népszerű megoldások a StackPath, a Cloudflare, vagy a Google Cloud CDN.

elementor

3. Megfelelő téma / keretrendszer választása

A tárhely mellett a másik kritikus fontosságú alap, amin nehéz később változtatni az a téma, vagy keretrendszer. Ha egy témát választva felépítetted a weboldalad és felépítettél rá egy egész ökoszisztémát, akkor a későbbiekben nagyon nehéz lesz szükség esetén lecserélni.

Azért írok keretrendszert a téma mellett, mert manapság már idejétmúltak az olyan “minden az egyben” téma és page builder megoldások, mint a Divi, vagy az Avada. Még mindig sokan használják őket, de mi már jellemzően egy nagyon kevés erőforrást használó témát (pl.: GeneratePress, Hello Theme, Astra, stb.) szoktunk ajánlani Elementorral.

Szóval. Azért érdemes egy “könnyű” témát választani, mert kevés erőforrást fog felhasználni, ezáltal gyorsabb sebességre tehetsz szert.

Ha mégis egy olyan sablont választanál ami több erőforrást használ, de ezzel együtt több funkciót kínál, akkor előtte mindenképp győződj meg róla, hogy a felesleges funkciók kikapcsolhatóak legyenek.

wp rocket

4. Használj cache bővítményt

A WordPress oldalak alapvetően dinamikusak, ami azt jelenti, hogy akkor generálódnak le, mikor egy látogató lekéri az adott oldalt. Ehhez a WordPressnek a háttérben olyan folyamatokat kell futtatnia, aminek az eredményeképp a rendelkezésre álló adatokból egy kész oldalt jelenít meg.

Itt jön képbe az úgynevezett cachelés. Ahhoz, hogy a folyamatot meggyorsítsuk eltárolhatjuk a különböző fájlokat, vagy akár az egész weblapot és így lerövidíthetjük az oldalgenerálás folyamatát.

Egy jó cache bővítmény használatával és néhány kattintással sokszorosára növelheted weboldalad sebességét. Én a WPRocketet és a NitroPacket szoktam ajánlani, mert nagyon egyszerű kezelőfelülettel, de számos funkcióval rendelkeznek. Gyerekjátékká válik velük a honlap optimalizálás.

A későbbi bekezdésekben (5-9) lesz néhány tipp amelyet egy cache pluginnal egyszerűen véghezvihetsz, például a kódok tömörítése. Ha nem vagy informatikai szakértő és nem tudod manuális végrehajtani ezeket a feladatokat, vagy csak leegyszerűsítenéd a lépéseket, akkor mindenképp hasznodra válhat egy-egy cache plugin.

shortpixel

5. Tömörítsd a képeket

Egy weboldal esetében a vizuális megjelenés kulcsfontosságú. Elengedhetetlen a képek használata. Sajnos sokan nincsenek tisztában vele, hogy a képek általában a weboldalak méretének közel felét teszik ki.

Ebből azonnal következik, hogy rengetget tudunk gyorsítani egy weboldalon, akkor ha optimalizáljuk a feltöltött képeket. Egy kép tömörítés alkalmával, akár 2-3-szor gyorsabb sebességet is elérhetünk és igazán nem kell sokat tenni ezért.

Rengeteg megoldás létezik a képek tömörítésére. Ma már a legtöbb tömörítő szoftver képes töredékére csökkenteni a képek méretét, anélkül, hogy szemmel áthatóan romlana azok minősége.

Általában két megoldást szoktam javasolni.

Az egyik, hogy tömörítsd a képeket feltöltés előtt. Erre használhatod például a TinyPNG szoftvert.

A másik, hogy automatizálod a tömörítést. Ehhez egy olyan pluginra lesz szükséged, mint a ShortPixel. Ez a bővítmény teljesen átveszi tőled a tömörítés feladatát. Amint feltöltesz wgy képet a weboldaladra a plugin automatikusan letömöríti azt.

kód tömörítés

6. Tömörítsd a HTML, CSS és JavaScript kódokat

A weboldalad betöltésének idejét csökkenthetjük úgy is, hogy az azt felépítő kódok méretét redukáljuk. Igen, nem csak a multimédia fájlokat manipulálhatjuk, hanem a szöveg alapúakat is.

Ennek egyik módszere, hogy a szövegben található felesleges szóközöket eltávolítjuk. Ezek kódolás közben hasznosak, mert az emberi szem számára átláthatóbbá teszik azt, viszont a számítógépek számára semmilyen előny nem származik a használatukból, ezért feleslegesek.

Tanácsként mondom, hogy ne akard egyszerre az összes kódot tömöríteni. Haladj lépésenként. A HTML és CSS kódok tömörítése során nem szokott probléma felmerülni, azon a JavaScript kódoknál tapasztalhatsz némi anomáliát, pl.: bizonyos funkciók nem működnek az oldalon. Így javaslom, hogy tömörítés közben és után folyamatosan tesztelj.

7. Helyezd a scripteket a weboldal aljára

A böngészők a weboldalakat kódjait balról jobbra, fentről lefelé olvassák és fordítják. Sokszor előfordul, hogy nehezen feldolgozható kódok (jellemzően CSS és JavaScript) foglalnak helyet a fájlok első szakaszaiban, ezzel feltartva minden olyan elem betöltését ami utánuk következik.

Ha nem lényeges számodra egy bizonyos kód azonnali betöltése, akkor érdemes azt a kódsor végére tenni, hiszen így sebességnövekedést érhetünk el.

Tipikusan ilyen scriptek a különböző analitikai szoftverek kódjai.

8. Csökkentsd a lekérések számát

Elérkeztünk a honlap optimalizálás egy kritikus pontjához. Itt a weboldalad szerkezetét felépítő kódok lekéréséről és külső, harmadik féltől származó kódok lekérését is értjük.

Előfordulhat, hogy a weboldaladat felépítő kódokat több fájlból kell összeraknia a böngészőnek. Ehhez több fájlt kell lekérnie a szervertől, ezzel az oda-vissza kommunikációval lassítva a weboldalad sebességét.

Viszont ha minden azonos típusú kódot egy, vagy legalább kevesebb fájlba gyűjtesz összes, akkor sokkal kevesebb, vagy akár egyetlen egy lekéréssel hozzáférhet a böngésző az adott elemekhez.

A másik típus a külső lekérés. Erre akkor kerül sor, mikor a harmadik féltől származó adatokhoz szeretnél hozzáférni, azaz nem a te szervereden tárolódnak azok. Ilyenek például a beágyazott videók, vagy a külső forrásból származó betűtípusok.

Érdemes felülvizsgálnod, hogy szükséged van-e minden, külső féltől származó elemre, vagy megoldható-e az, hogy egy betűtípust inkább feltölts a tárhelyedre és onnan szolgáld ki azt.

9. Optimalizáld a hajtás feletti tartalmat

Hajtás feletti tartalomnak (above the fold) nevezzük a weboldal azon részét, ami görgetés nélkül, azonnal látható. Ez az az rész, amit betöltés után közvetlenül a látogató elé kerül. Kiemelt fontosságú, hogy ez a szekció minél gyorsabban betöltsön.

Egy lehetőség a betöltés gyorsítására a fentebb említett kódok weboldal aljára helyezése.

Egy másik lehetőség, az úgynevezett “lazy loading” használata. Ennek segítségével a multimédia tartalmak folyamatosan, görgetés közben töltenek be.

Érdemes a képek tömörítésével is foglalkozni. Továbbá megvizsgálni a CSS és JS kódokat és csak a kritikus fontosságú, valamint a hajtás feletti részért felelős elemeket a meghagyni, a többit pedig hátrasorolni.

10. Csökkentsd az átirányítások számát

Néha szükséged lehet átirányítások használatára. Ha például szeretnéd egy törölt poszt látogatóit egy másikra irányítani, akkor ez a legjobb lehetőséged. Azonban fontos, hogy ne ess át a ló túloldalára.

Ahol lehet kerüld el az átirányításokat, mivel ezek újabb lekéréseket fognak eredményezni, az oldal betöltési ideje akár 20-30%-al is megnőhet. Arról nem is beszélve, ha egyik átirányítás egy másikba van fűzve.

Gyakori hibaforrás az, mikor egy SSL certifikáció telepítése után, a weboldal nem minden aloldala vált át https-re, így átirányítások keletkeznek a webodlalad http és https verzió között. Javaslom hogy ellenőrizd le, hogy mindenütt https-t használ-e a weboldalad és ha nem, akkor javítsd a hibát.

11. Optimalizáld a betűtípusokat

A lekérések számánál már volt szó a betűtípusokról, de sokkal többet tehetsz azért, hogy ne rontsák a weboldalad teljesítményét.

Első tipp, hogy lehetőleg tárold a szervereden a betűtípusokat és ne külső forrásból hívd őket, ezzel megtakaríthatsz némi lekéréssel töltött időt.

Csak azokat a betűtípusokat és variációkat használd amire tényleg szükséged van. Ha csak egy-egy betűtípust használsz a fejlécek és a törzsszöveg megjelenítéséhez, akkor teljesen felesleges ennél többet tárolnod.

Cacheld a betűtípusokat. Nem túl valószínű, hogy két látogatás között új betűket találnak ki, ezért érdemes a látogató böngészőjében menteni a betűtípusokat, hogy a következő látogatás alkalmával ezzel időt tudj spórolni.

12. Használj minél kevesebb plugint

Nincs optimális szám arra vonatkozóan, hogy mennyi bővítményt érdemes, vagy szükséges használni. Viszont ha egy problémát egy Google kereséssel, vagy néhány sor kód bemásolásával megoldhatunk, akkor miért telepítenénk ezért egy plugint és terhelnénk a weboldal mögött álló infrastruktúrát?

Tipikus példa a kódbeillesztő bővítmények, melyek szinte kivétel nélkül extra lekéréseket generálnak, miközben a használatuk kiváltásához elég lenne megnyomni a másolás és beillesztés gombokat.

Vagy a másik az űrlap pluginok jellemző betegsége, miszerint minden aloldalon betöltik a bővítmény css kódját, attól függetlenül, hogy használod-e az adott oldalon, vagy sem.

Javaslom, hogy nézd végig a telepített bővítményeidet és gondold végig, hogy van-e köztük olyan amire egyébként már nincs szükséged, vagy ki tudod-e váltani másképp a funkcionalitását.

A bővítmény száma mellett érdemes azok minőségét is figyelembe kell vennünk. Elég nagy különbségek vannak plugin és plugin között.

A minőség kérdésében azt tudom javasolni, hogy végezz egy kis kutatómunkát. Nézd meg, hogy van-e olyan bővítmény amelyet használva ki tudod-e váltani több másik bővítmény funkcionalitását.

Olvasd el az értékeléseket, esettanulmányokat, hasonlítsd össze a konkurens bővítményeket, próbáld ki őket és válaszd azt amelyik jobb teljesítményt nyújt.

wordpress logó

13. Frissíts a legújabb plugin és WordPress verziókra

Ez a egyik legegyszerűbben kivitelezhető feladat a listán. Tartsd naprakészen a WordPress coret és a bővítményeket is.

Biztonság és stabilitás szempontjából rendkívül fontos, hogy mindig a legújabb verziókat használd. A weboldalad sebességét is befolyásolhatják a frissítések, mivel sok-sok hibajavítást és optimalizálást tartalmazhatnak.

14. Frissíts a legújabb PHP verzióra

A PHP egy szerveroldali programozási nyelv, amelyet leggyakrabban webes fejlesztések során alkalmaznak. A WordPress kódjának túlnyomó többsége és ugyanígy a bővítmények többsége PHP-ban íródott.

A tárhelyszolgáltatók jellemzően több PHP verziót biztosítanak rendelkezésre. Fontos, hogy legalább a 7-es verziót használd. Jelenleg a legjobban akkor jársz, ha a legfrissebb 7.3-as verziót használod.

A sebességet tekintve ez azért fontos, mert minden egyes PHP verzió több lekérést tud lebonyolítani adott idő alatt, mint az azt megelőző verzió.

15. Tartsd karban az adatbázisod

A WordPress mögött álló adatbázison ezernyi dolgot lehet csiszolni, a legtöbbhöz viszont mélyreható tudásra van szükség. Megemlítek néhányat amelyet könnyedén véghezvihetsz.

Töröld, vagy limitáld az oldalak és bejegyzések előzményeit. Nagyobb oldalakon a sokszor feleslegesen tárolt előzetes verziók akár több száz, vagy ezer sort is hozzáadhatnak az adatbázisodhoz.

Ugyanígy tehetsz a felesleges kommentekkel, az üres kategóriákkal, duplikált tartalmakkal és egyéb címkékkel.

Érdemes manuálisan is megvizsgálni a táblákat, mivel sokszor olyan bővítmények, kiegészítők adatait tárolja az adatbázisod melyeket már lehet, hogy töröltél.

blog feed

16. Limitáld a blog feedet

Ez is egy viszonylag egyszerűen kivitelezhető tipp. Azokon az aloldalakon amelyeken bejegyzéseket jelenítesz meg, limitálhatod a bejegyzések számát.

Korlátozásukkal nagyon egyszerűen, nagyfokú sebességnövekedést érhetsz el.

Emellett érdemes rövidebb betekintő szöveget használni. Ezzel is szerezhetsz néhány tizedmásodpercet.

17. Tiltsd le a trackbacket és pingbacket

A Pingback és Trackback (visszajelzés és visszakövetés) alapvető WordPress funkciók melyek feladata, hogy értesítsenek arról, ha a weboldalad szerzett egy backlinket.

Teljesen feleslegesen generálnak lekéréseket, így feleslegesen használják az erőforrásaidat. Sokkal jobb eszközök vannak már a linkek követésére, mint például a Google Search Console.

A WordPress beállításain belül a Beszélgetés menüpontban tudod őket kikapcsolni.

18. Bontsd külön oldalakra a hozzászólásaidat

Rengeteg kommentet kapnak a bejegyzéseid? Ez egy tök jó dolog, látszik, hogy érdeklődnek az olvasók a cikkeid után. A negatív oldala ennek az, hogy a böngészőknek fel kell dolhozniuk a kommentáradatot, így lassítva az oldalad sebességét.

Egyszerű a megoldás. Bontsd lapozható oldalakra a kommenteket, így egyszerre elég a kommentek egy részét megjeleníteni. Ha egy felhasználó kíváncsi a többire, akkor megnézheti azokat, viszont nem lassítják feleslegesen a weblapodat.

Ezt a beállítást is megtalálhatod a WordPress beállításaiban, illetve a komolyabb kommentrendszerek mind képesek erre.

emojik tiltása

19. Tiltsd le az emojikat

Eltörpül a legtöbb tipphez képest, de úgy gondolom érdemes megemlíteni. A WordPress 4.2-es verziója óta elérhetőek az emojik. Ha nem használod őket a tartalmaidban, akkor letilthatod őket, ezzel egy lekérést megspórolva.

20. Ellenőrizz gyakran

Az utolsó és egyben legfontosabb. Időnként ellenőrizd a weboldalad teljesítményét.

Ha egy új aloldalt, vagy bejegyzést készítettél érdemes lehet egy lefuttatni egy sebességmérést. Hátha kapsz néhány tippet, ha esetleg elsiklottál valami felett.

Egy új bővítmény, vagy téma telepítése esetén is érdemes vizsgálódni. Ilyenkor érdemes legalább a főbb aloldalakat ellenőrizni.

Összefoglalva

Remélem hasznos lesz ez az írás számodra. Tudom, hogy sok technikai kifejezés és tipp van köztük, de egy cache pluginnal és némi időráfordítással a legtöbb feladatot egy órán belül megoldhatod.

Ha van olyan honlap optimalizálási tipped, amit érdemes lenne hozzáadnom a listához kérlek írd meg kommentben!

Olvass tovább, ezek a cikkek is érdekelhetnek:

WooCommerce bővítmények

A leghasznosabb WooCommerce bővítmények

A WooCommerce manapság at egyik legnépszerűbb webshop platform. Nem véletlenül, hiszen telepítése után minden alapfunkciót megkapsz ahhoz, hogy WordPress alapú weboldaladból webáruházat

Domain név választás

Hogyan válassz domain nevet?

A domain név választás sosem egyszerű feladat. Tudd meg cikkünkből, hogy mit érdemes figyelembe venned és mi alapján érdemes választanod.

Kérdésed van? Hozzászólnál? Itt megteheted 👇

Megosztás itt: facebook
Megosztás itt: twitter
Megosztás itt: linkedin
Megosztás itt: email
Megosztás itt: pocket
small_c_popup.png

200+ Ingyenes marketing eszköz​

Emeld magasabb szintre vállalkozásod teljesítményét teljesen ingyenes marketing eszköztárunkkal. Több, mint 200 eszköz havidíj nélkül.

A weboldalon cookie-kat használunk, hogy minél jobb élményt tudjunk neked nyújtani.​