Weblap Készítés Debrecen - Weboldal sebesség teszt

Hogyan legyen gyorsabb a honlapja?​

Egy megfelelően elvégzett weboldal sebesség teszt csodákra képes Google szerint is, éppen ezért, ha érdekel hogyan működik a weblap készítés Debrecen városában és ezon kívül azt is szeretnéd tudni, hogyan turbózhatnád fel weboldalad sebességét ez a cikk neked való!

Gyors összegzés

A webfejlesztők tudják mit csinálnak, amikor optimalizálják egy oldal gyorsaságát, de elég ez a Google szerint is? Ha mobilos gyorsaságról van szó, az oldala mindig lehet gyorsabb. Ha már sikerült kiviteleznie a cache-elést, a csökkentést és hasonló optimalizálásokat, amiket el tud végezni, itt az ideje, hogy előlépjen a webdesigner.

Nemrég írtam egy blogbejegyzést egy webdesigner vevőnek…

az oldalak gyorsaságáról, és hogy miért fontos. Amit az írása előtt nem tudtam, az az, hogy a kliens ügynöksége éppen azzal küzdött, hogy optimalizálják az oldaluk gyorsaságát. Éppen ezért a kliens azon aggódott, mennyire lenne szavahihető, ha kitenne egy cikket a témában, amivel ő is éppen szenvedett.

Viszont hezitált. 

Megértette, mennyire fontos a mobilos oldalak gyorsasága a fogyasztói oldalról, és a proxyk miatt a keresőoptimalizálás szempontjából is. Viszont, ők mindig arra koncentráltak, hogy az oldal szép és hatékony legyen. A gyorsaságot a fejlesztőkre hagyták.

Végül úgy döntött, vár még a cikk publikálásával, míg el tudják rendezni a saját oldalukat. Ez idő alatt én elkezdtem gondolkodni:

weblap-készítés-debrecen-moon-pie-design

Van bármi, amit a tervezők megtehetnek az oldalak gyorsaságáért? - Weblap készítés Debrecen

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

A fejlesztők már így is rengeteg dolgot használnak az optimalizáláshoz:

Felmerül a kérdés, hogy van-e bármi más?

Szerintem, az egész kérdés hasonlóan van kezelve, mint a keresőoptimalizáció. Íróként én a szövegbeli optimalizációért felelek, míg a fejlesztők, akiknek átadom a kész tartalmat, a gyakorlati keresőoptimalizációt végzik el. A webdesignerek és fejlesztők egyszerűen megoldják ezeket a feladatokat.

SZERETNE EGY GYORS WEBOLDALT?

Weblap készítés Debrecen - Meg kell érteni, mit jelent a „lassú”

Vannak eszközök, amikkel kianalizálhatja az oldala sebességét, és ki is javíthatja azokat. Az egyik ilyen, ami kifejezetten hasznos, a Lighthouse. Az egyetlen probléma, hogy ezt fejlesztőknek szánták. 

Ehelyett inkább javaslom a Google erre szánt eszközét, a Test My Site-ot.

Ezt szigorúan azoknak szánták,…

akik gyorsan át akarják látni, hogyan teljesít az oldal. Csak be kell írnia az oldala elérhetőségét az erre kijelölt mezőbe, és el kell indítania a tesztet.

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

Amit én kifejezetten kedvelek ebben az eszközben, az az, hogy nagyon felhasználóbarát módon kapjuk meg az eredményeket. Ebben az esetben, az én oldalam „lassú,” még 4G-s hálózaton is. Bár már többen többször elmondták, hogy a felhasználó hajlandó várni három másodpercet, hogy betöltsön az oldala, a Google szerint a 2.9 másodperc túl sokáig tart. (Amivel én teljes mértékben egyetértek.)

Kiterjesztett elemzést is kaphat a Google-tól, ami alapján kiderül, hogyan gyorsíthat az oldalán, de az ajánlatok nem különböznek attól, amit a fejlesztők tennének. Például:

weboldal sebesseg optimalizalas

Ezt már tudjuk. 

Viszont, ha ön (vagy a fejlesztője) nem alkalmazta még ezeket a megoldásokat, van egy jó lista, amin végig lehet menni, még mielőtt bármibe belekezdene.

