A webes alkalmazások készítése – de leginkább karbantartása – során kevés figyelmet fordítunk ezek sebességének optimalizálására, vagy lehet csak egyszerűen nem kapunk rá elég prioritást a folyamatosan érkező üzleti igények árnyékában. Hosszútávon, így egy olyan mély gödröt áshatunk, amiből nagyon nehéz kimászni. Az előadásban leginkább saját tapasztalatok alapján összegyűjtött megoldásokról fogok beszélni, hogy ezeket a problémákat hatékonyan lehessen kezelni, jobb esetben megelőzni.

1. The concepts presented in this presentation are property of Survey Sampling International, LLC. Duplication or dissemination of the information without the express written consent is prohibited.
Antal `NT` Bodnár
Webes alkalmazások optimalizálása
2020. január 28.

2. 2
What.rYou(‘TalkingAbout’);
Mit jelent az 1 másodperces oldalbetöltés?
• 11% -kal csökkenti az oldalmegtekintéseket
• 16% -kal csökkenti az ügyfelek elégedettségét
• Csökkenti a konverziós arányt 7% -kal
A betöltési idő 1-3 másodperce alatt alacsony, a visszafordulás valószínűsége csak 32%.
Adjunk hozzá még csak 1 másodpercet és a felhasználók visszafordulása eléri a 90% -ot.

3. 3
What.rYou(‘TalkingAbout’);
• A Google szerint az elérhető weboldalak 95%-a ‘lassú'
• A kosár és a fizetési felület közötti mindössze 2 másodpercnyi betöltési idő után a felhasználók 87%-a
elhagyja a weboldalt és inkább máshol vásárol
• Fun fact:
Ha az Amazon csak 0.1 másodperccel lassabb lenne ez körülbelül a bevételük 1%-kát venné el,
ez 2018-ban valamivel több, mint 100.000.000 dollárba került volna a cégnek, ez akkori árfolyamon 26
Mrd forint lenne.

4. 4
HTTP.requests.reduction();
Nagyon leegyszerűsítve:
Minél több HTTP kérésre van szükség az alkalmazás elindításához, annál lassabban tölt be az adott oldal.
Lehetséges megoldások:
• Inline JavaScript és CSS (csak ha minimális mennyiségű a kód)
• Használj CSS sprite-okat
• Minimalizáld a külső kiszolgálókról behúzott függőségeket
• Csak akkor használj framework-öket, library-kat ha arra tényleg szükség van
• Konkatenáld a CSS és a JS fájlokat (HTTP/2 mellett ez nem annyira égető)
• Egész egyszerűen írj kevesebb kódot, optimalizálj ahol csak lehet

5. 5
myCode.minify();
A ”minify” beállításaitól függően:
• Eltávolítja a kommenteket, eltávolítja az extra térközöket (space, empty lines)
• Egyszerűsíti és rövidíti a változó- és függvényneveket
A legjobb ezt build-time automatikusan megoldani, a legtöbb build tool-nak ez már gyári felszereltsége.
Ajánlott eszközök: Uglify.js, CleanCSS

6. 6
img.optimize(‘967kb’, ’75kb’);
• Célszerű natív méretű képeket megjeleníteni és nem CSS-el “átméretezni”
• Optimalizálni kell az összes képet, akkor is ha azokat a felhasználók töltik fel
• 2020 van - számtalan API áll rendelkezésre, hogy ezt automatizáld (TinyPNG, Cloudinary, stb…)

7. 7
Raster.dontUse(‘useVectorGraphicsInstead’);
• A mai modern weben használt grafikai elemek jelentős része egyszerű, beszédes, piktogram, vagy
valamilyen geometriai forma. Célszerű tehát vektoros ikonokra cserélni a régi raszteres png és gif
grafikákat, ezzel egy csapásra jelentősen csökkenteni lehet a HTTP hívások számát, a forgalmazott adat
mennyiségét és mellé kapunk egy letisztultabb design-t is.
• Ajánlott library-k: FontAwesome, Material Design icons, Zurb Foundation, entypo, friconix, flaticon, stb…

8. 8
WebFont.optimize(‘performance’);
• Az egyedi betűkészlet render blocker és növeli a HTTP kérések számát
• Priorizáld a font-okat böngésző support alapján
• Csak azokat a stílusokat importáld, amire szükséged is van
• Tartsd a karakterek számát a minimumon
• Legyen opció a local font használatra, használd a font-display definíciót

