A weboldalad teljesítményének optimalizálása létszükség

Címkék: ,

a-weboldalad-teljesitmenyenek-optimalizalasa-nem-luxus-hanem-letszukseg

Ismerd meg a legfontosabb honlap tesztelő eszközöket és bővítményeket, hogy a weboldalad teljesítményét a csúcsra járathasd! 

Ha rákattintottál erre a cikkre, már biztosan nem most találkoztál először a weboldalkészítés fortélyaival. Ha mégis, akkor van egy rossz hírem, ez a cikk nem Neked szól…akkor inkább ezt olvasd el: https://designstreet.hu/blog/igy-indulj-el-egy-szemelyes-weboldallal 

Ha tovább olvasol bele fogok menni részletesebben az egyedi weboldalkészítés rejtelmeibe, azon belül is arról fog szólni az írás, hogy milyen honlap tesztelő eszközöket és bővítményeket érdemes használni, illetve, hogy mire kell figyelned a weboldal teljesítményének optimalizálásakor.

Ha még nem csengenek ismerősen a GTMetrix, PageSpeed Score vagy a Minify HTML kifejezések/nevek, akkor készíts egy frissítő italt magad mellé és indulhat a művelődés!

Talán nem lesz meglepő a következő kijelentés: egy honlapot folyamatosan szükséges tesztelni, hogy az az elvárt céloknak megfelelően működjön. Persze ez csak akkor fog működni, ha tisztában vagy az adott honlap céljaival, de feltételezzük, hogy tudatában vagy ennek.

Honlap tesztelő eszközök és bővítmények, weboldal teljesítmény optimalizálás

Az, hogy saját magad írtad-e a weboldal sablonját, vagy hogy hozott anyagból dolgoztál-e a tesztelésnél nem annyira lényeges, de ha már kezdetben rosszul lett felépítve a weboldal, akkor sok jóra nyilván nem számíthatsz. Ezért kell körültekintően eljárni a honlap létrehozásánál, azonban mivel emberek vagyunk, így tévedhetünk – ezért a tesztelés. Ilyenkor kiderülhet például, hogy nem volt jó ötlet felrakni egy bizonyos bővítményt, vagy telepakolni az oldalt több galériamodullal, sőt adott esetben bármennyire is jól mutat egy-egy animáció a honlapon, ha nagyon belassítja az oldalt, akkor fontold meg, hogy inkább érzelmes búcsút mondasz a vidáman pattogó animált figuráknak, mivel a lassulás miatt elveszti a hozzáadott értékét.

Ha már lassulás: két fő dolgot mindenképp tarts észben, hogy elkerüld a hosszú betöltődési időt!

  1. Legyen jó minőségű a sablon, amit használ a weboldal, akkor is, ha saját magad írtad és akkor is, ha vásárolt a sablon. Ne legyen teli kövér Javascript könyvtárakkal, és indokolatlan vizuális elemekkel, amik zabálják az erőforrást.
  2. Képek legyenek átméretezve, tömörítve. Erre használhatod a TinyPng bővítményét. https://tinypng.com/

Most pedig nézzünk meg néhány hasznos mérőeszközt közelebbről is!

GTMetrix

A GTMetrix mérési adatai elsősorban a weboldal teljesítményét ellenőrzik. Ez azért hasznos eszköz, mert nem egy mutató értéket ad, hanem egy összetett mutató csoportot, ami több paraméterre is kitér a weboldalon. Értelemszerűen az a jó, ha a PageSpeed Score és a YSlow mutatók 100% közelében vannak, de a fő cél az, hogy a teljes diagnosztika legyen zöld!

Néhány alapfogalom, amivel érdemes tisztában lenned:

  • Fully Loaded Time: Ez a teljes oldal betöltési idő, azt mutatja, hogy a weboldal mikorra tölti be az összes elemét.
  • Total Page Size: A weboldal mérete. Azt mutatja meg, hogy összesen mennyi adat letöltésére volt szükség a weboldal betöltéséhez.
  • Requests: A weboldal kéréseinek száma, azaz hány darab különböző elemet kell elérnie a betöltött oldalnak, hogy minden eleme meglegyen.

A GTMetrix egy jó szoftver lehet középhaladóknak és profiknak is egyaránt, mivel ingyenesen is használható (korlátozottan), viszont a fizetős verziók sem túl drágák, ám ekkor már a funkciók és az elvégezhető mérések darabszámát tekintve is jelentős növekédést kapunk.

