Webshop- és weboldaltulajdonosoknak, akiknél lassan tölt be az oldal, vagy gyenge a Google PageSpeed-eredmény. Mérésekkel megkeressük az okot, és azt javítjuk, ami tényleg lassít.
Lassú oldalnál elsőre a nagyobb szerver tűnik megoldásnak. A munkáinkban ritkán ez volt a gond. Egy burkolatanyag-webshopban a kedvencek kezelése minden látogatónál végigolvasott egy több százezer soros táblát. Egy adatbázis-indexszel a lekérdezés kb. 200 ms-ról kb. 1 ms-ra gyorsult. Ugyanott két oldalelem miatt egyetlen oldal sem került gyorsítótárba, ezért a vendégek is lassú oldalt kaptak.
Gyakori ok a folyamatosan hízó adattábla is. A sokféle szűrőkombináció vagy a keresési oldalak gyorsítótára addig nő, amíg lassulást és tárhelyhiányt okoz. Ilyenkor ütemezett takarítás segít. A lassú kategória- és keresőoldalaknál a keresőindexből olvasott listák, a Solr keresőmotor vagy a memóriaalapú gyorsítótár hozott változást.
Ha a PageSpeed-mérés gyenge, főleg mobilon, többnyire a képek, a betűtípusok és a felesleges szkriptek a gond. Ezekre WebP-képek, képernyőmérethez igazított méretek, késleltetett betöltés és oldaltípusonkénti kritikus CSS a válasz. A beágyazott YouTube-videó helyett elég egy előnézeti kép, a lejátszó kattintásra töltődik be. Ha a tárhely a szűk keresztmetszet, azt is megmondjuk.
Ár és idő
Egy célzott gyorsítás, például egy hiányzó index, egy gyorsítótár-hiba javítása vagy a képek átállítása WebP-re, jellemzően a kicsi sávba esik, sokszor annál is kevesebb idő. Ha a keresést kell más alapra tenni, vagy a teljes oldalon végig kell menni a PageSpeed-jelzéseken, az inkább közepes munka. Az ingyenes konzultáción átbeszéljük a tüneteket, és megmondjuk, mit érdemes először mérni.
Fejlesztés: 20 000 Ft + áfa / óra. Az első konzultáció ingyenes. Árak és méretsávok
Valós példák
Minden példa valós, a saját projektjeinkből, ügyfélnév nélkül.
Burkolatanyag-webshop
Helyzet: A termékkereső és a szűrők lassan reagáltak, és a találatok sem voltak mindig pontosak.
Megoldás: A keresést adatbázis helyett Apache Solr keresőmotorra állítottuk át, amely szórészletekre is talál. A sebesség érdekében az árszűrő fix ársávokkal működik.
Drupal 9Search API SolrApache Solr
Burkolatanyag-webshop
Helyzet: Az oldal lassú volt, mert a kedvencek kezelése minden látogatónál egy több százezer soros táblát olvasott végig.
Megoldás: Adatbázis-indexszel a lekérdezést kb. 200 ms-ról kb. 1 ms-ra gyorsítottuk, és rendszeresen töröljük a 30 napnál régebbi vendégjelöléseket, elsőre 754 ezer sort. A fejlécben lévő kedvencszámláló egyetlen egyszerű lekérdezéssel működik.
Drupal 11PHPMySQL
Sofőrállás-portál
Helyzet: Az oldal a sok banner és kép miatt mobilon lassan töltődött, de a képeknek élesnek kellett maradniuk.
Megoldás: A képeket WebP formátumra és eszközmérethez igazított változatokra állítottuk, késleltetett betöltéssel. Helyi betűtípust vezettünk be, és kikapcsoltuk a nem használt külső szkriptet.
Drupal 9
Szerszám-webáruház
Helyzet: A sok ezer kategóriát tartalmazó menü lassan töltött be, és hibásan jelenítette meg az üres kategóriákat.
Megoldás: Saját kategóriamenüt építettünk a keresőindexre támaszkodva, utólagos betöltéssel és gyorsítótárazással. Kategória mentésekor a menü automatikusan frissül.
Drupal 9Drupal CommerceSearch APIJavaScript
Szerszám-webáruház
Helyzet: Az oldal a sok kép miatt lassan töltött be, és a Google PageSpeed is rossz értéket adott.
Megoldás: WebP formátumot és képernyőmérethez igazított képeket vezettünk be a listákban és a termékoldalon, a képek csak görgetéskor töltődnek be. Méretet adtunk a képeknek, hogy a tartalom ne ugráljon betöltés közben.
Drupal 9Drupal Commerce
Szerszám-webáruház
Helyzet: A Core Web Vitals értékek javításához az oldalak első megjelenését gyorsítani kellett.
Megoldás: Oldaltípusonként (főoldal, termék, kategória, keresés, blog) automatikusan előállítjuk a megjelenéshez elengedhetetlen stílusokat, és ezeket közvetlenül az oldalba ágyazzuk.
Drupal 9Drupal CommerceGulp
Szerszám-webáruház
Helyzet: A kategória- és keresési oldalak lassan töltöttek be, ami a vásárlói élményt és a keresőhelyezést is rontotta.
Megoldás: Memcache-t és finomabb gyorsítótárazást vezettünk be, a szűrőket utólag töltjük be, a találatokat pedig előre elkészített formában tároljuk a keresőindexben.
Drupal 9Drupal CommerceSearch APIMemcache
Szerszám-webáruház
Helyzet: Az oldal lassan töltött be, a Google PageSpeed gyenge eredményt mutatott.
Megoldás: Eltávolítottuk a nem használt JavaScript-, stílus-, ikon- és animációs csomagokat. A képváltót csak a nyitóoldalon töltjük be, a betűtípusokat saját szerverről szolgáljuk ki, a képek pedig görgetéskor töltődnek be.
Drupal 9Drupal Commerce
Utazási webshop
Helyzet: A Google PageSpeed gyenge értéket mutatott, a főoldali diavetítés lassan töltött be és betöltés közben ugrált.
Megoldás: Képernyőmérethez igazodó képeket vezettünk be a diavetítésben, az első képet előre töltjük, a többit csak szükség esetén. Megszüntettük a betöltéskori ugrálást.
Drupal 8Twig
Utazási webshop
Helyzet: Az oldalak első megjelenése lassú volt, a PageSpeed pontszám gyenge.
Megoldás: Oldaltípusonként kritikus CSS-t generálunk, így az oldal látható része gyorsabban jelenik meg.
Drupal 9PHPCSS
Nyomtatvány-webshop
Helyzet: Az oldal lassan töltött be, és gyenge eredményt ért el a Google PageSpeed mérésén.
Megoldás: Bevezettük a kritikus CSS előtöltését és a fájlok összevonását, finomhangoltuk a gyorsítótárat, optimalizáltuk a képeket késleltetett betöltéssel, és a mérés jelzései alapján javítottuk a kontrasztot.
Drupal 9Critical CSSAdvAgg
Fogászati termékek webshopja
Helyzet: A Google PageSpeed gyenge eredményt mutatott, főleg mobilon.
Megoldás: Bevezettük a képtömörítést, a WebP formátumot és a késleltetett képbetöltést, tömörítettük és összevontuk a CSS- és JS-fájlokat. A betűtípusokat helyben szolgáljuk ki, és a kezdőlapi diavetítést mobilra optimalizáltuk.
Drupal 9Drupal Commerce
Kérdések és válaszok
Néha elég, és ha a mérés ezt mutatja, megmondjuk. A munkáinkban azonban a lassulást többnyire egy rossz lekérdezés, egy hízó tábla vagy egy rosszul működő gyorsítótár okozta. Ezeken a nagyobb szerver csak ideig-óráig segít.
Előre nem ígérünk számot, mert az a kiinduló állapottól függ. Azt viszont pontosan látod, melyik jelzésen mit javítottunk: képméret, betűtípus, kritikus CSS, felesleges szkriptek. A pontszám csak mérőszám, az számít, hogy a vásárló hamar lássa a tartalmat.
Ahol egy folyamatosan növő tábla okozta a gondot, ott ütemezett takarítást építünk, ami magától fut. Egy új modul vagy funkció viszont hozhat új lassulást. Ha mi üzemeltetjük az oldalt, ezt a frissítéseknél figyeljük.
A gyorsítási munkáink nagy része Drupal és Drupal Commerce alapú oldalakon készült, ott ismerjük a tipikus szűk pontokat. Más rendszernél a konzultáción megbeszéljük, tudunk-e érdemben segíteni.
Egy óra, telefonon, videón vagy személyesen, ingyen. A végén megmondom, mit javaslok, és körülbelül mibe kerülne, akkor is, ha az a válasz, hogy nincs szükséged ránk.