9. 9
Redirect.disable().then(() => Hotlink.disable());
• Minden egyes átirányítás felesleges extra forgalmat generál, egy átirányított oldalra érkezés oldalbetöltési
sebessége akár duplája is lehet egy direkt elérésnek.
Ha csak lehet kerüld el az átirányításokat.
• Minden halott link megnyitása, hiányzó fájl betöltése 404-es hibát okoz a szerveren és ennek kiszolgálása
nincs ingyen, ez is egyfajta felesleges adatforgalom és az erre fordított erőforrás felhasználható lenne a
többi felhasználó kiszolgálására
• SOHA ne hotlink-elj külső forrásból – kivéve CDN
• Célszerű a saját szerverünk beállításaiban a hotlinking-et letiltani, de legalább limitálni

10. 10
Cache && Compression { turn(‘on’); }
• A böngésző saját cahce-ének használata létfontosságú
• Ha cache-t használsz, azzal csökkented a szervered terhelését, a forgalmazott adat mennyiségét, ezzel
pedig javítod az alkalmazásod betöltési sebességét
• A GZIP tömörítés engedélyezése akár 80%-kal csökkentheti az adatforgalmat, extrém módon növelve egy
webes alkalmazás reszponzivitását
• Ha ezeket kombinálod a sebesség növekedése egészen elképesztő lehet
• A legegyszerűbb talán valamelyik népszerű CDN-t használni, ahol ezek a szolgáltatások
alapbeállításnak számítanak

11. 11
Protocol.use(HTTPS, HTTP/2);
• Az SSL tanúsítvány mára gyakorlatilag kötelező, maga a Google is hátrébb sorolja azokat az oldalakat,
amelyek nem támogatják a HTTPS protokollt
Mi az a HTTP/2?
• A HTTP protokoll új (2015) verziója – a HTTP 1.1 (!!!) 1997-ben jelent meg
• A HTTP/2 egy aszinkron multiplex csatornát nyit a szerver és a kliens között, tömöríti a fejléceket, és
adatcsatornázza a kéréseket
• Egy HTTP/2-n kiszolgált alkalmazás betöltése méretétől függően akár 50%-kal gyorsabb lehet

12. 12
DNS.prefetch();
• Miután az alkalmazás adott oldalának betöltése befejeződött, a böngésző a háttérben letölti a DNS
prefetch-re megjelölt linkeket a háttérben és ezeket cache-ben tárolja megnyitásig
• A preconnect ezzel ellentétben csak előkészíti a kapcsolatot, előre megcsinálja a DNS feloldást, felépíti a a
TCP és TLS kapcsolódást mielőtt arra valóban szülség lenne
• Ezek együttesen, de külön-külön is hozzájárulnak az alkalmazáson belüli navigáció gyorsításához
• rel="dns-prefetch" / rel="preconnect”

13. 13
Monitoring.setLevel(‘cloud’);
• Hónapokra vagy évekre visszamenőleg elemezhető statisztikák
• Különösen érdemes real-time figyelni a metrikákat egy-egy release után
• Teljesen testreszabható riasztások
• Ajánlott eszközök: Site24x7, NewRelic, DataDog, stb…
• Ezek jellemzően fizetős szolgáltatások

14. 14
Infrastructure.improve();
• Jól megtervezett – vagy ha kell újratervezett – API-k
• Gyors, skálázható hosting és adatbázis réteg
• Szerver oldali cache, stream-ek használata
• GraphQL implementálása

15. 15
Optimization.getTools();
PageSpeed
A Google PageSpeed Insights leginkább tech szempontból, mobil és desktop szemszögből érékeli az
alkalmazást, analizálja a legfontosabb komponenseket és javaslatokat tesz a javításokra.
Ha Google-re optimalizálunk, ez egy megkerülhetetlen eszköz.
Pagelocity
Az alap tech és sebsség osztályozás mellett a Pagelocity készít SEO analízist, social metrikákat, elmagyarázza
ezek hogyan befolyásolják a social media megjelenésünket és tippeket ad arra, hogyan lehetne optimalizálni
az oldal / alkalmazás különböző részeit.
GTmetrix
Egyrészt készít PageSpeed és YSlow riprtot is, meg lehet nézni egy oldalbetöltési waterfall-t és elemezni min
lehetne javítani, ad egy relatív összehasonlítást a többi GTmetrix-en mért oldalhoz képest.
Yellow Lab
Egy nagyon egyszerű, könnyen áttekinthető táblázatban osztályozza az oldalunkat különböző szempontok
alapján, mindegyikhez magyarázattal és javítási javaslatokkal, továbbá elemzi és lépéseire bontja a JS futást,
így macro szinten segíthet az optimalizálásban.

16. 16
Köszi
Software Engineer / Team Lead
Dynata
nt@dynata.com
ANTAL ‘NT’ BODNÁR