Főbb funkciói:

  • összefoglalók a kulcsfontosságú teljesítménymutatókról
  • teljesítménykövetés monitorozással, grafikonokkal és figyelmeztetésekkel
  • különböző lokációkról lehet tesztelni a weboldalt
  • valós vagy szimulált Androidos eszközökön tesztelési lehetőség
  • videófelvétel az oldal teszteléséről: így pontosan meghatározhatóak a szűk keresztmetszetek, vagy leállások helyei
  • és még sok más hasznos funkció…

Használata:

  1. Egyszerűen másoljuk be a kívánt weboldal linkjét a főoldalon található “Enter URL to Analyze” sávba és kattintsunk a “Test your site” gombra.
  2. Várjuk meg, amíg a program elvégzi a méréseket (általában pár perc alatt megvan)
  3. Elemezzük a kapott adatokat!

Ebbe a cikkbe nem fér bele, hogy minden elemzési lehetőséget sorra vegyünk, amit a GTMetrix kínál. Szerencsére elég egyértelműen, vizuálisan (pl. ha nem jó valami, az piros, ha kielégítő, akkor narancssárga, ha jó, akkor zöld), ill. leírásokkal is elmagyarazázza (angolul a kis kérdőjelekre kattintva), hogy mi micsoda.

(Itt jegyezném meg, hogy a weboldalkészítésnek ezen a szintjén a közepes angol tudás már elvárás.)

Google PageSpeed Insights 

Ez az eszköz pontosan azt csinálja, amit a neve is ígér: elemzi a weboldal tartalmát, és az ott találtak alapján javaslatokat ad az oldal gyorsabbá tételére.

Kulcsfogalmak ehhez az eszközhöz:

  • Lighthouse performance scoring:
    Ez a mérési rendszer 6 vagy 8 pontszám alapján számolja ki a weboldal összpontszámát, ráadásul ezt súlyozottan teszi. Alább röviden leírva, hogy mi ez a (max.) 8 szempont. Zárójelben a súlyozás mértéke olvasható.
  • First Contentful Paint (10%)
    Az első vizuális tartalomválasz időpontja, amikor a rendszer megkezdi az első szöveg/kép megjelenítését. 
  • Speed Index (10%)
    Ez a mutató azt jelzi, hogy az adott oldal tartalmai milyen gyorsan válnak láthatóvá.
  • Largest Contentful Paint (25%)
    Azt az időpontot jelöli, amikor a rendszer megjeleníti a legnagyobb szöveget/képet. 
  • Time to Interactive (10%)
    Az ahhoz szükséges időtartam, hogy az oldal teljesen interaktívvá váljon. 
  • Total Blocking Time (30%)
    Az első vizuális tartalomválasz (First Contentful Paint) és az interaktivitásig (Time to Interactive) eltelt idő közötti minden periódus időtartamának összege milliszekundumban. 
  • Largest Contentful Paint (25%)
    Azt az időpontot jelöli, amikor a rendszer megjeleníti a legnagyobb szöveget/képet.
  • Cumulative Layout Shift (15%)
    Ez a mutató az oldal megjelenítési területén látható elemek mozgását méri.

A mérőszámok meghatározásának leírása meghaladja a cikk terjedelmét, de az előző szoftverhez hasonlóan a kapott pontszám alapján itt is színkódolva vannak a kapott mérési eredmények (zöld = jó, narancs = kevésbé jó, piros = rossz). Előnye lehet a GTMetrix-hez képest, hogy magyar nyelven is elérhető.

Használata alapvetően megegyezik más analitikai szoftverekkel. A weboldal linkjének bemásolását és a mérés elvégzését követően a szoftver kiadja a felfedezett hibákat, és javaslatokat tesz azok kijavítására.

Mobil és asztali gép nézetben is megmutatja az oldal hibáit. Ha túl nagy a különbség a két szám között, akkor törekedj arra, hogy minél előbb javíts a gyengébb számon. Google PageSpeed nagy mértékben elemzi magát a szervert is, amin az oldal van, ezen van, hogy nincs módunk változtatni.

Minify HTML

A Minify HTML plugin egy olyan problémára ad megoldást, ami gyakran előfordul WP oldalaknál. Nevezetesen arra, hogy a HTML programnyelvben megírt kód “hanyagul néz ki”, úgy is mondhatnánk, hogy amatőr hatást kelt. De az ilyen kódok nem csak kinézetükben jelentenek problémát, hanem lassíthatják is az oldal letöltési idejét. Ekkor tud jól jönni ez a kis hasznos plugin, ugyanis kitakarítja nekünk a hanyagul összerakott kódokat, és lekicsinyíti azokat, ezzel csökkentve a letöltési időt is.