És nem azért mutattam meg ezt az eszközt, hogy aztán ugyanazokkal az optimalizációs folyamatokkal dolgozzon tovább, és elvárja ugyanazt az eredményt. Mit is mondanak az őrültség definíciójáról?

Ehelyett, szerintem ezt gyorsan ellenőrizze:

„Az oldalam elég gyors a Google szerint? Nem? Akkor nem elég gyors a felhasználó szerint sem.” - Weblap készítés Debrecen

Test My Site szerint kapott adatait az oldal alján lefuttathatja egy elemzőn is:

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

Ha nincs teljesen meggyőzve, hogy a három másodperces betöltésen még dolgoznia kéne, nézze csak meg ennek az anyagi hatását: már fél másodperc jelentős változást jelentene a havi egyenlegét tekintve.

Mit tehetnek a webdesignerek, hogy javítsanak a gyorsaságon?

Hagyja, hogy fejlesztők foglalkozzanak a szükséges optimalizálásokkal, mint a caching, vagy a fájl tömörítések, amíg ön a következő design tippekkel és stratégiákkal foglalkozik:

1. Alkalmazzon betűtípusokat egy tartalomhordozó rendszerből

Éppen elég dolog miatt kell aggódnia, mikor a betűtípusokról van szó, ezért lehet nem akar erre gondolni, de a megszokott webes betűtípusok nem jók, ha az oldal betölthetőségéről beszélünk. Valójában két tanulmány is megjelent az utóbbi időben, ami azt demonstrálja, hogy miért előnytelenek ezek a betűtípusok.

Hála az égnek, a CDN rendszerek rengeteget segíthetnek.

Downtime Monkey példa

Az elsőt a Downtime Monkey közölte. Ebben a tanulmányban a Downtime Monkey 58 százalékos gyorsaságnövekedésről kérkedik, amit különböző stratégiákkal érhetünk el – amik közül kettő arra vonatkozik, hogy a betűtípus hogyan segítheti elő a gyorsaság növekedését.

A Font Awesome ikonokat végül a CDN-től szerezték. Bár a Font Awesome saját CDN rendszere megbízhatatlannak bizonyult, ezért átváltottak a Boostrapre. Ennek hála 200-500 milliszekundumot spóroltak meg, minden oldalbetöltésnél.

A „Cabin” nevű Google betűtípust a Google saját CDN-jétől szerezték. Bár kissé humoros, hogy mikor ezek után lefuttattak egy sebességellenőrzést, kaptak egy ajánlatot, hogy a betűtípus lecserélésével javíthatnak a teljesítményen. A link, amit használtak, lelassította az oldal betöltését. Hogy ezt kijavítsák, ki kellett kerülniük a link használatát úgy, hogy a megjelenített betűtípus érintetlen maradjon. Ehhez pedig a Web Font Loadert alkalmazták, amivel végül 150-300 milliszekundumot spóroltak betöltésenként.

Brian Jackson teszt

Brian Jackson, a Kinsta vezető marketingese írt egy bejegyzést a KeyCDN-ről, amivel azt mutatja be, hogy mi a legjobb módja az alapvető betűtípusok használatának az oldalán. Láthatja a példáját, hogy ő mit ajánl optimalizálásra, mint például limitálni a használt betűtípusok számát az oldalon. Ennek ellenére, a CDN-nel való kísérletezése volt az igazán érdekes.

Először is elkülönítette a legnépszerűbb Google által kínált betűtípusok listáját, és letesztelte, milyen gyorsan lehet azokat a Google CDN-jén keresztül betölteni. Részletesebben a Weboldal készítés alapjairól és tipográfiákról: “Weboldal készítés alapoktól / semmiből. Honlapkészítés ingyen? Hogyan írjunk blogot?”

Weblap készítés Debrecen - Weboldal sebesség teszt Top 10 Google Betűtipus

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

Az Open Sans volt a leggyorsabb.

