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