Természetesen több hasonló plugin van, én azért ajánlom ezt, mert rendelkezik haladó beállításokkal is. Így például rendelkezik a JavaScript és a belső CSS (opcionális) speciális tömörítésével is. Nem kavar a szövegterületekkel, vagy az előre formázott szövegekkel sem. Továbbá beállíthatóak benne a HTML-, CSS- és JavaScript- megjegyzések eltávolítása, és más szükségtelen elemek törlése.

Rövid, de úgy gondolom annál hasznosabb listám végén meg szeretnék említeni két magyar SEO analitikai programot. Az egyik, régi motorosnak számító SEOceros, a másik pedig a SEOsiker elemző oldalak.

Technikai SEO tesztelők

SEOceros

Ennek az online eszköznek az egyik nagy előnye, hogy már az ingyenes verzió is korlátlan elemzést tesz lehetővé, sőt még az aloldalakat is elemzi és publikus adatbázisban is végez keresést. A fizetős verzió már privát adatbázisokban is keres, ill. elemzéseinket személyre szabhatjuk, letölthetjük.

Széles körű analízt kapunk pillanatok alatt, természetes ahogy a neve is mutatja, itt a keresőoptimalizáláson van a hangsúly: weboldaltartalom SEO elemzés, meta címkék és linkek vizsgálata, betöltődési sebesség elemzése. Ezeken felül pedig a fejlesztési pontokat egy jól látható listában összegzi és ingyenes SEO audit-ot kínál.

További előnye, hogy rendezetten jeleníti meg a mért adatokat, ahol kell táblázatban (pl. kulcsszavaknál), ahol kell szófelhőben vagy csak egyszerű szöveges leírással.

SEOsiker

Az előzőhöz hasonló elsősorban a keresőoptimalizálást segítő SEOsiker szoftvert mutatom be.

Ez az oldal kevésbé hozzáértők számára jobb választás lehet, mivel áttekinthetőbb (van benne áttekintő és részletes nézet), illetve külön leírásokat tartalmaz az általa vizsgált elemekről, hogy azokat mikor tekinti jónak, konkrét példákkal illusztrálva. Még mielőtt kipróbálnánk a saját oldalunkon, megnézhetjük, hogy mire számíthatunk a demo futtatásával (ennek egy apró szelete látható a fenti képen).

Mindenképp hátránya a SEOcerossal szemben, hogy csak egy ingyenes elemzést ad, utána fizetni kell érte, ám széles csomag kínálata miatt nagy valószínűséggel lesz olyan verzió, amit érdemesnek találsz majd megvételre.

További előnye, hogy a weboldal ún. Tudástérében és a Hogyan használd? részben rengeteg hasznos információval ellát, hogy ne csak használd, hanem ki is használd az elemzés által kapott adatokat!

Természetesen ezeken felül még számtalan hasznos eszközzel, bővítménnyel találkozhatunk, amik folyamatosan fejlődnek, így jobbnál jobb adatokat adva kezünkbe, hogy minél profibb oldalakat hozhassunk létre. Azt javaslom légy merész és tesztelj le több programot is mielőtt végleg letennéd a voksod valamelyik(ek) mellett. Ennek az írásnak az egyik célja az volt csupán, hogy a bőség zavarában el tudj indulni a weboldal teljesítmény optimalizálás világában.

Egy nagyon fontos gondolat útravalóként:

Nem mérőszám optimalizálást végzünk, hanem weboldal teljesítményt, tehát ezek a mérőeszközök soha nem írhatják felül az üzleti célokat.

Van egy jó hírem, ha követted a leckékben az ajánlásokat, akkor ezeket az eszközöket már csak ellenőrzésnek használod, mert a jó sablonnal már eleve jó arányokkal indulsz, csak a finom hangolásokat kell megcsinálnod.

És még egy utolsó gondolat: Ha olvastál a sorok között, akkor észrevehetted, hogy miért érdemes (teljesítményoptimalizálási szempontból) egyedileg kódolt weboldalt készíteni. Ebben az esetben ugyanis tényleg úgy állíthatod össze a weboldaladat, hogy az már a kezdetektől fogva úgy épüljön fel, hogy az üzleti céljaidnak megfelelő mérőszámokat kaphasd. Ugyanezt egy vásárolt sablon esetében nem tudhatod biztosra, amíg bele nem néztél a kódjába.

Hamarosan új tanfolyamunk indul!

Ha szeretnéd megismerni az egyedi weboldalkészítés rejtelmeit, akkor kövess minket közösségi média csatornáinkon, vagy iratkozz fel hírlevelünkre!



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.



Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

Kövesd közösségi csatornáinkat is!