De ez nem jelenti azt, hogy az Open Sans a legjobb választás, ha gyorsítani akarja az oldalát. Végül is, az Open Sans-ot a Google szerverein keresztül kell alkalmaznia, ellentétben az Ariallal, amit biztonságosan használhat, és nem külső forrásból kell megjelenítenie.

Weblap készítés Debrecen - Weboldal sebesség teszt A Web Safe vagy az Open Sans betűtipus a jobb?

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

Az Arial 200 milliszekundummal verte az Open Sansot.

Mielőtt továbbmennénk,…

meg kell jegyezzem: alapvetően segít a gyorsaságon, ha külső forrásból kölcsönzött betűtípusok helyett a saját rendszerének típusait használja. Ez lehet, hogy design szempontból nem lesz olyan izgalmas, de nem fogják arra kényszeríteni a felhasználókat, hogy üljön és várjon percekig a betöltésre, amivel ön látogatókat és vásárlókat veszítene. Webáruház készítés esetén kifejezetten problémás, ha több száz termékünk van.

Lehet, most arra gondol, hogy letölti a Google betűtípusait, és ezzel megoldja a problémát. Ezzel nem kell kompromisszumokat kötni, és időt is megspórol az oldal betöltésénél. Ugye?

Hát, mi erre is kíváncsiak voltunk, így leteszteltük.

Weblap készítés Debrecen - Weboldal sebesség teszt Lássuk a Local Betűtipust és a Google CDN-t!

profi-honlapkeszites-debrecen

Ha helyi szerverről futtatjuk, az Open Sansnak 0,530 milliszekundumra van szüksége. Nem nagy különbség, de nyilván nem ez a megfelelő út.

Tehát mi a konklúzió? Van néhány opció.

  • Használhat biztonságos betűtípusokat, és elkerülheti ezeket a problémákat, szimplán azzal, hogy nem használ külső forrásból szerzett betűtípust
  • Használhat Google Fontot, ha biztos benne, hogy a Google CDN-jét használja.
  • Letöltheti a Google betűtípusait, és feltöltheti a saját CDN-jébe (már ha rá tudja venni, hogy így gyorsabban töltsön.)

Bármelyiket is választja, ha a betűtípusokat és ikonokat olyan helyről szerzi, ahonnan gyorsabban tölt, optimalizálhatja az oldal teljesítményét.

2. Ne használjon nehézkes design elemeket

A következő lista átismétel dolgokat, amikről már volt szó korábban is, tehát nem akarom azzal pazarolni az idejét, hogy újraírjam az egészet. Viszont, tényleg úgy gondolom, hogy ha eltávolítunk bizonyos elemeket a designból (különösen a nehezebbeket), azzal optimalizálhatjuk a fogyasztói élményt, és ezt érdemes ismételni:

A reklámokról - A marketing guruk túlzásba viszik.

Mikor arról írtam, hogy milyen elemeket kellene eltávolítani a weboldalakról, azt írtam, hogy a reklámokat kellene első körben kizárni. És még mindig így gondolom.

Kezdésként, a reklámokat mindig harmadik fél szolgáltatja. Valahányszor külső szolgáltató elemeit használja, lassítja a saját weboldalát, mivel arra vár, hogy ők a saját tartalmaikat elhelyezzék az oldalán.

Továbbá, az USA lakosságának 26 százaléka használ adblocker technológiát az eszközein, tehát egyébként se fogják látni a reklámokat.
profi-honlapkeszites-debrecen

Ehelyett, olyan jövedelmező technológiát alkalmazzon, ami a reklámokat elmozdítja az oldaláról, növeli az oldalon való kommunikációt, és nem meríti le a szerver forrásait:

  • Remarketing

Állítsa be az oldalát, hogy kövesse a látogatói online tevékenységét, majd kínálja fel nekik a saját szolgáltatásait valaki más oldalán reklámként.

  • PPC

Kifejezetten jó pénzt lehet összeszedni, ha az ember a pay-per-click, tehát kattintás utáni fizetés opciót választja, amit a Google kínál.

Ezeket nagyon egyszerű üzemeltetni, ha az oldala gyakran kínál új tartalmat, és van meggyőző ajánlata.

Ne használjon felugró reklámot a honlap készítés során

