Magento frontend sebesség gyorsítás és mérése

Tartalom

  • A gyorsaság arányos a bevétellel
  • Oldalsebesség hatása a keresési helyezésekre
  • Frontend gyorsítás a Magento-ban
    • Szerveroldal
    • Varnish
    • Statikus tartalmak – JavaScript, CSS fájlok és képek
    • Frontend optimalizálása a design függvényében
    • Képek méretének optimalizálása
    • Megjelenítést gátló elemek minimalizálása
    • Szerveroldali tömörítés engedélyezése
    • HTML, CSS, JavaScript lekicsinyítése
  • Befejezés

 

Induljunk ki abból, hogy rákeresel valami kifejezésre a weben, és a kiszemelt oldal, amire rákattintottál lassan töltődik be. A következő kérdésekre kell választ adni magadban:

 

  • Mennyi idő után fogod azt mondani, hogy nem vársz tovább, és inkább visszalépsz a keresőoldalra?
  • Mennyire szívesen látogatsz vissza később a kérdéses oldalra, ha tudod, hogy nagyon lassan töltődik be?
  • Milyen bizalommal ajánlod az ismerőseidnek az adott oldalt?
  • Mi fog akkor történni, ha egy olyan szituációban vagy, ahol kénytelen vagy a mobilodat használni böngészésre és azonnal el kellene intézned az adott dolgot?

 

A válaszok egyértelműek, és mint weboldal, illetve webshop tulajdonos, pontosan ezeket a problémákat kell elkerülnöd azért, hogy több látogató használja a te oldaladat.

A céged presztízse múlik azon, hogy milyen gyorsan töltődik be az oldalad, ráadásul, ha lassú a betöltés, akkor nem is fognak visszatérni, keresnek másik hasonló oldalt, ahol a felhasználói élmény számukra sokkal jobb.

A sebesség a weboldalaknál mindig is nagyon fontos tényező volt, ám az idő előre haladtával az oldalakkal szemben támasztott követelmények is egyre komolyabbak.

A 2011-es adatok például így festettek:

 

oldalsebesség

 

Mára azonban az oldalaknak már sokkal gyorsabban kell betöltődniük.

A Google által a webmestereknek készült videóban kiderül, hogy egy webshopnak 2016-ban elfogadott érték 2 másodperc, viszont a Google-nél a jónak számító idő a 0,5 másodperc.

 

 

A Financial Times idei kimutatása szerint a következő tendencia figyelhető meg a cikkek olvasottságánál:

 

oldalak betöltési ideje

 

Vagyis jól megfigyelhető, hogy ha gyorsabb a konkurenciánál az oldalunk, akkor előnyre tehetünk szert, de ez természetesen fordítva is igaz.

A következő statisztika azt szemlélteti, hogy melyek azok a webshopokban problémás részek, amelyeket az Egyesült Királyságban nehezményeznek (Econsultancy, 2012).

 

területi problémák

 

Tisztán látszik, hogy a betöltési idő a megkérdezettek első számú problémája, mintegy 66,8%-uk nincs vele megelégedve.

Néhány további hasznos tudnivaló az oldal gyorsaságával kapcsolatban:

  • Ha 3 másodpercnél tovább kell várni az oldal betöltésére, akkor a felhasználók 40%-a inkább meg sem várja
  • Egy átlagos felhasználó mindössze 2,078 másodpercet hajlandó várni egy oldal betöltésére
  • Ha az oldal 1-2 másodperc alatt betöltődik, az 2%-os látogatószám növekedést eredményez
  • Ha 1 másodperc alatt teljesül a betöltés, akkor 4,6%-os a javulás

 

A gyorsaság arányos a bevétellel

 

Általánosságban elmondható, hogy 1 másodpercnyi oldal gyorsulás átlagosan 7%-os növekedést eredményez a konverzióban.

Megjegyzés: Akkor történik konverzió, ha valaki a hirdetésre kattint, majd olyan műveletet hajt végre, amelyet Ön a vállalkozás szempontjából értékesnek határozott meg. Ilyen lehet például az online vásárlás vagy a bolt telefonos megkeresése.

 

Ez a webshopok esetében természetesen a számokban is megmutatkozik. Érdekesség, hogy a Walmart és az Amazon egymástól függetlenül, de rájöttek, hogyha 0,1 másodperccel tudnak gyorsítani az oldal betöltésén, akkor az 1%-os növekedést jelent a bevételeikben – ekkora cégeknél az 1% is óriási pénz!

 

