blog.7digits-dev.eu

Tag: optimalizálás

  • Webshop Pszichológia – 5 haladó fogás e-kereskedőknek

    [vc_row][vc_column][vc_column_text]

    Nem csekély mértékben a koronavírusnak köszönhetően az e-kereskedelem minden szeglete komoly fejlődésen ment keresztül Magyarországon az elmúlt másfél évben. Ma már néhány kompetitívebb hazai piacon működő webshopban a vásárlói élmény megközelíti a fejlettebb nyugati országokban tapasztaltakat (Mínusz email marketing, mert az a legtöbb webshopnál még mindig sírnivaló.) Elég csak a táplálékkiegészítők, a fashion, a játékok, a háztartási elektronika, vagy épp az utazások piacán egyre többször látható webshop pszichológiai fogásokra és UI megoldásokra gondolni.

    A fejlődés “profi UI” lépcsőjét immár nyugati szinten megugró vállkozásoknak is mindig van továbbfejlődési lehetőség… Amikor ugyanis egy webshop forgalma már több ezer látogató naponta, akkor akár a nüansznyi javítások is sokat hozhatnak a konyhára.

    Ilyenkor lép színre a konverzió optimalizálás számos eszköze, köztük az online vásárlásokra kihegyezett pszichológia, s bár a kommerszebb pszicho technikákat sokan már kívülről tudják, a ritka gyöngyszemek talán még adnak némi inspirációt a weben kereskedő vállalkozó Kollégáknak. Íme öt pszicho technika, amire lehet, hogy nem gondoltál…

    [lwptoc depth=”3″ hierarchical=”1″ numeration=”none” numerationSuffix=”none” title=”Tartalomjegyzék” toggle=”1″ labelShow=”Mutatás” labelHide=”Elrejtés” width=”full” skipHeadingLevel=”h1,h2″ skipHeadingText=”ÉRDEKEL*”]

    Prémium webshop pszichológiai trükkök

    1. A bizonytalanság csökkentése – Farfetch

    A farfetch.com a vásárlási folyamat során – mobil nézetben – a méretválasztást követően visszajelez, hogy a választásunk tökéletes – bármilyen méretet is választottunk.

    Pszichológiai háttér: az olyan vásárlási helyzetekben, ahol sok variáció közül kell választanunk, ott az emberi agy nem csak a pénz azonnali elvesztése miatt fúj riadót, hanem a választás bizonytalansága miatt is igyekszik késlelteni a döntést.

    Amikor azonban a döntés megszületik, akkor egy úgynevezett choice-supportive bias lép fel, azaz a döntéshozó utólag igyekszik racionalizálni a döntését. Pontosan erre erősít rá, ezt támogatja a Farfetch kis UI trükkje és a “félelem” csökkentése révén könnyíti meg a vásárlást.

    A megváltozott szöveget tudatosan aligha veszik észre sokan, az azonban éppen ezért oly hatékony: a tudatos agyterületek helyett a tudatalatti “krokodil agyig” jutó információ kiváló eszköz arra, hogy indukálja a Choice-supportive bias-nek, vagy más néven vásárlás utáni racionalizálásnak nevezett folyamatot.

    Alkalmazási lehetőség: Bármilyen webshopban alkalmazható, ahol egy adott terméknek több variációja van, azaz méret, szín, műszaki paraméterek, stb.

    Technikai nehézség: A webshop pszichológia fogásainak ez a megoldás a technológia-heavy fajtája: szinte biztosan egyedi fejlesztést igényel, így nem lesz sem olcsó, sem egyszerű.

    [/vc_column_text][/vc_column][/vc_row][vc_row section_id=”nickis”][vc_column][vc_column_text]

    2. Vásárlási élmény kiterjesztése – Nicki’s

    Mindegyik webshop küld a megrendelések fogadása után olyan – úgynevezett tranzakciós – emaileket, amiben a vásárlás részletei mellett megerősíti, hogy köszönik, vették, csinálják. Persze egy dolog ezt tudni, és egy teljesen másik élmény a saját szemünkkel látni

    A Nicki’s nevű német gyerekruha oldal a megrendelést követő köszönőoldalon egy kis videóban mutatja be, hogy mi is történik a megrendelés után a színfalak mögött; hogyan választják ki a munkatársak a megrendelt árut, milyen gondosan csomagolják és hogyan adják át a futárszolgálatnak. Alább a screenshot, a thank you oldalról, utána pedig a Nicki’s vásárlás utáni videója:

    Nicki's webshop screenshot a webshop pszichológia alkalmazásáról

    A videó, ami automatikusan elindul az oldal betöltődésével:

    https://youtu.be/5ac1znMsrE8

    Pszichológiai háttér: a vásárlást követően mindig fellép egy buyer’s remorse-nak is nevezett lelkiismeret-furdalás, egyfajta veszteségélmény. Online ezt még természetszerűleg az is tetézi, hogy (kártyás fizetés esetén) a pénzbeli veszteségélmény azonnali, ugyanakkor a terméket nem foghatjuk azonnal a kezünkbe. A webshop pszichológia ezen találékony alkalmazása azonban segít ezen a problémán:

    A vásárlási élmény pozitív részének kiterjesztése és időbeni megnyújtása késlelteti, illetve mérsékli a buyer’s remorse jelenségét, arról nem is beszélve, hogy a webshopoknál értelemszerűen nagyon nehezen kommunikálható szolgáltatást és a minőség-érzést egy videón keresztül beemeli az összképbe.

    Alkalmazási lehetőség: Bárhol alkalmazható a vásárlók érzelmi kötődésének és a vásárlási élmény felturbózásának növelésére.

    Technikai nehézség: A videó miatt költséges, de technikailag rendkívül egyszerű webshop pszichológiai fogás. Amennyiben a webshop motorod lehetővé teszi a vásárlás utáni köszönő oldal szerkesztését, akkor csak beágyazod a videót és kész is.

    3. Videó a termékről – Glossier

    Ha már videó, akkor íme még egy nagyon egyszerű fogás, amit bármelyik webshop tulajdonos használhat: a termékképek mellett nyugodtan lehet rövid videókat is használni a termékek bemutatására – már ha az adott webshop motor képes ezt lekezelni (WooCommrce, Shopify és Magento környezetben ez simán megoldható). Valahogy így néz ki a dolog élőben:

    [cvm_video id=”30433″ volume=”25″ width=”820″ aspect_ratio=”16×9″ loop=”0″ autoplay=”0″]

     

    Pszichológiai háttér: A termékről készült statikus képek korlátozottan képesek visszaadni a felhasználáshoz kapcsolódó érzéseket – ez azonban mozgóképpel simán áthidalható. Amikor a látogató látja, ahogy mások használják a terméket, akkor ugyanazok a kémiai folyamatok indulnak el az agyában, mint ha Ő maga is éppen ezt tenné. (Amúgy ennek a agyi mechanizmusnak köszönhető például a focimeccseken a gólöröm miatti ösztönös felállás is – de erről majd máskor…)

    Alkalmazási lehetőség: Szinte bármilyen webshopban alkalmazható. Nem csak használat közben érdemes bemutatni a terméket, hanem a részletekből is össze lehet vágni egy pár másodperces videót. A videós tartalmaktól sokan megijednek, hogy “hű, biztos méregdrága”, de gondolj csak bele: ezek 3-4 másodperces snittek – jellemzően egy kaptafára. Azoknál a webáruházaknál, ahol 40-50 kiemelt termék van, és a termékek forgási sebessége sem vészes, ez akár egyetlen forgatási nap alatt is megvan. A konverzióra gyakorolt hatása azonban elképesztő!

    Technikai nehézség: Ha profi webshop motort használsz, ami lehetővé teszi ezt a funkciót, akkor pofon egyszerű és a megvalósítás költsége sem horror. Ha nem, akkor érdemes elengedni, mert csupán némi webshop pszichológia miatt belehegesztgetni valami petákolt webshop motorba, amihez képest az első kvarcórád földönkívüli technológiának számított, az nem túl nyerő ötlet. Persze ilyenkor mindig ott van számodra a nagy sóhaj és migrálás Shopify-ra lehetőség… 😉

    [adning id=”29660″]

     

    Csak mondom… 🤷‍♂️

    4. Kis webshop pszichológia a visszaküldés csökkentésére

    2020-ban az online vásárlások 10%-át,

    világszerte összesen 428 milliárd dollár értékű árut küldtek vissza a vásárlók!

    Ez brutális mennyiség. E-kereskedelemmel foglalkozó ügyfeleinktől itthon is horror sztorikat hallunk az egyre növekvő visszaküldési szokásokról. S bár a visszaküldéseket megszüntetni nem lehet, a profi e-kereskedelmi vállalatok számos technikai trükk mellett pszichológiával is felvehetik a harcot a visszaküldések ellen.

    A visszaküldési feltételeknek a visszaküldési arányra gyakorolt hatásáról megannyi kutatás született – akit mélyebben érdekel a webshop pszichológia, az kezdje ezzel a cikkel, vagy ezzel az infografikával. Hogy ne csigázzam a kedélyeket:

    Ha kisebb visszaküldési arányt akarsz, biztosíts hosszabb időt a visszaküldésre.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]

    Hogy MICSODA??? 😳

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    Nem elírás, a paradoxon valós és a fenti linkeken található mérések bizonyítják! E meglepő tapasztalati ténynek több magyarázata is lehet (kauzalitást tekintve egyiket sem igazolták, de ettől még működik). Valószínűleg szerepet játszik a jelenségben a megvásárolt termékhez történő hozzászokás és a feledékenység is – csakúgy, mint a viszonosság elve. Amit érdemes megjegyezni, hogy a hosszabb visszaküldési idő lehetősége alacsonyabb visszaküldési aránnyal jár, ráadásul

    a return policy visszafizetést érintő engedékenyebb passzusai egyértelműen korrelálnak a megnövekedett kosárértékkel.

    Alkalmazási lehetőség: Fashion-ben óvatosan, a visszaküldési arány csökkentését szolgáló egyéb UX megoldásokkal együtt alkalmazandó, más iparágakban önmagában is működik ez az egyszerű kis webshop pszichológia.

    Technikai nehézség: Nagyon könnyű, de a megengedőbb szabályokat megfelelően kommunikálni kell a vásárlók felé, hogy tudatában is legyenek a nagyvonalúságnak. Értelemszerűen a vásárlást megelőzően kommunikáld – mondjuk a termék oldalon -, ne a vásárlást követő tranzakciós emailekben hívd fel rá a figyelmet…

    5. A vásárlási élmény folytatása – Burberry

    Finom pszichológiai fogásokat a nagy márkáknál is bőven lehet látni – a Burberry például tableten (desktopon nem próbáltam) mutat egy bezárható sávot az oldalra visszatérőknek azokról a termékekről, amiket utoljára megnézett – valahogy így:

    webshop e-commerce trükk a Burebrry oldalán

    Pszichológiai háttér: Nem kell körmönfont webshop pszichológia ahhoz, hogy belássuk: ha egy vásárló nyitva hagyott valamit egy böngésző ablakban, akkor azt valószínűleg azért tette, mert még vissza akart térni az adott oldalra. Ha azonban mindig azon a termékoldalon “hagyod” a vásárlót, ahol abbahagyta a böngészést, akkor a korábban látott termékeket simán elfelejti. A Burberry a Zeigarnik-hatásra apellál, azaz arra a jelenségre, hogy a befejezetlen dolgok tovább megmaradnak a memóriában. Amikor egy vásárló visszatér a Burberry oldalára és nem egy, hanem több terméket lát, akkor minden egyes látott terméket egy fokkal jobban be fog vésni a memóriájába, hiszen még egyiket sem vette meg.

    Alkalmazási lehetőség: Online retail e-commerce-ben szinte bárhol alkalmazható.

    Technikai nehézség: Ha a használt téma, vagy webshop motor nem is tudja, akkor is legfeljebb közepes nehézségű, egy time delayed popup ablakkal megoldható – írástudó (szoftverfejlesztő Kolléga beceneve az online marketing szlengben) azonban kelleni fog hozzá.

    A webshop pszichológia megtérülése

    A pszichológia – és úgy általában a konverzió optimalizálás minden formája – nem csak hatékony, hanem rendkívül olcsó eszköz is, hiszen pár apró módosítással hosszú évekre meg lehet növelni a konverziós arányokat. Amennyiben komolyan veszed a vállalkozásod e-commerce vonalát, érdemes rendszeresen áttekinteni, hogy hol és milyen módon érdemes bevetni a különböző pszichológiai fogásokat. A lényeg azonban – mint minden marketing fogásnál – a folyamatok javítását állandóan szem előtt tartó attitűd…

    …a fentiekhez hasonló webshop pszichológiai fogások ugyanis csak akkor fognak hosszú távon működni, ha nem átverni és irányítani próbálod a vásárlóidat, hanem valóban segíteni próbálasz abban, hogy olyan vásárlási döntéseket hozzanak, ami boldoggá teszi őket, ha pedig meghozták ezt a döntést, akkor olyan vásárlási élményben legyen részük, ami kifogástalan!

    Ha van más e-commerce pszichológiai fogás a tarsolyodban, vagy a fentiek kapcsán felmerülne kérdés, akkor kérlek ne habozz megosztani a 7Blog olvasóival; kommentek bátorítva, mint mindig! Ha pedig megteszed, hogy megosztod valakivel, akinek esetleg hasznára lehet a cikk, akkor hálás köszönet és örökös 10 fölötti FB ROAS!

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]Utóirat

    Régebben gondolkodtam rajta, hogy kellene egy A-Z-ig Prémium összefoglaló az e-commerce UI és webshop pszichológia optimalizációs technikákról, azonban nem tölteném szívesen az időt olyan fogások taglalásával, amit amúgy mindenki kívülről fúj. Szóval itt és most felteszem a 7Blog olvasóknak a nagy kérdést:

    [totalpoll id=”29787″]

    Ha elég sokan kérik, akkor az e-comm-os és a designer Kollégákkal nekiállunk… Up to you![/vc_column_text][/vc_column][/vc_row]

  • 11 Bizonyított CTA Trükk – Siker Gombnyomásra

    11 Bizonyított CTA Trükk – Siker Gombnyomásra

    [vc_row][vc_column][vc_column_text]

    Minden weboldalon, ahol akarnak valamit a látogatótól, előbb-utóbb lesz egy gomb (a CTA jelentése: Call-to-Action), amit meg kell nyomni. Talán meglepő, de menny és pokol között mozoghat az üzleti eredményed attól függően, hogy ez a gomb online marketing szempontból retek, átlagos, vagy épp tükörselyem módon van kitalálva – a CTA marketing szempontból ugyanis minden weboldal leglényegesebb eleme! Hogy jobban konvertáljon az oldalad, alább összeállítottunk egy 10 pontos pszichológiai alapú optimalizációs listát – íme ezeket csináld, hogy jobb legyen a konverziód:

    1. Törd meg a mintát

    Az emberi agy automatikusan rázoomolja a figyelmet a megszokottól eltérő jelenségekre. Ezt jelen esetben úgy lehet kihasználni, hogy az oldalad struktúrájába nem illeszkedő módon (off-the-grid) helyezed el a CTA-t. Mondjuk így:

    Vagy így:

     

    2. Legyen rajta hover effekt

    A krokodilagy (az agyunk tudatalatti, információ-szűrésért felelős része) a mozdulatlan vackokat lazán skip-peli, ha közben talál valamit, ami mozog, villog, vagy interakciót mutat. Legyen egy hangyányi rollover (hover) effektus azon a gombon és megint csak nőni fog a nyomkodások aránya.

    3. Szín

    Szeresd a zöld vagy kék színű gombokat – ezek a “megengedő” színek, de vannak mérések, amik a narancssárgát vagy épp a pirosat hozták ki nyerőnek (valószínűleg a magas kontraszt miatt). Én a piros CTA-t tesztelni szoktam, nehogy a tiltó szín miatt bukjam be a témát – bár a ConversionXL szerint a piros a nyerő a zölddel szemben. Amennyiben olyan színt használsz, amit az oldalon máshol nem, a kontraszt kellően nagy és a szín maga élénk, akkor nagyon nem futhatsz lukra. Arra figyelj még, hogy a választott szín azért kontextusban legyen a kulturális környezettel és a tartalommal – ha például a ketrecharcos edzőtábort egy rózsaszín “Belekuksizok” feliratú gombbal tennéd fel a hazai gazdasági csodák térképére, akkor elképzelető, hogy mintát rágsz a kilincsbe, mire befut az első klikk…

    4. Kontraszt

    Még a méhek is a kontrasztosabb virágot választják – az emberek figyelmét is a magasabb kontraszttal bíró dolgok vonzzák. Minél nagyobb kontraszt a gomb és a környezete között, annál több kattintásod lesz a gombon.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]

    2022 Update

    Az elmúlt évek során CTA-k százainak teljesítményét mértük és elemeztük. A kontraszt bizonyult az egyik leglényegesebb tényezőnek mind közül, méghozzá kettős összefüggésben: a gomb és környezetének kontrasztja ugyanolyan fontos, mint a gomb szövegének és magának a gomb felületének a kontrasztja. Nagy kontraszt = magasabb átkattintás, ez az a szabály, ami alól nem találtunk kivételt!

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    5. CTA a semmi közepén

    Vannak, akik patológiás kényszert éreznek rá, hogy minden üres felületet szanaszét trollkodjanak valami rettentően jelentéktelen, töltelék sóderrel az oldalukon – a marketing álmoskönyv szerint ez azonban elég szuicid ötlet. Inkább legyen a gomb körül elégséges mennyiségű white space, azaz “semmi” – nem csak azért, mert elegánsabb, hanem mert a nagy fehér semmivel lesz a legkontrasztosabb a gombod.

    6. Szöveg

    A gomb szövegét tekintve a legfontosabb, hogy egyértelmű, rövid és érthető legyen. Az unbounce szerint ha egyes szám első személyt használsz a feliraton, az akár 90%-kal is turbózhatja a konverziót. Próbálkozhatsz a benefit megjelenítésével is. Ahelyett, hogy “Iratkozz fel”, jobban konvertál a “Feliratkozom” – persze még mindig roggyant lesz az egész, mert a “feliratkozás” egy behányásig elhasznált, az ezredfordulón lejárt szavatosságú kifejezés. Ha mondjuk csoda-fogyi tablettát árulsz, akkor a “Megveszem” helyett a “Lefogyok 10 hét alatt” jobban fog konvertálni… A szövegírás pszichológiai technikáiról amúgy van egy egész kurzusunk is, amit ezen a linken megtalálsz.

    7. Click booster-ek

    Klikk booster-nek hívjuk a gombok környékén elhelyezett olyan vizuális elemeket, amik álomcsapda módjára űzik el a látogatók paráit és kétségeit – legtöbbször tudat alatt. Ha a gombodat körültrappolod pár klikk booster-el, sokkal többen nyomják majd a tutit. Ilyen például a termék review, az öt sárga csillag, a garanciák, a biztonságos fizetés ikonok, a média outlet ikonok, de attól sem borul rád a tinta, ha odavésed, hogy mi fog történni, ha megnyomom a gombot.

    8. Iker CTA

    Az amatőr vetítéseken az fog visszhangozni, hogy egyetlen CTA-d legyen az oldalon, mondván, hogy úgy nincs figyelemelvonókúra – egy gomb mind felett, bele az arcodba: “Apafej, ne agyalj, ne keresd a tegnapi napot, kattints szépen  libasorba’!”

    Ne higgy a háttérzajnak, van ennél kóserebb megközelítés: Az adott akció marketing funnel-ben betöltött szerepe szerint egy vizuálisan kevésbé attraktív, és a döntés pszichológiájának szempontjából kisebb elköteleződéssel járó alternatívát is célszerű ajánlani: “Vedd meg – tudj meg többet”, “Írj nekünk – nézd meg a portfóliónkat”. Valahogy így néz ki a dolog:

    vagy így:

    vagy így:

    A dolog háttere, hogy egyetlen gombnál a két kézenfekvő opció: megnyomni, vagy nem megnyomni – a tápos krokodilagy tudat alatt ebből a kettőből fog választani. A kettős CTA-nál a kézenfekvő opciók: megnyomni A-t, vagy megnyomni B-t – és hát mind a kettő az én gombom, úgyhogy egyik sem hozza rám a rontást… Ha most rázódsz bele a marketing mélységeibe, jobban jársz egyetlen CTA-val, de ha profi vagy, kísérletezz bátran kettővel – mérni amúgy is kötelező. Ha kíváncsi vagy az iker CTA-k Mariana-árok mélységeire, akkor ide haladj tovább.

    9. Triple CTA

    És van, amikor a kettő is kevés: Ha muszáj több gombot alkalmaznod (pl. egy három változatú szolgáltatás-csomagnál), akkor úgy operálj, hogy a háromból egy lógjon ki a sorból. A látogató agya ezt az Ariely-effektus (11.00-től) alapján azonnal kizárja – és marad kettő. Mondjuk a három csomag havi 29$, 59$ és 399$… hacsak nem a “Föld és a környező naprendszerekben élők” szélességű célzással hirdetsz (mondjuk Facebook-on), akkor úgyis kellően szegmentált csoportot – mondjuk kisvállalkozókat – viszel az oldalra, akiknek a krokodilagya élből dob egy fintort a havi 399 dodótól – ezért az első kettőből fognak választani. Ezt azzal is megerősítheted, ha a luxus csomag vizuálisan is kilóg a sorból…

    10. Támaszd alá képpel

    Próbáld ki, hogyan változik a kattintási arány, ha az oldalon található háttérkép vizuálisan a CTA irányába tereli a látogatót. Mondjuk a képen található mókusok a CTA irányába néznek, vagy a kezükkel abba az irányba mutatnak. Teszteld nyugodtan, de csípőből mondom: Mérhetően magasabb átkattintási arányt fog villantani az oldal.

    11. Finoman animáld meg az egész gombot

    Vannak olyan UI megoldások, amikkel az egész gombot meg tudod rázni egy kicsit. Van, ahol működik és van, ahol konverzió szempontjából kontraproduktív is lehet, ezért ki kell mérni, hogy a közönségednek mi fér bele. Ezen a linken megnézheted, hogy működik egy ilyen effektus.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]

    2021 Update

    Megannyi landing oldal CTA-jét tesztelve az elmúlt három évben egy nagyon fontos dolgot sikerült megtanulnom a jól működő CTA-król, ez pedig a következő: Tedd teljesen nyilvánvalóvá a látogatóidnak, hogy mit kell tenniük, és miért – azaz milyen előny elérése végett – kellene ezt tenniük.

    Ezt úgy lehet a legegyszerűbben megtenni, ha a CTA akár szöveghűen arra a tartalomra reflektál, ami megelőzte a CTA-t az adott oldalon, azaz például a főcímmel azonos szavakat használva, a címmel és a tartalommal azonos előnyt ígér.

    Ha például a főcím a “Hogyan szerezz ezer követőt a Twitter-en”, akkor a CTA legjobban konvertáló szöveg-alternatívja valami olyasmi lesz, hogy “Szerezz Twitter követőket ingyenes útmutatónkkal ›”. Ez nagyobb valószínűséggel rezonál majd azoknak a törekvéseivel, akik épp most olvasták végig a cikket ugyanerről a témáról, ráadásul természetes folytatását is jelenti ugyanannak a témának.

    (Amúgy a fenti példa egy úgynevezett tartalom upgrade lead mágnes, ami 2021-ben már szinte alig működik. De a koncepció a CTA-ról azért remélem, átment a példával.)

    Megannyi weboldal optimalizálása és felépítését követően a másik gyakorlati tapasztalatunk az volt, hogy ha a CTA alá akár nagyon halványan is, de odateszel egy pár szavas szöveget, ami a gombnyomással járó apró feszültséget hivatott  csökkenteni a látogató agyában, az komolyan növelheti az átkattintási arányt. Valami ilyesmire kell gondolni:

    CTA példa Bóné László ügyvéd weboldaláról[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    Summa

    A CTA-nak is sok ezer oldalas szakirodalma van. Mivel nincs két egyforma oldal, nincs automatikus recept a tökéletes gombra sem. A fentieket használhatod sorvezetőnek, próbálgathatod alkalmazni őket, de a legfontosabb, hogy tesztelj és mérd a különbségeket. Az online marketingben az a szép, hogy minden okoskodás addig igaz, amíg az ellenkezőjét be nem bizonyítják a mérések… Ha még több optimalizálási lehetőségre vágysz gyorsan és kódolási tudás nélkül, akkor ezt az eszközt próbáld ki:

    Tisztelet a bevételnek! Folyt. köv.!

    Ha van kedvetek, addig sasoljátok meg, hogyan lehet feltolni a bevételt 340%-kal egy magyar e-commerce vállalkozásban – kizárólag az AdWords-ben matatva (angol nyelvű case study).

    [/vc_column_text][/vc_column][/vc_row]

  • Hogyan gyorsítsd fel a WordPress weboldalad 2019-ben – A Nagy Sebesség Útmutató

    [vc_row section_id=”bevezetes”][vc_column width=”1/4″][vc_custom_heading text=”” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1502450690158{margin-bottom: 18px !important;}”][impeka_slogan title=”Bevezetés” heading=”h3″ subtitle=”TARTALOMJEGYZÉK ÉS” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][vc_column_text]

    [lwptoc depth=”1″ hierarchical=”1″ title=”TARTALOMJEGYZÉK” toggle=”0″ width=”full”]

    [/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]Nagyon sok hasznos és haszontalan cikk vagy videó kering a neten arról, hogy hogyan is tudunk egy WordPress weboldalt  minél gyorsabbá, és ezáltal annál felhasználóbarátabbá is tenni. Mi most megpróbálunk segíteni eligazodni ebben az útvesztőben, ezért összegyűjtöttük a valóban hatékony, és érezhető javulással kecsegtető megoldásokat. Azt viszont fontos hozzátenni, hogy van, amiből nem lehet várat építeni, tehát itt is nagyon sok múlik azon, hogy milyen minőségű az adott weboldal – milyen sablonból, milyen pluginokkal, és milyen fejlesztő rakta össze.

    Bevezetés – A sebesség, mint eladásösztönző!

    Mint arra egyre több kutatás rávilágít, a gyorsan betöltődő weboldalak jelentősen növelik a látogatók elköteleződését és megtartását, ezek következményeként pedig az értékesítésben is érezhető javulást eredményeznek. Az azonnali szerver-válasz és a villámgyors oldal-betöltődési sebesség nagyobb konverziós arányt eredményez, a betöltés sebességének minden másodpercenkénti késleltetése viszont jelentős, százalékpontokban kifejezhető lemorzsolódáshoz vezethet.

    Nem meglepő, hogy a betöltődési sebesség az egyik legmeghatározóbb faktor egy jól konvertáló weboldal esetében – arról nem is beszélve, hogy a sebesség hatással van az organikus forgalomra is, mivel a gyors oldalakat a találati listán előbbre, a lassúakat pedig hátrébb sorolja a Google és a Bing is.[/vc_column_text][impeka_title heading_tag=”div” heading=”h5″ align=”center” title=”Egyetlen másodperccel hosszabb betöltési idő” margin_bottom=”10px”]Egyetlen másodperccel hosszabb betöltődési idő hatása:[/impeka_title][impeka_empty_space][impeka_progress_bar bar_style=”style-2″ values=”16|VÁSÁRLÓI ELÉGEDETTSÉG CSÖKKENÉS,11|VISSZAESÉS AZ OLDALMEGTEKINTÉSEKBEN,7|KONVERZIÓS ARÁNY CSÖKKENÉS” color=”primary-4″ bar_line_style=”round”][impeka_empty_space][vc_column_text]

    És mi újság a WordPress-szel ezen a téren?

    Nos, mivel manapság a weboldalak több, mint 32%-a WordPress alapon fut, számtalan plugin és egyéb megoldás próbál segítségünkre lenni a sebesség-optimalizálásban. Most ezekből mutatunk egy hasznos kis csokorra valót, hogy valóban lehetőséged legyen a weboldalad felgyorsítására.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”joszerver” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”0.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546869803603{margin-bottom: 18px !important;}”][impeka_slogan title=”Egy jó szerver” heading=”h3″ subtitle=”Alap, de a legfontosabb:” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Nem lehet elégszer hangsúlyozni, hogy egy megfelelően kiválasztott tárhelyszolgáltatón mennyi minden múlik! És mégis, mennyien beleesnek abba a hibába, hogy olcsó (- értsd: minőségileg is olcsó) tárhelyszolgáltatást választanak. Igaz, nagy a választék, de ezen a ponton megéri nem csak a pénztárca alapján dönteni. Az igényeknek megfelelően két nagyobb tárhelyszolgáltatás-kategóriát tudunk elkülöníteni, értelemszerűen a kisebbtől a nagyobb forgalmú webhelyek igényei felé haladva.

    Osztott tárhelyek

    Ezek a legnépszerűbb szolgáltatások, és valljuk be, egy átlagos honlap számára általában maximálisan elegendők is. Persze ez sok kompromisszummal is jár, ezek közül a leggyakrabban előforduló galiba az időszakos belassulás. Aki ilyen tárhelyet választ, az előbb-utóbb tapasztalni fogja ezt. Hogy miért?

    Azért mert a szolgáltatók az osztott tárhelyeket túlzsúfolják, de legalábbis igyekszenek kimaxolni a kapacitásukat.

    A gyakorlatban ez azt jelenti, hogy adott esetben több száz másik weboldal is ott csücsül a miénk mellett – és hát ugyanazokat az erőforrásokat használják, amit a mi honlapunk is szeretne. Ha viszont ezek az erőforrások épp foglaltak, akkor az oldalunk belassul, extrémebb esetben 500-as hibaüzenetet dob, még rosszabb esetben leáll (a szerverrel együtt). De a szerver valamelyik másik weboldalán lévő súlyos probléma is átgyűrűzhet a mienkre osztott szerver esetén, bár ez azért valóban ritka eset, tényleg csak nagyon gagyi szolgáltatóknál szokott előfordulni.

    Mikor ajánlott: kis forgalmú weboldalak esetén, akkor is ideiglenesen

    VPS tárhelyek

    A tárhelyszolgáltatások második nagyobb csoportját az ún. VPS (Virtual Private Server) szolgáltatások alkotják. Ehhez már kicsit több szerverkezelési és fejlesztői tapasztalatra van szükség, hiszen itt már szabad kezet kapnak az ügyfelek a hardware-ek felett, de még mindig fontosabb szempont a költséghatékonyság a teljesítménynél. A saját virtuális számítógépre általában tetszőleges Linux operációs rendszer telepíthető root adminisztrátori hozzáféréssel.  Mivel itt az ügyfél kezeli a szervert, hozzáértő kezekben nagyszerű választás lehet, de a megfelelő hozzáértés hiányában nem érdemes rákölteni, hiszen ilyenkor a telepítéseket, a konfigurálásokat és a karbantartást is magunknak kell megoldani.

    Mikor ajánlott: nagyobb forgalmú és/vagy egyéni szerverkonfigurációt igénylő weboldalak esetén

    +2 tárhelytípus

    Említést érdemel még az előbbieken felül két tárhelytípus:

    • Amikor saját szerver üzemeltetésére adjuk a fejünket, ez azonban magasfokú szakértelmet, minőségi hardware-eket, és probléma esetén gyors rendelkezésre állást követel a tulajtól, tehát magáncélú felhasználás esetén nem elterjedt megoldás.
    • Illetve egyre nagyobb teret nyernek a Managed Hosting szolgáltatások, amik borsos (osztott tárhelyekhez képest akár 8-10-szeres) felár ellenében teljes szervermenedzsmentet kínálnak a honlapnak. Ebbe beletartozik a teljes backend szerver beállítás, magas rendelkezésre állású és széleskörű segítséget nyújtó ügyfélszolgálat, automatikus biztonsági mentések és egykattintásos telepítőkörnyezetek. Vastag pénztárcával megáldott teljesen kezdőknek is ajánlott.

    [/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”szerver-helye” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”01.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546870575928{margin-bottom: 18px !important;}”][impeka_slogan title=”Földrajzi elhelyezkedése” heading=”h3″ subtitle=”A szerver” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Bár nem különíthető teljesen el az előzőtől, mégis érdemes külön pontot szentelni ennek, hiszen hasonlóan fontos szerepet tölt be weboldalunk betöltődési sebességében a kiszolgáló szerverek földrajzi közelsége (vagy éppen távolsága). Mindenekelőtt tehát határozzuk meg, hogy weboldalunk látogatóinak legnagyobb része milyen országból/régióból fogja megtekinteni az oldalunkat, és lehetőleg olyan tárhelyszolgáltatót válasszunk, aminek a szerverei a régióban vagy legalábbis annak közelében találhatóak. A szerverek földrajzi elhelyezkedése ugyanis nagyon fontos szerepet játszik a hálózati késleltetés (azaz mennyi időbe telik egy adatcsomagnak eljutni az egyik pontból a másikba) és a TTFB (Time to First Byte – azaz, hogy mennyi ideig kell várnia a böngészőnek az első beérkező bájtocskára) szempontjából. A lényeg pedig, hogy ezek olyan mutatószámok, amik annál jobbak, minél kisebbek.

    Pro Tipp: A helyes helyszín meghatározásában sokat segíthet a Google Analytics, adott esetben a Search Console is, vagy eCommerce esetén a vásárlók lakhelyének meghatározása.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”php” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”02.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546870987467{margin-bottom: 18px !important;}”][impeka_slogan title=”PHP 7.x” heading=”h3″ subtitle=”Legalább” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Bár lehet, hogy meglepő sokak számára, de a PHP 7.x verziói hatalmas, sokszor másodprecekben mérhető javulást hozhatnak a weboldal betöltődési sebességében. A PHP 5.6-ot a PHP 7.2-vel összehasonlítva közel 3-szoros sebességnövekedést ért el az utóbbi, ami szemmel látható különbséget jelent a gyakorlatban. És az új PHP verziók nemcsak gyorsabbak, hanem sokkal biztonságosabbak is a régebbi verzióknál, tehát a modernebb verziók használata nem csak ajánlott, hanem szinte kötelező, ha jó teljesítményű weboldalt szeretnénk üzemeltetni.

    A WordPress „lelke” PHP-ben készült, nem beszélve a hozzá készült sablonokról és pluginekről, ami a PHP-t az egyik legfontosabb nyelvvé teszi WordPress használók számára.

    Sok tárhelyszolgáltató még mindig kínál tárhelyet PHP 5.6-tal (vagy még régebbi verziókkal), ezeket azonban 2019-ben már messze érdemes elkerülni, hiszen ezen verziók támogatása vagy már meg is szűnt, vagy hamarosan meg fog szűnni. Annál is inkább, mert a PHP töretlenül fejlődik, pár hete már meg is jelent a PHP 7.3, ami még a 7.2-höz képest is jelentős gyorsulást ígér![/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”wp-beallitasok” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”03.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546871112967{margin-bottom: 18px !important;}”][impeka_slogan title=”WordPress beállítások” heading=”h3″ subtitle=”Megfelelő” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az előző pontokban végigmentünk az optimális szerver tulajdonságain, ami megfelelő környezetet biztosít a WordPressünk számára. Itt azonban nem áll meg a tudomány, a WordPress-t ugyanis be is kell állítani ahhoz, hogy igazán gyors lehessen. Nézzük is meg, mik azok a tényezők, amik a WP lassulását okozhatják:

    A beépített WordPress frissítéskezelő

    Ha a WordPress adminjába belépve jelentős lassulást tapasztalunk, akkor azt sok esetben a rendszer részét képező frissítéskezelő folyamatos lekérései eredményezik (viszont nem kizárólagosan, tehát előtte mindenképp ellenőrizzük a hálózat és a szerver leterheltségét, illetve PHP verzióját is). Ha az utóbbiak rendben vannak, akkor nagy eséllyel megállapíthatjuk, hogy WP frissítéskezelője fut túl sokat a háttérben.

    A probléma eredete abban keresendő, hogy a frissítéskezelő külső GET lekérésekkel dolgozik. Ha ezek a lekérések csak időszakosak, akkor általában nem is szokott gondot okozni, ha viszont a lekérés valamiért gyakoribb (vagy adott esetben állandóvá válik), az a WordPress admin felületét akár használhatatlanná (vagy legalábbis idegőrlően lassúvá) is teheti. Szóval ha be van lassulva a WP vezérlőpult, érdemes tenni egy próbát az automatikus frissítések kikapcsolásával – erre számtalan plugin is lehetőséget biztosít. Ilyenkor azonban nekünk kell manuálisan ellenőrizni az egyes frissítéseket, hiszen egy-egy frissítés a funkcióbővítések mellett számtalan esetben biztonsági réseket foltoz be.

    Hetekre-hónapokra frissítetlenül hagyni az oldalunkat nagyon rövidlátó magatartás; amennyiben beüt a baj, a kiesés, a hitelesség elvesztése és a sürgős javíttatás miatti számla jóval magasabb lesz, mint egy rendes üzemeltetés kiszámítható költsége.

    Egyidejűleg megjelenített bejegyzések számának korlátozása

    Bár kézenfekvőnek tűnhet, mégis sokan esnek ebbe a hibába. Főleg nagyobb oldalaknál lehet ez probléma, ahol már sok bejegyzéssel (vagy egyéb bejegyzéstípussal) van tele az oldal. Ilyenkor, ha – a példa kedvéért vegyünk egy blog gyűjtőoldalt – több száz bejegyzés kilistázódik egyszerre thumbnail-képestül-mindenestül, az még egy komolyabb szervert is meg tud izzasztani. Szerencsére ez nagyon könnyen elkerülhető:

    A megoldás (megfelelő magyar szó hiányában) a pagination, ami azt jelenti, hogy beállíthatjuk az egyszerre egy oldalon/lapon/fülön megjelenő bejegyzések számát. Egyszerre tehát elég mondjuk (beállítástól függően) öt bejegyzést megjeleníteni, és ha a felhasználó kíváncsi többre, akkor kattintás után újabb öt bejegyzést láthat. Ennek – ha úgy tetszik – egy még továbbfejlesztett verziója a végtelen görgetés (infinite scrolling), ami leveszi a felhasználóról a továbbkattintás terhét, és ha továbbgörget az első öt bejegyzésen, akkor automatikusan betöltődik a következő öt, és így tovább. Tehát láthatjuk, hogy ilyenkor sem egyszerre tölt be az összes bejegyzés, így jelentősen megkönnyíthetjük a szerverünk dolgát.

    Erre is létezik számtalan plugin, sőt, a jobb minőségű prémium sablonok is rendelkeznek hasonló beállítási lehetőségekkel.

    A HTTP lekérések minimalizálása

    A weboldalunk minden eleme HTTP lekérést generál (képek, scriptek, CSS stíluslapok, videók, beágyazások, stb.), azaz minél több eleme van az oldaladunknak, annál tovább fog tartani a betöltés. Nincs azonban minden veszve, csak érdemes betartani az alábbi cikkünkben is említett pontokat a HTTP lekérések minimalizálására és a weboldal betöltődési idejének gyorsítására:

    • Hagyj el minden felesleges elemet az oldaladról. Ha valami tényleg haszontalan és nem jelent értéket, akkor kukába vele
    • Használj CSS-t képek helyett, amikor csak lehet
    • Kombináld egybe a stíluslapokat, amikor lehetséges
    • Csökkentsd le a felesleges scriptek számát az oldaladon

    Ebben sokat segíthet a Gonzales plugin, ami arról híres, hogy oldalanként gyomlálhatóak ki vele a feleslegesen betöltődő kódrészletek egy alsó tagozatosok által is átlátható grafikus felületen.

    [/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”sablon” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”04.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546872948416{margin-bottom: 18px !important;}”][impeka_slogan title=”Minőségi sablon” heading=”h3″ subtitle=”Prémium” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az egyik legfontosabb. Pont. Egy jó sablon egy jó weboldal biztos alapja. Lehet persze jó sablonnal is rossz honlapot készíteni, fordítva viszont sajnos nem szokott működni a dolog; nagyon fontos tehát a körültekintő témaválasztás. Itt érdemes megemlíteni, hogy sok sablonnak van ingyenes verziója is, azonban aki már dolgozott ingyenes és fizetős sablonnal is, az nagy valószínűséggel érteni fogja, hogy

    ha honlapot szeretnénk, ne ezen a ~60$-on akarjunk spórolni!

    Ez persze nem jelenti egyből azt, hogy nem is létezhet jó ingyenes sablon, ahogy azt sem, hogy minden prémium sablon automatikusan jó.

    Akkor most mi van?

    Ahhoz, hogy kiválasszuk a számunkra legmegfelelőbb sablont, két választási lehetőséget érdemes fontolóra venni*:

    • vagy olyan sablont választunk, ami kizárólag azzal a funkcionalitással rendelkezik, amire szükségünk van
    • vagy egy olyan sablont, ami kellően sokoldalú és funkciógazdag, de a számunkra haszontalan funkciókat ki tudjuk benne kapcsolni (így nem eszi feleslegesen az erőforrásokat)

    *természetesen a jó kódminőség és a gyorsaság alap, másmilyen sablont ne is nézzünk

    Amiket érdemes kikapcsolni, mert sokat lassíthatnak a honlapon, ha nincs rá szükségünk:

    • felesleges ikonkészletek meghívása
    • felesleges betűtípusok meghívása
    • felesleges scriptek meghívása (pl: képgalériák, videónézegetők, sliderek, parallax effektek) « Lásd: HTTP lekérések minimalizálása

    [/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”plugin” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”05.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873141813{margin-bottom: 18px !important;}”][impeka_slogan title=”Megválogatott pluginek” heading=”h3″ subtitle=”Prémium” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Szintén nagyon fontos a megfelelő pluginválasztás, de még minőségi pluginokból sem érdemes túl sokat használni egyszerre, hiszen a túl sok plugin egész egyszerűen belassítja a WordPresst. A recept tehát ez esetben is egyszerű: ha lehetséges, ne használjunk sok plugint egyszerre, és amiket használunk, azok legyenek magas minőségűek. A magas minőséget nehéz mérni, de támpontot adhatnak a következők:

    • saját tapasztalat
    • mások tapasztalata (értékelés, vélemények, tesztek, support fórumok)
    • frissítések gyakorisága (biztonsági)
    • frissítések gyakorisága (funkcióbővítő)
    • Support/fejlesztő elérhetősége, gyorsasága, segítőkészsége
    • a plugin ára (ha fizetős)

    Szóval, akárcsak a sablonoknál, itt is rengeteget számít a kód minősége, és a megfelelően gyors működés. Mivel viszont az elérhető pluginok száma nagyjából a végtelent karcolja, sokszor tényleg nehéz a választás. Ha pedig specifikus problémára keresünk megoldást, nem biztos, hogy van egyből megfelelő (értsd: elég jó) megoldás. Egyszerűbb igényekhez azonban érdemes átnézni ezt a gyűjtést, van köztük pár nagyon hasznos okosság.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”cache” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”06.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873319023{margin-bottom: 18px !important;}”][impeka_slogan title=”Cache beállítások” heading=”h3″ subtitle=”Tökéletes” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Ha az eddigiekkel megvagyunk (jó szerver, jó beállítások, prémium sablon és pluginek), akkor nagy esélye van az oldalunknak a gyors működésre. Viszont a sornak még nincs vége, ugyanis egy megfelelően beállított cache (gyorsítótár) még tovább tudja gyorsítani az oldalt. Fontos kiemelni, hogy „megfelelően beállított”, mivel egy rosszul beállított cache többet tud ártani, mint használni (sokat lassíthat, vagy adott esetben el is szállhat tőle az oldal). Ha viszont hozzáértő kezek állítják be a cache-elést, akkor ez az egyik legegyszerűbb megoldás a WordPressünk gyorsítására! De ne szaladjunk ennyire előre…

    Mi az cache?

    Ha megpróbáljuk röviden és érthetően leírni a folyamatot, akkor ez a következőképpen néz ki:

    Minden egyes weboldal meglátogatása a WordPress-ünkben egy lekérdezés a szerverünk felé. A szerver feldolgozza ezeket a lekéréseket (beleértve az adatbázis-lekérdezéseket is), majd a feldolgozás után egy végső változatot küld a böngészőnknek, amit az meg tud jeleníteni. Ez az eredmény a weboldal, amit látunk minden fájllal és egyéb összetevőjével együtt. Valószínűleg már mindenki kikövetkeztette ebből, hogy minél nagyobb és összetettebb egy weboldal, annál több időbe telik a szervernek a lekérések feldolgozása – és ezáltal a végleges weboldal felhasználóhoz történő eljuttatása is.

    És ez az a pont, amikor képbe kerül a cache, és megoldja a problémánkat! A gyorsítótárazás ugyanis nem csinál mást, mint hogy eltárol néhány fájlt a lemezen (vagy a memóriában, konfigurációtól függően) a felhasználó gépén. Tehát eltárolódik az a tartalom, ami már egyszer legenerálódott a múltban, ezáltal az újra-létrehozáshoz szükséges idő a töredékére csökkenhet. Az eredmény magáért beszél: az egyes weblapok sokkal gyorsabban töltődnek be közvetlenül a gyorsítótárból, ez pedig a korábban kifejtett marketing előnyökön túl elsőrangú élményt biztosít.

    És hogyan tudom ezt használni a gyakorlatban?

    Alapvetően két irányból is megközelíthetjük a dolgot:

    Szerver-szintű cache

    Szolgáltatója válogatja, hogy elérhető-e vagy sem, ha azonban igen, akkor ez az egyik legegyszerűbb módja a cache-elésnek. Bekapcsoljuk, és jó esetben működik. Éppen ezért erre a cikkben nem is térnék ki részletesebben, sokkal érdekesebb ugyanis, ha megnézzük mi van akkor, ha nem működik a szerver-szintű cachelés, vagy a szolgáltatónk egyaltalán nem is biztosít rá lehetőséget.

    Cache beállítása plugin segítségével

    Ha szolgáltatói szinten nem biztosított a gyorsítótárazás, akkor sem kell lemondanunk a cache-ről, hiszen WordPress rendszerre természetesen cache pluginból is annyi van, mint égen a csillag. Itt is nagyon fontos tehát a körültekintő választás és a még körültekintőbb beállítás. Általánosságokat itt sem nagyon lehet mondani, hiszen választástól függően minden cache plugin beállítása más és más. Abban viszont tudunk segíteni, hogy mutassunk pár jól működő, általunk is tesztelt és használt, azaz bevált cache plugint a teljesség igénye nélkül. Íme:

    Swift Performance

    Kezes, jól testreszabható és nagyon nagy tudású cache plugin. Rendelkezik teljes értékű ingyenes verzióval is, azonban a teljesértékű és mindenre kiterjedő funkcionalitást csak a fizetős verzió biztosítja (pl.: képoptimalizáló, de erről majd később).

    W3 Total Cache

    Az egyik legnépszerűbb, ingyenes, és nagyon részletesen beállítható pluginról van szó. Az optimális beállítás sok időt vesz igénybe, de megéri a szöszölést.

    WP Rocket

    Szintén nagyon népszerű, de fizetős megoldás. Egyszerű adminisztrációs felület és gyors beállítás jellemzi – kezdők is tudják használni.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”adatbazis” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”07.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873511762{margin-bottom: 18px !important;}”][impeka_slogan title=”Tiszta adatbázis” heading=”h3″ subtitle=”Optimalizált és” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az oldalunk sebességének szempontjából igencsak meghatározó lehet az adatbázis mérete és tisztasága. Egy teleszemetelt adatbázis ugyanis durván be tudja lassítani a WordPresst, ehhez pedig túl aktívan nem is kell tennünk semmit, elég ha hagyjuk, hogy teleszemetelődjön magától (pl. oldal/bejegyzés változatokkal). De hogyan kerülhetjük el mindezt?

    Adatbázis optimalizáló plugin használata

    Az egyik legnépszerűbb (és ingyenes) megoldás a WP-Optimize használata. Ez felhasználóbarát módon segít kitisztítani az adatbázisunkat, de mindenképp körültekintően használjuk, mert biztonsági mentés nélkül visszafordíthatatlan károkat is okozhatunk vele. Természetesen sok másik megoldás is létezik, vannak fizetős pluginek is (részben) ezzel a funkcionalitással, szóval aki erre adja a fejét, érdemes jól körülnéznie!

    Manuális adatbázis-optimalizálás

    Természetesen azokat a teendőket, amiket az előbb említett plugin elvégez, megtehetjük mi magunk is, ha tudjuk, mit csinálunk. Érdemes lehet:

    • üríteni a lomtárakat,
    • törölni a spam hozzászólásokat,
    • törölni a régi bejegyzés- és oldalváltozatokat,
    • limitálni a menteni kívánt változatok mennyiségét,
    • vagy ha nincs rá szükség, kikapcsolni a változatokat,
    • megtisztítani a wp_options táblát (ez csak hozzáértőknek ajánlott),
    • különösen ajánlott az átmeneti rekordokat (transients) megtisztítani (bár ezek általában lejárati idővel rendelkeznek és idővel eltűnnek, a valóságban sokszor ez nem mindig történik meg magától, és manuálisan kell megsegíteni a folyamatot),
    • a WordPress Sessions tisztítása,
    • és végül, de nem utolsó sorban érdemes kikapcsolni azokat a nem használt funkciókat, amik használják az adatbázist (pl.: népszerű/kapcsolódó poszt widgetek, amik szinte mindig sitewide lekérdezésekkel rendelkeznek; olyan képoptimalizáló bővítmények, amik nem külső szervert használnak az optimalizálásra).

    [/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”kepek” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”08.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873670451{margin-bottom: 18px !important;}”][impeka_slogan title=”Webre optimalizált képek” heading=”h3″ subtitle=”Megfelelő méretű,” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]És el is jutottunk a legtöbb weboldal fizikai (tárolókapacitásban mért) méretét leginkább meghatározó weboldal-összetevőnkhöz: a képekhez. A legtöbb weboldal méretének több, mint 50%-át teszik ki a képek, még megfelelően optimalizált képek esetében is (optimizálatlanul ez az arány bőven 90% fölé is csúszhat). Vitán felül álló tény tehát, hogy egy weboldalra szánt képet feltöltés előtt optimalizálni KELL! A nagy méretű képek ugyanis hihetetlen módon képesek belassítani oldalt.

    Gondoljunk csak bele, hogy manapság egy nagyobb felbontású, akár mobillal készített kép is simán elérheti a 4-5MB-ot. Ha egy jól optimalizált weboldal óhajtott méretét 1-2MB-nak vesszük, akkor könnyen belátható, hogy akár már egyetlen optimalizálatlan képpel megháromszorozható a betöltődési sebesség. Ezt tehát igyekezzünk minden esetben elkerülni, ha akarunk még látogatókat az oldalunkon! De hogyan lehetséges jól optimalzálni a képeket? Itt is két „iskola” létezik alapvetően, de a legjobb, ha egyszerre alkalmazzuk a kettőt:

    Kézi optimalizálás

    A képek formázásának elsődleges célja a legalacsonyabb fájlméret és az elfogadható minőség közötti egyensúly megtalálása. Erre nincsenek konkrét szabályok, bízni kell magunkban vagy a grafikus szakemberben. Minden valamire való képszerkesztő programban lehetőségünk van webre optimalizáltan kimenteni a képeket, azonban nagyon oda kell figyelni a megfelelő fájlformátum használatára, valamint a tömörítés fajtájára és mértékére (veszteséges/veszteségmentes).

    Ökölszabályként azonban elmondható, hogy szerencsés, ha egy kép a mentés után sem több 300 kB-nál.

    Képoptimalizálás plugin segítségével

    Természetesen a WordPress ahol tud segít, tehát ezen a téren is rengeteg plugin közül válogathatunk. Az egyik legjobb (fizetős) megoldás a cache-résznél is említett Swift Performance plugin prémium verziója, ami nagyon hatékonyan, külső szolgáltatás használatával tömöríti a feltöltött képeinket (akár feltöltés után egyből, a háttérben is).

    Létezik persze ingyenes megoldás is, a TinyPNG 500 tömörített kép/hó-ig hasonlóan színvonalas munkát végez, így ha valaki eddig nem használt ilyet, de megnézné  ingyenesen, hogy mennyit gyorsul optimalizált képekkel a weboldala, érdemes tenni vele egy próbát![/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”cdn” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”09.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873854893{margin-bottom: 18px !important;}”][impeka_slogan title=”CDN használata” heading=”h3″ subtitle=”Opcionálisan” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Ha az összes eddigi pontot betartottuk, de még mindig nem elég gyors a weboldalunk, akkor minden jel szerint ott valami sokkal nagyobb gubanc van, úgyhogy gyorsan forduljunk szakemberhez. Az azonban szinte biztos, hogy nem a CDN lesz a megoldás a problémánkra!

    A CDN (Content Delivery Network) ugyanis – bár nagyon hangzatos –, csak akkor éri meg az egyszeri felhasználónak, ha:

    • vagy jelentős forgalma érkezik földrajzilag diverzifikált helyszínekről (a világ különböző pontjain lévő országokból)
    • vagy állandóan/időszakosan hatalmas terhelés éri az oldalt (egyszerre rengeteg látogató)
    • vagy ha pl. egy webáruháznál több tízezres termékportfólióval rendelkezik
    • vagy az előbbiek egyszerre.

    Ha viszont a weboldalunk látogatóinak túlnyomó része a hazai piacról érkezik és nem számítunk hirtelen jelentősen megugró forgalomra sem (pl. egy egyszerű céges weboldalnál), az esetben a CDN jó eséllyel csak ablakon kidobott pénz, gyakorlati haszna nem lesz érezhető.

    De miért, mit csinál pontosan a CDN?

    Ha röviden össze szeretnénk foglalni, a CDN lényegében nem más, mint egy olyan, több szerverből álló hálózat, amin minden adat minden szerveren megtalálható. Mivel pedig ezek a szerverek eltérő földrajzi helyszínen (sok esetben eltérő kontinensen) találhatóak, azért sokkal gyorsabb elérést biztosítanak a felhasználóinknak, ezáltal szinte bárhonnan gyorsabban tölthet be a weboldalunk.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” heading_color=”light” section_id=”teszt” margin_bottom=”0″ bg_color=”#232323″ font_color=”#ffffff” rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][impeka_slogan title=”Weboldal tesztelése” heading=”h3″ subtitle=”Mindent megcsináltam,” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]A cikkben eddig azzal foglalkoztunk, hogy hogyan növeljük a weboldal sebességét. Most nézzünk meg, hogy mit sikerült elérni a gyakorlatban! Összegyűjtöttük a (szerintünk) legfontosabb online mérőeszközöket, amikkel skálázhatóvá tehetjük a weboldalunk sebességét, illetve az esetleges javítani és fejlesztenivalókról is információkat kaphatunk – a lista nem teljes, de már csak ezeket az eszközöket használva is teljes képet kaphatunk a weboldalunk sebességéről.

    Összességében elmondható, hogy ezeknél az eszközöknél a legszerencsésebb a minél nagyobb helyiértékű és minél zöldebb színű eredmény! 🙂

    1. Google PageSpeed Insights

    Nehéz felállítani egy sorrendet, de talán érdemes a Google dedikált eszközével kezdeni a sort, hiszen legtöbb esetben mégiscsalk a Google robotjainak akarjuk megfeleltetni az oldalunkat az előkelő helyezés érdekében.

    Az eszköz által adott pontszám 0 és 100 pont közötti értéket vehet fel. Minél magasabb a kapott pont, annál jobb, a 85 (vagy annál magasabb) pontszám pedig egy jól teljesítő és gyors weboldalt jelöl.

    Google Mobile Website Test

    A Google tapasztalatai szerint a látogatóink fele elhagyja az oldalunkat, ha nincs mobilra optimalizálva. Ezért adták ki a Mobile Website Speed Testing Tool névre keresztelt szolgáltatásukat, ami a PageSpeed Insights mérésein alapul, de a nevéhez hűen alapvetően mobil-orientáltan közelíti meg a weboldal sebesség-kérdést.

    Pro tipp: ennél az eszköznél a 100 pont elérése lényegében lehetetlen, mert a WP beállításai, a sablon, pluginek és külső szkriptek miatt az az oldal sem fog maximális értéket kapni, amelyik tökéletesen rendben van. Ez tehát határozottan nem a fejlesztő hibája, a minél magasabb pontszámra azonban ilyenkor is lehet törekedni 🙂

    Google Analytics Sebesség Teszt

    Igen, a Google Analytics is képes mérni egy webhely sebességét. Ha tehát telepítve van az oldalon a mérőkód (és aki bármilyen szinten is hasznot akar húzni a weboldalából üzletileg, annak telepítve van), akkor nincs más hátra, mint az irányítópulton belül a Viselkedés menüpontra kattinva előcsalogatni a Webhelysebesség fület, ahol hosszútávú adatokból kinyerve láthatjuk többek között az oldalunk átlagolt betöltődési sebességét (illetve ezer másik, hasznos adatot), így talán a pillantnyi szerver-leterheltségtől leginkább független képet ennek az eszköznek a használatával kaphatjuk.

    2. Pingdom

    A Pingdom egyike a legnagyobb webhely-felügyeleti szolgáltatásoknak, de a legismertebb szolgáltatása az ingyenes weboldal sebességmérő eszköze.

    Szintén 0 és 100 pont között mér, az itt kapott érték azonban 12 különálló egységre bontható – amikre szintén egyéni értékeket kap az oldalunk. A szolgáltatás nagy előnye, hogy tárolja az egyes oldalakon végrehajtott összes teszt eredményét, ezáltal később össze is lehet hasonlítani weboldalunk sebességének változását.

    3. GTmetrix

    A GTmetrix szintén nagyon és méltán népszerű weboldal sebességelemző eszköz. A használata ennek az egyik legegyszerűbb, kezdők is hamar el tudják sajátítani.

    Az eszköz egyik leghasznosabb tulajdonsága, hogy átfogó elemzést biztosít a Google PageSpeed Insights és a YSlow eredményeinek összefoglalásával. Ebben az oldal tetején felsorolva láthatjuk a teljes betöltődési időt, az oldal méretét és a lekérések számát is. Az eszköz egy vízesés-diagramban is megjeleníti a lekérések listáját, így könnyedén azonosíthatóak a problémás területek.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”osszefoglalas” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”10.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1547482710241{margin-bottom: 18px !important;}”][impeka_slogan title=”Összefoglalás” heading=”h3″ btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Szerencsésen túljutottál a Nagy Sebesség Útmutatón. Gratulálunk, és köszönjük, hogy elolvastad! Reméljük, hogy legalább néhány tanács a gyakorlatban is hasznosítható lesz számodra, és gyorsítani tudsz a weboldalad betöltődési sebességén!

    Ha meg esetleg még maradtak kétségek benned afelől, hogy mennyire fontos egy weboldal sebessége a felhasználói élmény szempontjából, akkor igyekszünk azokat nagyon gyorsan eloszlatni. A gyors betöltődés ugyanis az online piacok legfontosabb kulcstényezője (feltételezve azt az alapvetést, hogy nem egy gány oldal töltődik be gyorsan, mert az hiába gyors). Az online megjelenés elsősorban az ügyfelek kényelmét kell, hogy szolgálja, mindezt a megfelelő információkkal, termékekkel vagy szolgáltatásokkal, a megfelelő időben, a megfelelő helyen, és természetesen a megfelelő ügyfeleknek.

    Ezek közül egyik sem lehetséges akkor, ha a weboldal sebessége nincs összhangban az egyébként kommunikálni kívánt minőséggel, és a potenciális ügyfelek idő előtt elkattintanak, mert megunják a várakozást.

    A sebesség tehát nemcsak fontos, hanem egyre fontosabb, mert – bár önmagában látszólag nem képes új ügyfeleket hozni -, a hiánya már rövid távon is képes elriasztani a látogatóidat.

    A cikk elkészítésében nagy segítséget nyújtott többek között a Kinsta tudásbázisa és hasznos cikkei.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row]

  • Honlap optimalizálás – 15 tipp a weboldal felgyorsítására

    [vc_row][vc_column][vc_column_text]

    Minden másodperccel, amit az oldalad betöltéssel veszteget, látogatókat veszítesz – akik akár potenciális ügyfeleid is lehetnének -, épp ezért egy weboldal betöltődésének sebessége kritikus egy modern vállalkozás sikere szempontjából. Az Edubirdie kimutatása szerint a weboldal elhagyásának okaként az esetek többségében a lassú betöltődés okolható, ezért a honlap optimalizálás elsőszámú célpontja a sebesség kellene, hogy legyen.

    4 másodperces betöltődési idő esetén már a látogatóid 25%-át elveszíted és ez az arány minden egyes másodperccel tovább nő. A Google szerint az optimális az lenne, ha a betöltődés idejét 3 másodperc alá tudnánk levinni. Sajnos a honlapok többsége meg sem közelíti et a küszöb-értéket, pedig a megoldáshoz nem kell Nobel-díjasnak lenni…

    A kérdés üzleti oldala

    Azt is érdemes végiggondolni, hogy a vállalkozások nagy része mennyi időt, energiát és legfőképpen pénzt fektet SEO-ba, tartalommarketingbe és linképítésbe, miközben olyan tetű lassú weboldala van, amely már azelőtt elveszíti a látogatók 30-40%-át, mielőtt azok akár egyetlen sor szöveget is elolvashatnának az oldalon.

    Ebben a cikkben meg szeretném osztani veled a honlap optimalizálás azon technikáit, amelyekkel feljavíthatod a weboldalad sebességét. Nulladik lépésként azonban azt javaslom, hogy ellenőrizd, hogy a Google Page Insights szerint hogyan teljesít az oldalad a jelenlegi állapotában. Az eszközt végtelenül egyszerű használni, csak írd be az URL-edet, és az elemzés gombra való kattintás után egy százas skálán értékeli a weboldalad sebességét mind mobilon, mind desktop felületen.

    Egy közismert példa

    Íme a jelentés az index.hu-ról generálva:

    honlap optimalizálás Page Insights segítségével - screenshot

    Fontos kiemelni, hogy a Google javaslatait érdemes útmutatásként értelmezni, nem pedig szolgai módon végrehajtani. Ennek ékes példája, hogy ha a Page Insights-ba beírom, hogy “ https://www.google.hu”, akkor mindössze 96/100 pontot kap mobilon és előzékenyen közöl pár tippet, hogy némi honlap optimalizálás hogyan javíthatna a saját weboldaluk teljesítményén…

    A lényeg, hogy nem a 100 pontra kell törekedni; 75 pont felett igen jó formában vagy, 90 fölött pedig tükörsimára simogathatod a buksidat a kivételes teljesítményért!

    Ha lefuttattad a tesztet, akkor már látod, hogy mit javasol a Google a honlap optimalizálás következő lépéseire vonatkozóan.  Ideje hát belemerülni a sebesség optimalizációs eszközök és stratégiák világába, hogy javíts a kifogásolt mutatók eredményén. Ne csüggedj, ha nem tudsz mindenen javítani, a következő 15 pont betartásával ugrásszerűen javulni fog az eremény:

    15 tipp a weboldal sebesség optimalizálásához

    1. Válassz gyors tárhelyszolgáltatót és -csomagot

    A leggeyszerűb lépés a honlap optimalizálás ösvényén a megfelelelő tárhelyszolgáltató kiválasztása. A legtöbb nagy szolgáltatónál ebből a szempontból jó helyen van az oldalad. Ha azonban egy gyors szolgáltatót választasz, de a legolcsóbb tárhely csomagra fizetsz elő, akkor jó eséllyel a weboldalad megakad a szerveren sok olyan oldallal egyetemben, amelyek a rendelkezésre álló szerver erőforrásokért és sávszélességért küzdenek. Ha komolyan gondolod egy vállalkozás megjelenítését az interneten, akkor a weboldal fejlesztés során a tárhelyen spórolni nem túl bölcs – cserébe elég rossz – ötlet.

    2. Használj szöveget képek helyett

    Képként megjeleníteni a szöveges tartalmat régi hibának számít, amellyel sajnos még manapság is néha szembe lehet találkozni. Mivel a Google algoritmusa még nem alkalmas a képként megjelenített szöveg értelmezésére, ezért ez a megoldás nem csak azért hátrányos, mert a kép fájlmérete miatt lassul az oldal betöltése, hanem keresőoptimalizálás oldaláról is hátrányt szenvedsz. Éppen ezért minden esetben valódi szöveget használj kép helyett.

    3. Honlap optimalizálás a képek tömörítésével

    Lehet ugyanakkor tiéd a világ legfullosabb  tárhelyszolgáltatása, ha a weboldalad tömörítetlen és optimalizálatlan képekkel van tele – egy csepp különbséget sem fogsz látni. Az optimalizálatlan képek a lassú oldalak elsődleges okai és ez meglehetősen furcsa, tekintve, hogy ezernyi eszköz van arra, hogy a lehető legjobb teljesítményt hozd ki a képeid optimalizálásával – nagyjából 10 perc időbefektetéssel.

    Ha WordPress felhasználó vagy, akkor az egyik lehetséges alternatíva az EWWW Image Optimizer nevű plugin. Ez a hasznos kis plugin konfigurálható minden feltöltött kép automatikus optimalizálására és tömörítésére – akár egy létező képgaléria optimalizálására is. A plugin telepítésével és a képminőség beállításával nagyjából le is tudtad a honlap optimalizálás egyik legnagyobb részét.

    4. Optimalizáld a „hajtás feletti” tartalmat

    A „hajtás feletti tartalom” elnevezés még a hagyományos újságok korából származik, ahol reklám szempontjából értékesebb, jobban olvasott volt az a rész, amely a kettéhajtott újság hajtás feletti oldalára esett. A weboldalak estében „hajtás feletti” tartalomnak azt a részt nevezzük, amelyet még görgetés nélkül lát a látogató.

    Az oldal sebességének optimalizálása során értékes időt nyerhetsz, ha arra figyelsz, hogy ez a bizonyos „hajtás feletti” rész minél gyorsabban betöltődjön. Miután a látogató már olvasható tartalomhoz jutott, ezzel nyersz még egy pici időt arra, hogy az oldalon lejjebb található tartalmat is betöltsd, hiszen fel kell fognia, amit lát, ki kell találnia, hogy hova akar kattintani.

    Pro tipp: Haladók megtehetik azt is, hogy két részre bontják például a CSS állományokat. Egy kisebb részre, amely a hajtás feletti rész megjelenítéséért felelős és egy nagyobb részre, amely a fennmaradó részt formázza.

    5. Minimalizáld a HTTP lekéréseket

    Egy oldal minden eleme HTTP lekérést generál (képek, scriptek, stíluslapok, videók, stb.), szóval minél több dolog van az oldaladon, annál tovább tart a betöltés. A HTTP lekérések minimalizálása így egy logikus honlap optimalizálási taktika. Íme pár tipp ehhez:

    • Hagyj el minden felesleges elemet az oldaladról. Ha valami tényleg haszontalan és nem jelent értéket, akkor kukába vele
    • Használj CSS-t képek helyett, amikor csak lehet
    • Kombináld egybe a stíluslapokat, amikor lehetséges
    • Csökkentsd le a felesleges scriptek számát az oldaladon

    6. Óvatosan válassz sablont

    A WordPress fejlesztők egy része „mindent vivős” full extrás sablonokon dolgozik, amely alkalmas lehet arra, hogy sok iparágban sokfajta igényt kiszolgáljon. Ez a folyamat olyan túlsúlyos sablonokhoz vezetett, amelyek a demó változatban jól mutatnak, de a valóságban dagadtak és lomhák.

    Nemrég költöztettünk egy hatalmas weboldalt Joomla-ról WordPress-re, és az egyik legnépszerűbb témát használtuk a ThemeForest-ból. Ez a téma nagyszerűnek tűnt papíron; olyan hasznos kiegészítőkkel, amelyekről tudtuk, hogy szükségünk van rájuk és egy csomó másikkal, amelyekre nem volt szükségünk. Miután konvertáltuk az oldalt e téma használatával, nem számít mit csináltunk, az oldal lomhának tűnt, és mikor a színfalak mögé tekintettünk és megnéztük minden egyes oldal forráskódját, akkor láttuk, hogy rengeteg felesleges kóddal és állománnyal volt teletömve.

    Egy pár hét próbálkozás után le kellett nyelnünk a keserű pirulát és egy másik témával telepítettük át az oldalunkat, amellyel ugyanazt az eredményt értük el, sokkal kevesebb kóddal – pár másodpercnyi töltési időt nyerve mindezzel. Ez a pár másodperc hatalmas előrelépés nem csak a felhasználói élmény javításában, hanem hosszú távon a konverziós ráta növelésében is úgy, hogy közben nem kellett kompromisszumot kötni az oldal megjelenésében és funkcionalitásában sem. A fentiekhez hasonló döntések a honlap optimalizálás során stratégiai jelentőségűek.

    7. Minimalizáld a plugin használatot

    Ha nem használsz egy plugint, deaktiváld és távolítsd el. Úgy vélem, ezt nem kell ennél bővebben magyaráznom. A pluginekkel kapcsolatban létezik még egy trükk, ugyanis ha használsz is egy adott plugint az egyik URL-eden, attól még nem biztos, hogy a másik oldaladon is szükséged van rá. Ilyenkor ezzel a trükkös kis pluginnal oldalanként be tudod állítani, hogy mely kódrészletek töltődjenek be, és mely pluginokat hagyja ki a rendszer. (29 dollár, de minden centjét megszolgálja!)

    8. Engedélyezd a cache-elést

    Ha WordPress-t használsz, akkor a cache a honlap optimalizálás egyik kötelező eleme, amely azonnal fel fogja gyorsítani az oldalad betöltési sebességét a visszatérő látogatók számára. Próbáld ki ezt a két plugin-t:

    • W3 Total Cache
    • WP Super Cache

    Mindkettőt sikerrel használtam és ha össze kellene foglalnom a különbséget közöttük, azt mondanám, hogy a WP Super Cache egyszerűbben használható, míg a W3 Total Cache erősebb, ugyanakkor több technikai hozzáértést igényel.

    [adning id=”29652″]

     

    9. Használj Content Delivery Network-öt (CDN)

    A honlap optimalizálás technikai részleteibe történő elmerülés nélkül, ha van egy képekkel telezsúfolt weboldalad, célszerű elosztani a képeidet olyan CDN-eken, mint az Amazon Cloudfront-ja.  Ez lényegesen emelheti a weboldalad sebességét, lecsökkentheti a szervered betöltési idejét és jelentősen csökkenti a sávszélesség költségeit is.

    Ha WordPress-t használsz, számos plugin van, amelyek korszerűsítik a folyamatot, mint pl. a W3 Total Cache, amely CDN támogatást nyújt más cache-elési jellemzőkkel együtt. Egy CDN használata kétség kívül emeli az üzemeltetési költségeket, mégis a honlap optimalizálás egyik első lépése, mert CDN-el biztos lehetsz benne, hogy a világ bármelyik tájáról villámgyorsan fog betöltődni az oldalad.

    10. Minimalizáld a kódodat

    Amennyiben WYSIWYG szerkesztőt használsz a weboldaladon, nagy valószínűséggel a kód tele lesz felesleges és optimalizálatlan kóddal. Szerencsére vannak olyan programok, mint a fent említett W3 Total Cache, amely rendelkezik egy olyan opcióval, hogy megtisztítja a kódot, kiveszi belőle a felesleges szemetet – csökkentve ezzel a töltési időt.

    11. Optimalizáld vagy távolítsd el az átirányításokat

    Tudom, hogy az átirányítás szükséges rossz, de kerüld el, ha tudod. Ha nem tudod elkerülni, próbáld a .htaccess fájlaid használatával beállítani, semmint oldal szintű átirányításokat alkalmazni. Az olyan programok, mint a Yoast – SEO For WordPress egyszerűsítik az oldal- és bejegyzés szintű átirányításokat, de ezek lassabbak, mint a .htaccess szintű átirányítások, így a honlap optimalizálás szempontjából nem annyira hatékonyak.

    12. Kerüld a 404-es hibákat

    Egy weboldal frissítése, karbantartása során természetes folyamat, hogy 404-es oldalakat hagyunk magunk után – az azonban nnem természetes, hogy úgy is hagyjuk őket. A honlap optimalizálás egyik első lépéseként érdemes a Google Search Console-ban folyamatosan ellenőrizni ezeket az oldalakat annak érdekében, hogy csökkentsd az olyan átirányítások számát, amelyek lassítják a hasznos tartalom betöltését – meg ugye a 404 nem is mutat annyira jól…

    13. Helyezd a scripteket alulra

    A böngészők felülről lefelé olvassák és töltik be a weboldalakat, így ha számos különböző scriptet futtatsz az oldalad felső részében (analytics, tracking, split testing, stb.), lelassítják az alattuk lévő összes tartalom betöltődését. Ez azt jelenti, hogy amíg a scriptek töltődnek a háttérben, a tartalom, amit a látogatók keresnek, nem fog megjelenni. Érdemes ezért ezeket a “láthatatlan” scripteket alulra pozícionálni.

    14. Ügyelj a betűtípusok méretére

    A HTTP Archive kutatása szerint a weboldalak 60%-a valamilyen egyedi betűtípust használ, amely 850%-os növekedés 2011-hez képest. A web fontok, pl. Google fontok használatának hátránya, hogy külső forrásból származó extra HTTP kérésekkel növelik az oldal betöltődésének idejét. Éppen ezért javaslom az alábbi betűtípusokkal kapcsolatos ajánlásaimat megfontolni a honlap optimalizálás során:

    • Vizsgáld meg, hogy az adott betűtípust hogyan jelenítik meg a különböző böngészők
    • Csak azokat a betűtípus stílusokat használd, amelyekre szükséged van
    • A karakterkészletet lehetőség szerint tartsd a minimumon
    • A betűtípusokat a szerveren tárold és ne külső forrásból töltsd be
    • Figyelj a betűtípus fájlméretére a választás során

    15. Optimalizáld az adatbázisodat

    A weboldal adatbázisa nagy hatással van a betöltődés sebességére. A honlap optimalizálás egyik célpontja ezért az adatbázis, mivel ha optimalizálva van, akkor az jótékony hatással lehet a teljesítményre. Az extra mező indexelés például hatékony módja egy kis sebesség plusz elérésének, mivel segítségével lényegesen gyorsabban lehet egy adott rekordot megtalálni a több millió között.

    Honlap optimalizálás WordPress oldalakra

    A Google Page Insights lefuttatása után valószínűleg több ajánlást is kapsz a sebesség javításra vonatkozóan, noha a szakmai nyelvezet megnehezítheti ezek értelmezését – különösen kezdők számára.

    Éppen ezért a korábbi évek tapasztalatai alapján összeállítottam egy könnyen értelmezhető honlap optimalizálás listát arról, hogy melyek azok az elemek, amelyek specifikusan egy WordPress weboldalon szokták takarékra rakni a sebességet:

    1. Hoszting – olcsó, rossz minőségű, alacsony sávszélességű vagy elmaradott technikai felkészültségű tárhely környezet
    2. Ha a cache-elés nincs megfelelően beállítva, akkor a WordPress túlterheli a szervert, amely sebesség lassulással, vagy akár teljes leállással járhat
    3. Hatalmas fájlméretű oldalak – a nem megfelelő kép-optimalizálás miatt hatalmasra duzzadt oldalak még egy gyors szerver esetén is lassan töltődnek be különösen mobilon.
    4. Gyenge, rossz minőségű, optimalizálatlan plugin-ek. Nagyon alaposan válogasd meg melyek azok a plugin-ek amelyekre feltétlenül szükséged van és azok mennyiben ronthatják weboldalad teljesítményét. Egy nem túl felkészült fejlesztő értelemszerűen nem sok energiát fektet az általa írt plugin teljesítményének optimalizálásába.
    5. Számtalan külső forrás betöltése – reklámok, betűtípusok … nagy mennyiségű betöltése minden oldalon nagy mértékben ronthatja a teljes weboldal teljesítményét.

    Összefoglalás

    A webhely sebességére fókuszáló honlap optimalizálás az egyik legolcsóbb és legegyszerűbb módja a felhasználói élmény és a keresői rangsorolás javításának. Ha azt szeretnéd, hogy 2018-ban is a legjobbak között légy, akkor itt az ideje egy alapos site auditnak, amely fényt derít a sebességet lassító hibákra.

    Ha van még valami plusz tipp a tarsolyodban, amit megosztanál velünk, akkor hajrá, használd a komment mezőt!

    [/vc_column_text][/vc_column][/vc_row]

  • Email Marketing Trilógia – A Levél Rejtelmei

    Email Marketing Trilógia – A Levél Rejtelmei

    [vc_row][vc_column][vc_column_text]

    2021-ben az email volt a harmadik legmeghatározóbb faktor a Black Friday-en és a marketing vezetők 89%-a szerint ez a No 1 lead generálási eszköz. Akár B2B-ben, akár B2C-ben seftelsz, ha egy dolog van, amit elég lúzer húzás ellógni, az az email marketing. (more…)

  • A Bounce Rate Sötét Árnya

    A Bounce Rate Sötét Árnya

    [vc_row][vc_column][vc_column_text]

    Azoknak, akik még nem fújják kívülről az online marketing szlenget, a bounce rate magyarul (BR, visszafordulási arány) azt a százalékát jelenti egy oldal látogatóinak, akik

    1. odakerülnek az oldalra, majd
    2. interakció nélkül elnavigálnak az oldalról.

    Másképpen fogalmazva a bounce rate jelentése az egy oldalas látogatások (single page session-ök) aránya az oldalmegtekintések között. Jön, szétnéz, továbbáll. Az értékét a Google Analytics-ben oldalakra lebontva megtalálod az alábbi menüpontban:

    bounce rate Google Analytics menupont

    Azoknak a vállalkozóknak, akik félkarú rablók helyett az AdWords-ben próbálnak hozzáértés nélkül nem sokkal reményteljesebb szerencsét, a magas visszafordulási arány ugye oltári gebasz, hiszen egy 70+ %-os bounce rate (fizetett hirdetésekről látogatott oldalon és alacsony Time on Site mellett) azt jelenti, hogy a hirdetésre költött zsetonnak pontosan a 70%-a megy a levesbe. Mielőtt belemennénk, mit lehet ezzel kezdeni, előbb jöjjenek azok a speciális esetek, amikor nincs is olyan nagy gáz.

    A No para esetei

    Mielőtt bárki kényszeresen rettegni kezdene a magas BR-től, nézze meg, hogy minden oldalán van-e tracking kód – elég könnyű úgy single page session-öket csinálni, hogy az Analytics azt hiszi, csak ez az egy árva oldalad van.

    Ha egyoldalas site-od van – minden kornak megvan a maga hülye divatja – akkor ellenőrizd, hogy az event-ek be vannak-e rendesen állítva. Különben ugye a látogatások hány százaléka lesz egyoldalas megtekintés az egyoldalas site-odon? Igen, az összes!

    Blogoknál sem katasztrófa. Ha nem adsz el semmit, csak kiírod magadból a nyáladzva terjedő hülyeség gerjesztette bullshit-allergiádat, vagy szimplán szórakoztatod a tisztelt publikumot, csak mert megvan hozzá a tehetséged, akkor no para; User rátalál a blogra, elolvassa a cikket, jól mulat, tanul belőle, aztán szépen keres másik műsort – ahogy az alábbi Google Analytics is látszik (a 7Blog néhány cikke 2020 január és május között):

    bounce rate és time on site kapcsolatát magyarázó GA screenshot

    Nem probléma olyan oldalaknál sem, ahol mondjuk tutorial-ok vannak. A látogató rákattintott egy hírlevél linkre. Megérkezett az oldalra, végignézte/olvasta az adott fejtágítást, vigyorgott, mint borz a répára, azt’ továbbállt. Mondjuk egy FB share-t kiizzadhatott volna magából, de ha nem, akkor sincs vége a világnak.

    Ugyanilyenek a jó minőségű support fórumok: Nem találok valamit WP-ben, rákeresek, és kattintok a WP support fórumára, ahol három bővített mondatban egy profi elmagyarázza, amit zokogva keresgélek egy órája: borz, répa, böngésző becsuk – technikailag, ez is bounce-nak számít! Rossz ez a fórumnak? Tudnak tőle aludni, hidd el.

    Amikor viszont üdvös lenne lépni

    Ha azonban egy webshop-od van, vagy online B2B csatornád (céges blog, jófejségből-feltett-adócsaló kalkulátor, ökörködős gamer vlog), akkor probléma a magas bounce. Ilyenkor azok, akik az oldaladra tévednek, pont semmit nem vesznek tőled, nem adják meg az email címüket, nem kommentelnek, nem hintik az igét rólad és nem kattintanak a hirdetéseidre – szóval no engagement.

    Ha a látogatóért fizettél is, fogd fel úgy, hogy arra a zsére – a saját hibádból – pont levettek, mint a riadt majmot! A BR csökkentésével a te esetedben kőkemény forintokat lehet spórolni – vagy ugyanolyan költés mellett látványosan növelni a bevételt, ha úgy tetszik. (Ha a bounce rate PPC-ből jövő forgalomnál magas, akkor érdemes megnézni, hogy a hirdetés szövege kontextusban van-e a landing oldallal.)

    Tennivalók

    Ha a fentebb vázolt helyzeteket átgondolva úgy látod, hogy épp a magas bounce rate miatt van csapágyasra járatva alattad a szopó-roller, akkor így juthatsz egy boldogabb lelkiállapotba:

    Ne átlagolj

    Soha ne nézegess a webshopodra vagy a domain-edre átlagolt bounce rate-et, mert az ugye pont olyan, mint hogy éves átlagban minden nap 4 perc Karácsony van… Nézd meg egyes oldalakra külön-külön, és azokon dolgozz, amik a legmagasabb BR-t nyögik.

    Mobil vs Desktop

    Bontsd szét a mobilról érkezők és a desktopról jövők BR-jét. Ha jelentősen magasabb a mobil BR, akkor elképzelhető, hogy tetű lassú az oldal, vagy nem reszponzív (mobilra optimalizált). Utóbbi esetben ne csodálkozz, ha elmenekülnek az oldaladról – te is ezt tennéd amikor a 3 pixeles betűkre gúvadó szemeidből a fájdalom első könnycsepjei rácsorognának a kijelzőre.

    Time on site

    Nehezebb a helyzet, ha a sebesség jó, az oldalad pedig szebben mutat mind mobilon mind desktopon, mint politikuson a galambszürke Armani. Ilyenkor érdemes ránézni a time on site adatra. Ha magas, akkor valószínűleg csak egy CTA (Call-to-Action) hiányzik az oldal aljáról (mondjuk egy Örök Élet Titka Gomb, kapcsolódó cikkek, vagy bármi, amivel az oldal végeztével folytatni lehet, azaz engagement-et lehet elérni). Ha alacsony az oldalon töltött idő, akkor annak ellenére menekülnek róla az emberek, hogy befogadhatósági probléma nincs vele; ezt hívják úgy, hogy a tartalom – minőségét, egyediségét, hitelességét illetően – retek.

    Tartalom

    Azok az oldalak, amelyek túl buzgón próbálnak valamit rád sózni rendszerint magasabb bounce rate-tel kénytelenek szembesülni. Egy Buy Now gomb közvetlenül a fejléc alatt például pont azt üzeni, hogy a weboldal tulaját a pénzeden kívül semmi nem érdekli belőled és még arra sem veszi a fáradtságot, hogy féktelen kapzsiságát vállalható köntösbe csomagolja. Lehet, hogy nem ez a valóság, de akkor is ez jön le. Különösen igaz ez landing oldalakra. Ilyenkor elő kell venni a felhasználói élmény vizsgálatára létrehozott, erősen korlátozott mértékben elérhető céleszközt – a józan észt – és logikailag könnyebben befogadhatóvá tenni a tartalmat, megadni neki a sztori-jelleget.

    Divat és design

    Vannak a web-design-ban is divatok, és mivel egy látogató a legritkább esetben veszíti el böngészési szüzességét pont a te oldaladon, tanácsos ezeket valamennyire lekövetni és objektív módon hozzáállni az oldalad vizuális élmény-faktorához.

    Bounce Rate Pszicho

    Ha még ennél is tovább akarsz menni a BR feljavításában, akkor érdemes egy kicsit elmélyedni a marketing pszichológiában: az olyan motivációs faktorok, mint a hiány elve, a viszonosság elve, a társadalmi bizonyíték, stb. a site-on tartják a látogatót. Ezeknek megvannak az online alkalmazható formái – de ez már tényleg egy következő cikk. Akit mélyebben érdekel, az olvassa el ezt a könyvet.

    Alfa és Omega

    Végül a legfontosabb: tesztelj! Egészen apró változtatásokkal drasztikusan lehet csökkenteni a bounce rate-et. Érdemes minden kis változtatás után kivárni, esetleg egy kicsit ráhirdetni az oldalra, majd elemezni az adatokat. Azt érdemes fejben tartanod, hogy az emberek alapvetően nem működnek máshogy online sem, mint a való életben –  kicsit türelmetlenebbek és nyersebbek, de ugyanazt akarják: hasznos információt, szórakoztató tartalmat minél kevesebb középszerű defektes bullshit meg kétségbeesetten villódzó ótvar hirdetés árán – méghozzá gyorsan és ingyen.

    Összefoglalva

    Nincs “ideális” bounce rate, és nem érdemes ezt az adatot önmagában nézni, vagy hiúsági kérdést csinálni belőle. Egy magas BR nagyon alacsony time on site számmal karöltve jelentheti azt, hogy az oldalad egy pénztemető-szutyadék, de még ilyenkor is érdemes árnyalni a képet az adott oldal célja és természete szerint. Azonban nem nézni a bounce rate-et – főleg, ha valamivel seftelsz is az oldalon (vagy az oldal révén) – az nagyon nem frankó, ha pedig hirdetésre is költesz, akkor szó szerint felesleges pénzégetés.

    Aki mostantól nézegetné, az megteheti a Google Analyticsben, vagy még egyszerűbben ennek a kis Chrome Plugin-nak a telepítésével real-time-ban. Önmagában attól, hogy magas, még nem kell berosálni. Akkor kell aggódni, amikor egy oldal nem hozza a tőle elvárt számokat: bevételt, hirdetés megtérülését, ügyfél retention-t, email címeket – bármit, ami a célja lenne. Végül is pénzből élünk, nem like-okból meg alacsony bounce rate-ből…

    Aki ennek ellenére nem alszik jól a magas bounce rate miatt, az nyomjon egy megosztást és ha van érdeklődés, hamarosan írok egy komplett listát, azokról a konkrét technikákról, amikkel néhány oldalon sikerült drasztikusan lecsökkentenünk a visszapattanók arányát és beelőzni a versenytársakat.

    [/vc_column_text][/vc_column][/vc_row]