A Google szerint a felugró reklámok, bizonyos esetekben megengedettek. De ha WordPress oldalt szeretne kiépíteni, vagy más hasonló platformot használ, és szoftverbe építhető alkalmazással (plugin) hoz létre felugró reklámot, azzal lelassítja az oldalát. Lehet, hogy nem nagyon, de lassítja.

ThemeIsle úgy döntött, kivizsgálja bizonyos plugin alkalmazások WordPressre gyakorolt hatását. Ez történt:

 

Alapvető betöltési idő (mp)

Felugró reklámmal betöltési idő (mp)

Százalékos eltérés

Biztonsági plugin

0,93 mp

1,13 mp

21.5%

Tartalék plugin

0,93 mp

0,94 mp

1.07%

Kontakt plugin

0,93 mp

0,96 mp

3.22%

Keresőoptimalizáló plugin

0,93 mp

1,03 mp

10.75%

Ekereskedelem plugin

0,93 mp

1,22 mp

31.1%

Most, hogy ezt tudjuk,… 

néhány ilyen plugint lehet programozni, hogy könnyebb legyen, mint a többi, de mindig lesz eltérés a betöltési időben. Ebből kiindulva, ez a különbség lehet .01 másodperc meg .29 másodperc eltérés.

Ha tudja, hogy a felugró reklámok nem az igaziak, akkor miért forszírozza? Ehelyett inkább ajánljon promóciós ajánlatot, állítsa be a süti értesítőt vagy figyelmeztetést, és helyezze el az oldalán.

 

Ne használjon nehézkes elérhetőségi csatornákat

Ne feledkezzen meg a weboldala elérhetőségi csatornáiról. Különösen óvatosnak kell lennie a mobilos verzióval. Persze, ez részben attól is függ, milyen gyorsan tudja a felhasználó kitölteni. Viszont, ha a felhasználónak egy hosszú vagy többoldalas formulát kell kitöltenie, az az oldal gyorsaságán is meg fog látszódni.

Általánosságban elmondható, hogy a mobilos formuláknak egyszerűnek kell lennie, és csak azt kell beletenni, ami tényleg fontos.

Viszont van a reszponzív weboldal készítés megvalósítására alternatív verzió is.

El is hagyhatja ezt az elérhetőségi formulát egy az egyben. Vannak oldalak, amik már meg is tették, és úgy írták le az információkat, mintha a gyakori kérdések szekció egy passzusa lenne, email elérhetőség, telefonszámok a látogatóknak, ha valamiért fel kell venni a kapcsolatot. Ez a megoldás nyilvánvalóan egyszerűbben kivitelezhető, és enyhíti a designt. Viszont nem biztos, hogy felhasználói szempontból a legjobb kivitelezés.

SZERETNE EGY GYORS WEBOLDALT?

3. Egyoldalas weboldalt készítsen - Segítünk! Weblap készítés Debrecen

A fentebb olvasható ötletek a lehető legegyszerűbben kivitelezhetőek, tehát inkább azzal kezdjen, ha a kliens vagy fejlesztő önhöz fordul, hogy túl lassú az oldala. Viszont, ha a sebességmérő tesztek még mindig 2,5 másodperc körüli eredményeket hoznak, előfordulhat, hogy másfajta megközelítésre lesz szüksége, hogy optimalizálja a gyorsaságot. 

