Látványos és gyors: hogyan fér össze?

„Szép legyen, de ne legyen lassú.” Ez a két kérés szinte mindig együtt érkezik, és sokan eleve kompromisszumra készülnek: vagy látvány, vagy sebesség. A valóságban a két szempont ritkán ütközik – ha a látványt jó eszközökkel építjük.

Mi lassít valójában?

Egy oldal lassúságát ritkán a „sok design” okozza. Sokkal gyakoribb bűnösök:

• Óriási képek, amelyeket a böngésző lekicsinyítve jelenít meg, de teljes méretben tölt le.
• Nehéz videóháttér a nyitóképen, mobilon is.
• Sok külső szkript: chat, követőkódok, közösségi beágyazások, amelyek mind a saját szerverükről töltenek.
• Nagy keretrendszer egy egyszerű oldalhoz, amely a böngészőben rakja össze a tartalmat.
• Betűkészletek minden vastagságban, akkor is, ha az oldal kettőt használ.

Egyik sem a látvány szükségszerű ára. Mind elkerülhető.

Látvány könnyű eszközökkel

A legtöbb modern látványelem meglepően kevés adatból megoldható:

• CSS-animáció: a böngésző maga futtatja, simán és takarékosan. Lebegés, fény, átmenetek, beúszás – mind ide tartozik.
• SVG-grafika: vektoros rajz, amely kódként kerül az oldalba. Élesen mutat minden kijelzőn, és kilobájtokban mérhető.
• Színátmenetek és maszkok: fényfoltok, üvegszerű felületek, reflektorhatás – kép nélkül, pusztán CSS-ből.
• Modern képformátumok: a WebP vagy AVIF ugyanazt a képet jóval kisebb fájlban adja.

Az oldalunkon látható méhsejtháló, a vándorló fény és a mozgó logó is így készült: nincs mögötte videó és nincs nehéz grafikus motor.

Mit mér a Google?

A Google három mutatóval méri a felhasználói élményt (Core Web Vitals):

• LCP – mikor válik láthatóvá az első képernyő legnagyobb eleme (kép vagy szövegblokk). A jó érték 2,5 másodperc alatt van.
• CLS – mennyire ugrál az elrendezés betöltés közben. A jó érték 0,1 alatt van.
• INP – milyen gyorsan reagál az oldal egy kattintásra. A jó érték 200 ezredmásodperc alatt van.

Egy látványos oldal mindhárom mutatón lehet kiváló, ha a mozgás nem blokkolja a tartalmat, a képek mérete előre ismert, és a böngészőnek nem kell sokat számolnia.

Néhány elv, amelyet mi követünk

1. Az első képernyő ne várjon semmire. A szöveg és a fő grafika azonnal látsszon, a díszítés utána érkezhet.
2. A mozgás a böngésző dolga. Olyan tulajdonságokat animálunk, amelyeket a böngésző hatékonyan kezel (elmozdulás, átlátszóság), nem az elrendezést.
3. Ami nem látszik, nem is tölt. Az oldal alján lévő képek csak akkor töltődnek, amikor közel kerülnek.
4. Mozgáscsökkentés tisztelete. Ha a látogató kérte, az oldal megáll – és ettől gyorsabb is lesz.

Arról, mikor segít az animáció és mikor zavar, külön cikkünk szól.

Ha most lassú az oldala

Egy mérés sokat elárul: a Google ingyenes PageSpeed Insights eszköze megmutatja a fenti mutatókat és a fő okokat. Ha a látványos megújítás mellett a sebesség is fontos, az animáció és interakció oldalon bemutatjuk, hogyan dolgozunk. A meglévő weboldal megújításáról külön oldalon írunk.