A Prestashop optimalizációja egy hatalmas téma, ennek ellenére megpróbálom valahol elkezdeni. Természetesen írásom a teljesség igénye nélküli, ezt nézzétek el Nekem.
Kezdjük az admin felület Tools => Performance beállításaival: (1.5.x):
A Template cashe/Sablon gyorsítótár sose legyen állandóan bekapcsolva, legyen ezen: “Recompile templates if the files have been updated/Sablon fájlok generálása ha azok változtak “, azaz csak akkor forgassa be újra a tpl fájlokat, ha azok ténylegesen megváltoztak.
Az alatta lévő Cashe lehetőség szerint legyen bekapcsolva.
Kapcsoljuk be a CCC/KTC beállításokat:
CCC-KTC beállítások bekapcsolása
A Prestashopunk állapotát egy gtmetrix.com nevezetű nagyszerű és hatékony analízis-weboldallal fogjuk felmérni. Kattintsatok rá, írjátok be webshopotok URL-jét és indulhat is!
Egy átlagos Prestashopot fel lehet hozni A-B-s besorolásra:
gtmetrix.com: A-B-s Prestashop besorolás
Ha Neked ennél jobb besorolásod van akkor szívből Gratulálok, az oldalad nagyszerűen rendbe lett téve.
Ha ennél rosszabb, akkor érdemes továbbolvasnod a cikket: könnyen lehet egy két dolgon javítani.
Próbálom sorrendbe állítani a feladatsort költséghatékonyság szerint növekvőbe. Nem lesz egyszerű de megpróbálom.
Tehát a sorrend elején azok szerepelnek amiket a legkisebb erő (és pénz) befektetéssel meg lehet csinálni.
1. Specify image dimensions, azaz: adjuk meg a képek méretét tpl-ben:
A lényege ennek a hibaüzenetnek röviden és dióhéjban: sok idő elmegy azzal hogy a böngésző lekéregeti (ha van egyáltalán, de inkább hiányzik) a képek méretét css-ből. Ez időigényes mert a böngészőnek méret híján le kell töltenie először a képet, megvizsgálni mekkora a mérete, ezt visszaküldeni és utána megjeleníteni. Felesleges köröket fut, szerencsére könnyen tudjuk orvosolni:
Nyisd le a lenyílómenüt és nézegesd meg hogy milyen képekért kiabál, nézzünk egy fiktív példát:
http://peldadomain/14…valamilyentermekkep.jpg (Dimensions: 160 x 160)
ez egy termékkép. Mi a teendő? Meg kell keresni melyik tpl-ben van. Nézzük meg az oldalt, látni fogjuk hogy hol található. Ezek után azonosítsuk be, a példánkban ez a kép a kiemelt termékek között van, így a modules mappában egy homefeatured név alatt fogjuk megtalálni. Keressük ki a homefeatured.tpl-t és nyissuk meg, majd adjuk meg direktbe a kép méretét például így:
...img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="160" width="160" alt="{$product.name|escape:html:'UTF-8'}" />
Most direktben megadtuk a méretét. Ehhez hasonlóan kell eljárni a többi, lenyíló menüben felsorolt képpel is. Felkutatni a tpl helyét, megkeresni a kérdéses sort és megadni direktbe a pontos méretet. Ez sokat segít a shopon.
2. Enable gzip compression, azaz: engedélyezzük a gzip compression-t
Ezt a kört valószínű a szolgáltatóval kell lefutnod, minden szolgáltatónál máshogy megy ennek a tömörítési eljárásnak a bekapcsolása. Ha nem tévedek akkor csak egy On-Off kell a php.ini-ben, de nyilván ezt csak a szolgáltató tudja elvégezni. Miről is van szó?
A gzip egy tömörítési eljárás linux alatt. A szerver mielőtt elküldené a kliens böngészőnek az adatokat összetömöríti: majd a kliens böngésző kitömörítve megjeleníti azt. Gyors, mert a tömörítési algoritmus hatásfoka igen jó, ezáltal csökkenthető a küldeni kívánt csomag mérete, amiből egyenesen következik hogy rövidebb idő kell az adatátvitelhez.
Amit tenned kell: írsz egy levelet a szolgáltatónak, hogy a gzip compression-t legyenek szívesek bekapcsolni. Egy tipp:
ezen a két oldalon ellenőrizni lehet hogy a gzip compression be van-e kapcsolva a szerverünkön:
whatsmyip…mpression-test/
aruljohn.com/gziptest.php
igen hasznosak tudnak lenni. Ha megnézed akkor láthatod hogy nálad be van-e kapcsolva.
Megjegyzés: vannak esetek, amikor ez a kis trükk is segít: nyisd meg a root/config/config.inc.php konfigurációs fájlt, és az elején keress egy ilyet:
ini_set ();
(vagy olyan részt ahol ini_set ();-es deklarációk vannak) majd egészítsd ki ezt a következőképpen:
ini_set ('zlib.output_compression', 'On');
3. Enable Keep-Alive, azaz: Keep Alive engedélyezése
emlékeim szerint szintén szolgáltatóval kell megfutnod. Ha kéred tőlük a gzip-et akkor ezt is írd meg nekik. Csak engedélyezzék és kész.
4. Avoid bad requests, azaz rossz/hiányos lekérések
Nyissuk le, nézzük meg mit is mond: általában azt szokta tartalmazni hogy javascriptek és képek 404/410-es hibaüzenetet dobnak vissza. Vagyis nem léteznek, vagy ha mégis, akkor más helyen. Lekérés során elég sok idő megy el rá mire a lekérdezés visszadobja hogy a fájl nem található az adott helyen => utána kell nézni hogy ki kéri ezeket le, és miért nincs a helyén! Kezd a képekkel szerintem, az könnyebb. Példa: mutat egy png-t, ami nincs meg. Először is nézd meg hogy az alap témában bent van-e, ha igen akkor másold át . Ha esetleg nem tudod hogy egy kép honnan hívódik meg (ki akarja előkeríteni) akkor szutykosabb, de még mindig jobb megoldás ha az adott képet pótolod egy 1×1 pixeles üres képpel. Ha png akkor átlátszóra kell csinálni és akkor senki sem fogja észrevenni… és nem generál hibát sem, így is nyerve egy kis időt. Természetesen a legjobb, ha kódban kikeresed és kiiktatod a kép lekérését.
5. Optimize images, azaz optimalizáljuk a képeket
Nagyon fontos ez a rész, és nem csak azért mert a legkönnyebb rajta segíteni, hanem azért is mert sokat megtakaríthatunk vele. Mit is jelent ez? Amikor te létrehozol egy képet, akkor szinte biztos hogy annak a képnek le lehet generálni egy ugyanolyan, minőségben megegyező, de méretben kisebb változatát (gondoljunk csak a png és a jpg közti méretekre, okés, a jpg egy nagyon jó tömörítési algoritmus, de azért gondoljuk végig). A legjobb az egészben hogy Neked nem kell megtanulnod és foglalkoznod azzal hogy a képeidet újra generáljad: ez a weboldal (csakúgy mint a google PageSpeed) megteszi helyetted. Ha lenyitod, láthatod hogy egy képen mennyit lehetne spórolni, ha kicserélnéd FTP-n a minőségben megegyező, de “karcsúbb” társára. Semmi mást nem kell tenned, mint elfogadni azt a felajánlást amit a gtmetrix ad: legenerálja Neked ezeket a képeket, ott van mellette a link, megnyithatod, lementheted, és helyes fájlnévre átnevezve felülírhatod a tárhelyeden lévővel. Ott van mindegyik kép után hogy ha lecseréled mennyit nyersz %-ban és kbyte-ban is.
6. Combine images using CSS sprites, azaz css-ben különálló képek egyesítése egy képben CSS sprites segítségével
Itt a lényeg az, hogy kis képek különálló css-ben vannak meghívva az oldalad különböző pontjain (például: kis kosár ikon, kis facebook ikon, kis twitter ikon stb.). Ha ezeket egyesítenénk egyetlen nagyobb képben (mondjuk egymás alá betéve) és minden helyen csak ezt az egy képet hívnánk meg css-ben a megfelelő pozíció megadásával, azzal kis időt tudunk megspórolni (egyetlen kép és lekérés letöltése miatt). Oldalunk CSS sprites-jában ez a weboldal tud segítséget nyújtani:
spriteme.org/ . A “Demo” rész bemutatja, hogyan is kell ezt az oldalt használni. Ha végigmész a lépéseken akkor a weboldal legenerálja Neked azt az egy képet, amiben a többi kicsi benne van, már csak annyi a dolgod hogy CSS-ben a megfelelő helyére betedd a helyes pozicionálással együtt.
Ezek voltak azok amiket egy átlagos felhasználó meg tud tenni a weboldalért. Garantálom ha ezeket sikerül megcsinálnod/megcsináltatnod (szolgáltató segítségével) egyből lejjebb ugrik a betöltési idő, jobb besorolást kapsz és a google is jobban fog szeretni.
Ha a gtmetrixen a “Timeline” (Idővonal)-ra kattintasz, láthatod hogy mivel tölti el a legtöbb időt a weboldalad betöltéskor. Ha esetleg van olyan javascripted/képed, ami nincs a helyén (tehát nem találja a böngésző) akkor sok időt eltölt ennek a keresésével. Ha kiiktatod ezeket a fentebb leírt módszerek valamelyikével, máris nyertél magadnak egy kis gyorsaságot.
Ha kérdésed van ne habozz velem felvenni a kapcsolatot! 🙂
