Képoptmializálás a weboldaladon

Már többször írtam róla, hogy nagyon fontos, hogy mi történik a weboldalunkon az első pár másodpercben és ezalatt mit lát és tapasztal a felhasználó. A legfontosabb, hogy felkeltsük az érdeklődését, amihez két alapvető dolgot kell biztosítanunk:

• Megfelelően megtervezett és kivitelezett fejléc ( erről bővebben ebben a bejegyzésemben olvashatsz)
• Gyors és zökkenőmentes betöltődés.

A gyors betöltődés kulcsfontosságú és sok weboldal itt vérzik el. Egy átlag felhasználó nem igazán szeret várakozni és 10 másodpercben maximalizálták azt, amit még éppen hajlandó kivárni, de ezt sem minden esetben. Hiszen a lassú betöltődéskor feltételezi, hogy a weboldal a továbbiakban sem fogja megkönnyíteni az információ szerzését.

A lassú betöltődés gyakori okai

A lassú betöltődés hátterében több dolog is állhat. Ezek között vannak olyan dolgok, amire többségében (egyedi fejlesztésű weboldalaknál) csak a fejlesztőnek van ráhatása. Például ilyen

• a túlzott animáció használt;
• a régi elavult kód;
• a túl sok widget használata.

Azonban vannak olyan tényezők is, amire neked is van ráhatásod így nem csak javítani tudsz az oldalad betöltési sebességén, de egy új weboldal esetében például megelőzni is megtudod a bajt.

Ilyen a kép optimalizálás valamint a megfelelő tárhely választás. Ez utóbbival kapcsolatban az ebookom tud segítséget nyújtani, amit itt tölthetsz le. A képek esetében fontos, hogy ne használjunk gigantikusan nagy felbontású képeket, mert felesleges. Használjunk jó minőségű képet, amiket átméretezünk és optimalizálunk. Ezt nem csak a saját, de a letöltött képekkel is érdemes megtenni.

A kép optimalizálás folyamata a következő

• Állapítsd meg, hogy mi az a legnagyobb méret, amiben a képeid megjelennek a weboldalon
• Vágd ekkorára a képet képszerkesztővel
• Töltsd fel egy online fájl tömörítő oldalra (pl. tinypng.com)

Miután feltöltötted a képeidet, így fog örülni neked egy cuki panda. :)

Emellett láthatod, hogy mekkora lett a képeid fájl mérete, illetve, hogy összesen mennyi lett a megtakarított mennyiség. Az itt eredményül kapott képet már bátran használhatod, feltöltheted a WordPress oldalad médiatárába és beállíthatod a bejegyzéseidhez is kiemelt képnek.

Hol tudod ellenőrizni, hogy okoznak e gondot a weboldaladon szereplő képek?

Ennek ellenőrzésére a Google PageSpeed Insights nyújt megfelelő segítséget. Kattints a linkre, majd írd be a weboldalad címét. Ezt követően nyomj az elemzésre.

Miután a Google lefuttatta az elemzést a képen látható résznél ("Méretezze megfelelően a képeket") találod meg, hogy milyen méretűek a weboldalon megjelenő képeid.

NE HASZNÁLJ több megás képeket. Lehetőleg 100-200 kB legyen a maximum. Persze vannak kivételek, de törekedj rá, hogy minél kisebb legyen a fájlok mérete és ne használj háromszor akkora képeket, mint amire valójában szükséged van.