Rohanóvá vált világunk, várakozni sehol nem szeretünk, hacsak nem muszáj. Egy okmányirodában kivárjuk a sorunkat, a hentespult előtt elbámészkodunk, miközben arra várunk, hogy az előttünk lévő, szinte a teljes húspultot variálva felvásárolja. Ha a vásárló már bent van a boltban, vagy a hivatalban már nem fog még egy órát eltölteni azzal, hogy átmenjen egy másik üzletbe.
Az internet a várakozásban teljesen más, a keresett információk rengeteg forrásból beszerezhetők. Ha egy adott témára keresünk, akkor a Google több száz találattal lát el bennünket, csak válogatni kell. A mobil eszközök rohamos elterjedésével, két fontos tényező van, amire nagyon oda kell figyelni.
A weboldal reszponzív legyen, minden eszközön olyan megjelenést biztosítson, amivel nem fárasztjuk le a felhasználót, betűméret növeléssel, weboldal mozgatással, stb.. Biztos Ön is futott már bele hasonlóba és biztos vagyok abban is, hogy ezek az oldalak bezárásra kerültek.
A másik tényező a sebesség. Ha lassú a weboldal, nem tölt be időben akkor a felhasználó egyszerűen egy új keresést indít. A szélessávú mobilinternet nem mindenhol elérhető, így másodpercekről is beszélhetünk egy-egy rosszul megírt oldal esetében. Megdöbbentő, de jelenleg már nem másodpercekről, hanem milliszekundumokról beszélünk a weboldal gyorsításánál.
A weboldal sebessége és a keresőoptimalizálás
John Mueller, a Google szakembere még 2016-ban azt mondta, hogy a HTTP betöltési sebességnek 2-3 másodperc alatt kellene maradnia. A Google nem nagyon szokott weboldal sebességgel kapcsolatban konkrétumokat közölni, ezért is fontos John Mueller kijelentése.
A Google egyik webmestereknek készült, sebességoptimalizáló videójából az derül ki, hogy webáruházak esetében a 2 másodpercen belüli értéket tartják elfogadhatónak.
A valóságban azt tapasztaljuk, hogy azok az oldalak amelyek 2 másodperc alatt vannak, jobban szerepelnek a találati listán.
A Google kereső egyre feszesebb kritériumokat alkot meg a weboldal készítőkkel szemben, hogy úgy készítsék el a forráskódot, hogy az 2 másodperces betöltést eredményezzen.
Ez a 2 másodperc lett mára a határ, ami felett el kell gondolkozni a betöltési sebesség javításán. A legjobb, ha ez a betöltés 1.5 másodperc!
A lassú weboldalak pedig büntetést kapnak. Hiába van jó tartalom, hiába vannak gyönyörű képek, a Google hátrébb fogja sorolni az oldalt, mivel neki a sebesség is egy minőségi szempont.
Gyorsabb weboldal = bevételtöbblet
Kutatások bizonyítják, hogy a lassú weboldalak veszteséget termelnek. Erre az Akamai, az Amazon, és a Walmarkt publikált nagyon hasznos adatokat. Az Akamai vizsgálata szerint: a látogatók 40%-a zárja be a weboldalt ha az több mint három másodperc alatt töltődik be. A mérések alapján az átlag látogató mindössze 2,078 másodpercet hajlandó várni a betöltésre. Ha a weboldal 1,5 és 2 másodperc alatt töltődik be az már 2%-os látogatottság növekedést eredményez. Ha ez a szám 0.5 - 1 másodperc, az további 4.6%-os látogatottság növekedést jelent! Az Amazon kutatása pedig azt az eredményt hozta ki, hogy minden egyes plusz másodperc 7%-os veszteséget jelentett a konverziókban, a Walmarkt pedig azt mutatta ki, hogy minden 100 milliszekundumos gyorsulás 1%-os bevételnövekedést okozott! Persze tegyük hozzá, hogy ezek a kutatások webáruházakra készültek, de érdemes tartani bármilyen típusú oldal esetén!
Sebesség növelő tényezők
- Rossz tárhely
- régi, rosszul kivitelezett forráskód
- widgetek
- hirdetések
- pluginek
- tömörítetlen, nem optimalizált képfájlok
Webtárhely: Többször említettük már, hogy a tárhelyszolgáltatás minősége mennyire fontos. Tudjuk, hogy az ár egy fontos tényező a weboldal tulajdonosoknak, de ha a weboldal nem tud kitermelni 20-30.000 Ft-ot egy minőségi tárhely szolgáltatásra, el kell gondolkozni azon, hogy valami nagy hiba van a koncepcióban.
Régi, rosszul kivitelezett forráskód: Miután elkészítettek egy weboldalt cégünknek, folyamatosan frissíteni kell. A weboldalkészítési technológiág folyamatosan és rohamos tempóban változnak, és ha ezt nem követjük, akkor az elavult kódoknak köszönhetően a weboldal betöltési sebessége is csökkenhet. Weboldal készítésről, bővebben itt olvashat.
Widgetek: Még mindig sokszor találkozunk olyan weboldalakkal, amik tele vannak felesleges widgetekkel. Ilyen lehet az óra, időjárásjelentés stb. El nem tudom képzelni azt a weboldalkészítő céget, akik ezeket ügyfél kérésre felteszik a weboldalra. Egy weboldalkészítő cégnek lehetne annyi sütnivalója, hogy tudatosítja az ügyfélben, hogy amit akar, azzal saját magának árt!
Hirdetések: Ebből több típus lehet, lehet beépítve Google hirdetés, vagy más partnercégek, hirdetési blokkjai. Soha nem értettem, hogy egy autószerelő weboldalon mit keresnek google hirdetések. De azt sem értem, hogy egy havi 1.500-as forgalommal rendelkező blogban miért kell hirdetéseket használni. Google esetén ilyen látogatószámnál, éves szinten lesz kb. 1.000 Ft bevétele.
Pluginek: Ezek lehetnek különböző közösségi médiás beépülő elemek. Ha már csak a facebook pixelt nézzük legalább 500 milliszekundumos sebesség növekedést eredményezett, de ha maradunk a facebooknál, a likebox, másodperceket tud elvenni a betöltésből. Sajnos a mai napig használják a weboldal tulajdonosok a likebox-ot.
Tömörítetlen képek: Sokszor találkozunk azzal a problémával, hogy óriási méretű képeket alkalmaznak a felhasználók a weboldalon, amelynek a méretét összenyomják. Van, hogy 4-5000px méretű képet tesznek fel, majd 300px méretre nyomnak össze! A felhasználó önmagában egy CMS rendszer esetén nem tud változtatni a forráskódon, de a képeken igen. A képek átalakítását bontjuk most ki jobban.
A képek optimalizálása weboldalra
A képek optimalizálását két jelentős részre lehet osztani. Mind a kettő fontos és elhagyhatatlan.
- Kép szerkezeti optimalizálása
- Képek tulajdonságaira való optimalizálás
A képek szerkezeti optimalizálása
Az átlag weboldal tartalmi szélessége 1000px-1200px, az ennél szélesebb megjelenést csak nagyon ritka esetekben alkalmazzuk.
Két eszközre lesz szükség a képek formázására.
- Egy szoftver, amiben a képek méretre, színe alakítható. Ilyen szoftver, ami ingyenesen elérhető a GIMP. De bármilyen szoftver vagy online elérhető eszköz megteszi. A lényeg az, hogy a képek pixel mérete állítható legyen.
- Képtömörítő. Mikor a képeket megvágtuk, a fájl mérete (bájt, kilobájt, megabájt) nincs tömörítve, rengeteg plusz információ tartozhat még hozzá pl az exif információk, amelynek a kivételével csökkenthető a méret, vagy minőségbéli rontással (Quality) is lehet csökkenteni a méretet. Egy online eszközt javasolnánk erre ez pedig a https://compressor.io/, vagy a https://compressjpeg.com/ ahol minőséget (Quality) is lehet állítani.
A fentebb felsorolt módszerek segítségével drasztikusan csökkenthető a képek mérete.
Nézzük is meg a gyakorlatban
A HW Plus CMS rendszerében a tartalmi szélesség 1080px.
Ha fekvő képet alkalmazunk a szöveg mellé igazítva akkor maximum 500px-es szélességet érdemes alkalmazni.
Ha álló képet alkalmazunk a szöveg mellé igazítva akkor a kép szélességének nem kell nagyobbnak lennie 300 px-nél.
Ha a kép középre igazított teljes szélességű, akkor a maximum 1000px alkalmazása szélességben teljesen megfelelő.
A felsorolt méretek viszonyszámok, természetesen el lehet térni tőle, de a legjobb az, ha mindig a pontos méretet alakítjuk ki.
Ha Firefox böngészőben a képen nyomunk az egérrel egy jobb egérgombot, és kiválasztjuk a KÉPADATOK MEGJELENÍTÉSÉT.
Itt az alábbiakat látjuk
- Ezzel a ponttal a későbbiekben foglalkozunk
- Itt azt látjuk, hogy a kép mérete kerekítve 7Mb.
- Itt azt láthatjuk, hogy a kép eredeti mérete 4 032px × 1 960px és át van méretezve 500px × 243px
Most jöjjön ez első optimalizálás
Méretezzük le a képet a tartalomban megjelenített 500px-es méretre.
Amint leméreteztük a képet, látszik, hogy drasztikusan lecsökkent a mérete.
7 megabájt helyett mindösszesen 23,21 kilobájt lett.
Jöhet a kép kompresszálása, mely a fenti linkek valamelyikén elvégezhető.
Ha nincs sok időnk és nem akarunk a minőségi beállításokkal is foglalkozni, akkor a https://compressor.io oldalt javasoljuk. Ide csak be kell tölteni a képet, majd lementeni.
Ahogy a képen is látható a 23.77KB-os képből még 27% faragható volt, ami 17.46KB lett. Óriási változás a kép méretben a 7MB-hoz képest!
Ha van idő az egyes képek beállításaira akkor https://compressjpeg.com/ oldalon a képre kattintva további beállításokat is alkalmazhatunk.
Az eredeti 90%-os Quality helyett 75%-ot állítottunk be. Így a kép mérete 13KB lett. Hogy jobban érzékeltessem a 7000 KB helyett 13KB lett a kép!
Csak ezekkel a technikákkal hatalmas eredmények érhetők el a weboldal felgyorsításában. Minden lekicsinyített kép segíti a weboldal betöltését.
Tudjuk nem kevés munka a képek kialakítása, de az eredmény önmagáért beszél!
A képek tulajdonságaira történő optimalizálás
A kép tulajdonságaira való optimalizálás fontos részre a keresőoptimalizálásnak, hiszen ebben a folyamatban mutatjuk meg a Google részére mit is ábrázol a kép!
Természetesen vannak már a keresőrendszerek kezében olyan technológiák amivel a képeket elemezni tudja, és meg tudja állapítani mit is ábrázol a kép, de tekintsünk ebben a helyzetben úgy a Google keresőrendszerére mint egy vak emberre.
Ha egy vak embernek a kezébe adunk egy képet, csak azt fogja érzékelni, hogy egy papírdarabot adtunk a kezébe, viszont, ha közöljük, hogy ez egy fénykép akkor tudni fogja, hogy ez a papír egy képet ábrázol.
Ezt lefordítva a keresők nyelvére úgy néz ki, hogy a file-ból tuja, hogy ez egy weboldalhoz tartozó elem (papír). A file kiterjesztéséből (.jpg) megtudta, hogy ez egy kép.
Tehát eddig ugyan annyi információval rendelkezik, mint vak emberünk.
Ahhoz, hogy tudja emberünk mi van a képen el kell mesélni neki, az elmondás alapján, már bárki el tudja képzelni mit ábrázolhat a kép.
Az elbeszélésre három lehetőségünk van
- A kép megnevezése
- Alternatív szöveg (ALT)
- Súgócímke (TITLE)
Fontos tudni, a fájlok elnevezésében kerülni kell az alábbiakat
- ékezet
- szünet
- különleges karakter
- nagybetű
- alsóvonás
Ezek mind akár megjelenési hibát okozhatnak. Itt vissza is térnék az első képre az egyessel megjelölt pontjára.
A kép elnevezése
Ha megvizsgáljuk az egyes pontot azt látjuk, hogy a kép elnevezése mindent tartalmaz csak azt nem, amiről a kép szól IMG_10122018_151353_0_2.jpg.
Az elnevezés mindenen esetben legyen rövid tömör esetleg maximum 2-3 szóból álló.
Ha ez helyett IMG_10122018_151353_0_2.jpg azt a nevet adom a képnek, hogy hwonline-stresszlabda.jpg máris a kép elnevezéséből látszik, miről is szól a kép. Ha lecsukjuk a szemünket, is el tudjuk képzelni mi lehet ez a kép.
Alternatív szöveg (ALT)
Az alt attribútum a vakok és gyengén látók internethasználatát megkönnyíteni hivatkozott.
Ha a felolvasó program a képhez ér, akkor az alternatív szövegben (ALT) lévő szavakat fogja felolvasni. Amikor egy kép alt-ját töltjük ki, gondoljunk erre, és rövid, szabatos mondatban ismertessük a kép tartalmát. A Google is előszeretettel használja, hiszen nem csak a vakok és gyengén látóknak ad segítséget az alternatív szöveg!
Súgócímke (TITLE)
Ha egeret viszünk a kép fölé, akkor ez a szöveg fog megjelenni a kurzornál. Ez újabb lehetőség a keresőoptimalizálás során a tartalom, a kép és az azt tükröző kulcsszavak pontosítására.
Tudjuk, hogy nem kevés munka, de ezekkel a kis trükkökkel sokkal felhasználóbarátabbá és keresőoptimalizáltabbá tehetjük a weboldalt.
Képek jelentősége egy tartalomban
Az emberi agy villám gyorsan feldolgozza a képi információt, mint a szöveges leírásokat. Egy jó minőségű és a tartalomba illeszkedő képpel, azonnal azt a benyomást kelthetjük a látogatóban, hogy a keresésére eredményes találatot kapott. A jó képekkel tovább vezethetjük a felhasználót, ösztönözhetjük az olvasásra, és ennek köszönhetően csökkenhet a visszafordulási arány, amely már igen csak SEO szempont! Érdemes jó minőségű, gyorsan betöltődő, tartalomba illő képeket használni.
Sok sikert a munkához!