Ez a Webshopoknak jelent óriási kihívást. Komoly problémák vannak, ha egy webshop pár másodperc alatt nem tölt be. Nem csak ügyfeleket veszít, de Google szemében is esik az értéke. (Webshop készítés Debrecen

Ahogy Adam Heitzman fogalmazott a Search Engine Journalnak adott interjújában:

„Az egyoldalas oldalak általában sokkal egyszerűbben konvertálhatók át mobilra, és a felhasználók egyszerűbben tudják használni őket.” 

De jelenti ez azt, hogy az egyoldalas weboldalak minden esetben gyorsabban töltenek be, mint a többoldalas társaik? Természetesen nem. Viszont, a legtöbb profi designer mégis az egyoldalas kivitelezés mellett dönt. DevriX készített egy szép inforgrafikát, hogy prezentálja ennek okait.

Egy landing page, egyoldalas weboldal nálunk most csak 39.990 Ft. Olvasson többet a weboldal árakról itt. 

weboldal sebesseg optimalizalas

Csak hogy tisztázzuk: Nem azt mondom, hogy most azonnal alakítsa át az oldalát egy egyoldalas alkalmazássá. Ha fel akarja gyorsítani az ügyfele digitális tulajdonát, a PWA (Progressive Web App, progresszív internetes applikáció) lehet az egyik legjobb megoldás.

Amit javasolnék, hogy akkor váltson egyoldalas oldalakra, ha az oldala megfelel a következő kritériumoknak:

  • Kifejezetten kicsi fókuszú üzletek
  • Weboldalak, amiknek nem kell sok leírás, hogy átadják a lényeget
  • Limitált azon kulcsszavak listája, amik alapján rangsorolni kell az oldalt

Ha egy weboldal (honlapkészítés Debrecen), amit éppen készít belefér ezekbe a kritériumokba (vagy legalább háromból kettőnek megfelel), már célszerű lehet egyoldalas weboldallá alakítani.

Mivel az egyoldalas verziók arra kényszerítik, hogy kevesebb dolgot tegyen rá, a kevesebb tartalom automatikusan könnyebb oldalt eredményez. Még ha egy kicsit feszegeti is a határokat, még így is gyorsabb oldalt tud létrehozni, mint a Tempus is teszi:

Weblap-Készítés-Debrecen-Weboldal-Sebesség-Teszt

Ami jó ezekben az oldalakban,…

hogy nem fukarkodnak a lenyűgöző képekben, hogy eladják a luxusotthonokat. És mégis, a mobilos oldal 2,1 másodperc alatt tölt be.

Egyrészről, nem minden oldalt arra építenek, hogy minél gyorsabb legyen. Vegyük például Davide Marchet oldalát:

weboldal sebesseg optimalizalas

Mivel tele van különböző animációkkal, 5,4 másodpercbe telik míg betölt telefonon, mint ahogy ezt a fenti képernyőképen láthatja is. A kép, amit lát, valójában az első kép, ami megjelenik, míg az animáció betölt a háttérben.

Javasolnám, hogy legyen óvatos, ha az oldala teljesítményét szeretné javítani. A designnak egyszerűnek kell lenni, fókuszáltnak, és tehermentesítettnek (például vissza kell fogni az oldalt nehezítő animációkat).

Zárásként - Weblap készítés Debrecen

Ahogy a Google is előnyben részesíti a mobilos oldalakat, telefonnal kompatibilisre konvertálni az oldalát már nem olyan probléma, amit sokáig el tudna odázni. A weboldala minden verzióját – de kifejezetten a mobil verziót – optimalizálni kell a fogyasztói élményhez.

Ez magába foglalja a designt, a kódolást, a tartalmat, és mindent mást, amire az ember csak gondolni, és amit optimalizálni tud. Amint a fejlesztő elvégezte a hagyományos teljesítmény optimalizálást, hogy felgyorsítsa az oldalt, a designeren a sor, hogy elvégezze a szükséges változtatásokat. 

Néhány esetben ezek egyszerű változtatások…

(betűtípusok stb; lásd a cikkben részletezett megoldásokat), más esetekben kicsit bonyolultabb lépéseket kell megtenni; ez lehet teljes átdesignolás is.

Először is gondolja át, mennyire lassúnak látja a felhasználó az oldaltá. Aztán vizsgálja meg, mi okozza a lassulást a telefonos megjelenítés esetén. Faragjon le belőle, apránként, és nézze meg, mi az, amit a designer megtehet az oldaláért, hogy kiegészítse a fejlesztő munkáját.

Ha tetszett a cikk szeretném figyelmébe ajánlani hasonló blogbejegyzésünket: “Weboldal készítés alapoktól / semmiből. Honlapkészítés ingyen? Hogyan írjunk blogot?”

Ha tetszett a bejegyzés legyen szíves ossza meg az ismerőseivel is:

Kapcsolódó cikkek a weboldal készítésről

Kérjen ajánlatot weboldalára !