Néhány adat a webshopok esetében:

  • a felhasználók 83%-a elvárja, hogy a weboldal 3 másodperc alatt töltődjön be
  • ha 3 másodpercnél többet kell várnia, akkor a felhasználók 44%-a elpártol az oldaltól
  • 79% ezek után megfontolja, hogy egyáltalán visszatérjen-e az oldalra
  • 46% pedig még el is meséli az ismerőseinek az érzéseit ezzel kapcsolatban

 

Érdemes elgondolkodni azon, hogy növeljük az oldalunk sebességét, hiszen, másodpercenként általánosságban 7%-os növekedést érhetünk el, amit ha a napi bevételünk 100 000 Ft, akkor éves szinten megközelítőleg 2 500 000 Ft plusz bevételre tehetünk szert (100 000 * 0,07 * 365).

 

Oldalsebesség hatása a keresési helyezésekre

 

John Mueller SEO szakértő utánajárt a témának, és egyik cikkében kifejtette, hogy a lassú oldalak hátrébb vannak sorolva, viszont a gyors weboldalak között már nem játszik nagy szerepet pár ezredmásodpercnyi különbség.

 

Két fontos tényezőt kell megvizsgálni a weboldalak gyorsaságát illetően:

Az egyik – amit a felhasználó érez, azaz számára milyen gyorsan jelenik meg a tartalom,

A másik – ami a Google számára fontosabb –, hogy meg tudja különböztetni a lassú weboldalakat a normális sebességűektől. Kihangsúlyozta azt is, hogy minél gyorsabb az oldalunk, annál több felhasználó használja, így sokkal több aloldalt tudnak megtekinteni adott idő alatt, így több információt ismernek meg.

 

Frontend gyorsítás a Magento-ban

 

Mivel a legelterjedtebb keresőportál a Google, ezért célszerű az általa támasztott elvárásoknak megfelelni, amit legjobban a saját sebességmérő alkalmazásában lehet kipróbálni, és az ott kapott válaszok alapján javítani rajta: Google PageSpeed

Első projektünk, amiben megvizsgáltuk, hogy mivel tudjuk gyorsítani az oldal betöltési sebességét a Fradi webshop-ja, ezen a példán keresztül mutatom be a lehetőségeket:

 

Szerveroldal

 

Természetesen ahhoz, hogy a frontend tartalmak gyorsabban legyenek láthatóak a böngészőkben, a szerveroldalon is végre kell hajtani bizonyos optimalizálási folyamatokat annak érdekében, hogy a válaszidő a lehető legrövidebb legyen.

 

Varnish

 

Az egyik legelterjedtebb gyorsítótár (cache) megoldás a dinamikus tartalmak kiszolgálására, amiről már egy korábbi cikkünkben részletesen írtunk.

 

Statikus tartalmak – JavaScript, CSS fájlok és képek

 

Ezek gyorsítótárazásához az AWS CDN megoldását használjuk.

 

Frontend optimalizálása a design függvényében

 

A mai trendeknek megfelelően reszponzív design esetén a megjelenő képek mérete a böngésző méretétől függenek. A következő példában szemléltetem is, látszik, hogy a design és a sitebuild eltér az egyes töréspontok után (az AionHill a Bootstrap töréspontjait veszi alapul az általunk készítendő oldalak megvalósításakor):

 

webshop-design-1

1. ábra – minimum szélesség 1200 px

 

webshop-design-2

2. ábra- minimum szélesség 992 px

 

webshop-design-3

3. ábra – minimum szélesség 768 px

webshop-design-4

4. ábra – maximális szélesség 768 px

 

 

Fontos, hogy a megjelenő kép mérete megegyezzen annak a területnek a méretével, ahol azt megjelenítjük. Ez nem jelentene gondot akkor, ha mellőzzük a reszponzivitást, hiszen a Magento-ban le lehet kérdezni a képek átméretezett példányát:

 

$this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710);

 

Vagyis meg kell oldanunk, hogy mindig az adott böngészőmérethez jelenítse meg az átméretezett képet. Erre a legmegfelelőbb megoldás a <picture> HTML tag

A lényege, hogy meg lehet adni, hogy milyen felbontásoknál melyik kép jelenjen meg, végül pedig magát a kép <img> tag-et, hogyha a böngésző nem támogatná még ezt az új bevezetett szabványt:

<picture>
 <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(360, 365); ?>" media="(min-width:1200px)">
 <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(293, 297); ?>" media="(min-width:992px)">
 <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710); ?>" media="(min-width:768px)">
<source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710); ?>" media="(min-width:300px)">
 <img class="img-responsive"
 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(360, 365); ?>"
 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/>
</picture>

 

Képek méretének optimalizálása

 

A weboldalakra feltöltött képek túlnyomó többségénél megfigyelhető, hogy minőségromlás nélkül bizonyos programokkal lekicsinyíthető a képek mérete. Erre a Google is figyel, és jelzi a vizsgálatkor, hogy melyek azok a képek, ahol ezt meg kell tenni.

 

webshop-kep-optimalizalas

 

Erre mi nem készítettünk saját modult, mert a piacon fellelhető sok ingyenes Magento bővítménynek köszönhetően ez feladat könnyen megoldható. A választásunk az Image Optimizer for Magento-ra esett, ami egy ingyenes és teljesen jól használható megoldás erre a problémára.

A lényege, hogy a média, skin és frontend mappákban fellelhető képeket kigyűjti, és utána cron segítségével kötegelve optimalizálja a szerveren található képmanipuláló könyvtárak segítségével (jpegoptim, optipng).

 

Megjelenítést gátló elemek minimalizálása

 

Ez a gyakorlatban azt jelenti, hogy ha a JavaScript és CSS fájljaink száma nagy, akkor azoknak a betöltése sokkal több időt vesz igénybe, mert a fájlok betöltésével megvárja a másikra adott választ. Ennek a legmegfelelőbb mérése a Chrome-ban a developer tools, ahol összefűzés nélkül a következő eredményt kapjuk:

 

css-developer-tools-fajl-osszefuzes-nelkul

 

Látszik, hogy rengeteg idő, míg az összes fájl betöltődik. Ha a Magento adminisztrációs felületén bekapcsoljuk a fájlok összefűzését, akkor ugyanez az oldal a következő eredményt adja:

 

fajl-keptomorites-webshop

 

A felhasználó szemszögéből ugyanaz az eredmény, viszont jóval kevesebb fájlból dolgozik. Ez a lehetőség Magento alapfunkcionalitás, és ha jól írták meg a fejlesztők a JavaScript osztályokat, eljárásokat, akkor nem is lehet gond az összefűzésnél.

Bekapcsolni a System/Configuration/Developer menüpontok alatt lehet:

 

magento-developer-menu-fajl-osszefuzes

 

Szerveroldali tömörítés engedélyezése

 

 

A PageSpeed részletesen leírja, hogy egyes webszerverek esetében mi a teendő, milyen modulokat kell telepíteni ahhoz, hogy a tömörítés be legyen kapcsolva

Tesztelni könnyedén lehet, például Chrome esetében inspector módban (Ctrl+Shift+i) a network fülön a HTML oldal header (fejléc) részében megtalálható a következő:

 

szerver-oldali-tomorites-webshop

 

Végezetül a HTML, CSS, JavaScript lekicsinyítése

Távolítsuk el a felesleges karaktereket mindhárom oldalelemből, mert így csökkentjük a válasz méretét, így növeljük a válasz sebességét.

Magento-hoz ismételten az Aptrian termékét választottuk (Minify HTML CSS JS for Magento), ami a feltelepítés után egy egyszerű adminisztrációs beállítás után egy gomb megnyomásával már végre is hajtja azokat a módosításokat a fájlokon, amik növelhetik a méretét.

Fontos megemlítenem, hogy itt nem a javascript kicsinyítéséről/titkosításáról van szó, hanem a felesleges elemek eltávolításáról:

A Magento-s Validator osztály egy kiragadott része:

 

magento-validator-osztaly

 

Ezt a modul átalakítja:

 

magento-validator-osztaly-modul-atalakitas

 

Rövidebb tartalom, kevesebb felesleges karakter, gyorsabb betöltődés.

 

 

Összegzés

Az oldalbetöltési sebesség növelése egyre fontosabb a weboldalak, különösen a webshopok, számára, hiszen a látogatók is egyre többet várnak el, egyre jobb felhasználói élményt szeretnének.

Ebben a cikkben leírtam, hogyan lehet a Magento 1.x-nél javítani az oldalbetöltési sebességet, amely során különböző megoldásokat javasoltam.

Ami a Magento 2 rendszert illeti, úgy tervezem, az ezen a platformon működő webshopok frontend gyorsításával kapcsolatban is megjelentetek egy blogcikket, hogy teljes legyen a kép.

8 válaszok

Trackbacks & Pingbacks

  1. real viagra pharmacy prescription

    Magento frontend sebesség gyorsítás és mérése – aionhill.com

  2. albuterol inhaler

    Magento frontend sebesség gyorsítás és mérése – aionhill.com

  3. cialis no doctor’s prescription

    Magento frontend sebesség gyorsítás és mérése – aionhill.com

Hagyjon egy választ

Want to join the discussion?
Feel free to contribute!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé.