Hogyan javítsunk weboldalunk betöltési sebességén?
Egy honlap betöltési sebessége nem csak a felhasználói élmény élmény szempontjából fontos, hanem a Google is figyelembe veszi a keresési megjelenések során. Ezért célszerű úgy optimalizálnunk honlapunkat, hogy a betöltési idő ne legyen több 5 másodpercnél. Ugye azt mindenki tudja, hogy a látogató számára az első néhány másodperc kritikus fontosságú a honlap megítélése szempontjából. Ha egy oldal nem jön be 5 mp-n belül, én ideges leszek, 10 mp után pedig biztos, hogy elkattintok. Ezzel szerintem a legtöbb ember így van.
Mit tehetünk weboldal gyorsítás ügyben?
Azon túl, hogy stopperrel lemérjük a betöltési sebességet, két ingyenes online alkalmazás áll a rendelkezésünkre, az egyik a Google sebesség elemző app-ja, a Google PageSpeed InSights, a másik a GTMetrix nevű alkalmazás. Mindkét app más megközelítésből vizsgálja a honlapunkat, ezért ajánlott mindkettővel tesztelni.
Hogyan működik?
Csak írjuk be honlapunk url-jét és néhány másodperc alatt a rendszer kidobja a weboldal sebesség teszt eredményét. Ha minden hibát tökéletesre szeretnénk javítani, komoly fejlesztői tapasztalattal kell rendelkeznünk. Ezért most csak egyet fogunk kivesézni.
A leggyakoribb hiba amit a weboldal tulajdonosok elkövetnek, a nem megfelelően optimalizált képek használata. Találkoztam olyan esettel, hogy az ügyfelem az átadott honlapra 2-3MB-os képeket töltögetett fel. Blog bejegyzések esetében cél az illusztráció, tehát nincs szükség nagy felbontású képekre. Törekedni kell arra, hogy a felhasznált képeink ne legyenek nagyobbak 100-150 KB-nál.
Lehet, hogy a sávszélesség miatt nekünk különösen nem okoz gondot egy nagy felbontású kép letöltése, hiszen több GB-os filmeket töltünk le néhány perc alatt. Viszont gondoljunk csak bele a Google szemszögéből, mikor több millió honlapot kell feltérképeznie nap, mint nap. Valahogy tudomásunkra akarja hozni, hogy „Hahó, miért terheled a rendszert feleslegesen? Ez a kép nem kell, hogy ekkora helyet foglaljon! Hiszen a méretét a töredékére lehet csökkenteni minőségromlás nélkül”.
Persze, ha fotónkat manipulálni szeretnénk egy grafikussal, mindig tartsuk meg az eredeti, nagy felbontású képet, mert webre optimalizált képpel már nem nagyon lehet tovább dolgozni. Sokszor kapok 200x150px felbontású 4 Kb-os képet, hogy vágjam körbe, nagyítsam fel, retusáljam, stb. Ez a másik véglet. Azzal a különbséggel, hogy itt már muszály új képet bekérnem, mert a pixelgrafikus képeket nem lehet nagyítani minőségromlás nélkül.
Képek optimalizálása sebességnövelés céljából
Térjünk vissza a képek optimalizálását segítő két alkalmazásra! Tehát a rendszer megmutatja, melyek azok a fájlok, amelyek némi javításra szorulnak. Hol vannak a tárhelyünkön, hány KB-nyi helyet takaríthatnunk meg, ha képek optimalizálása eljárás használatával.
Legprimitívebb módszer, ha egyesével végigmegyünk a listán, megkeressük a fájlokat FTP-n, letöltjük, beállítjuk a méretét, majd visszatöltjük. Ilyenkor ha a SpeedInsights-ra nyomunk egy frissítést, máris látni fogjuk, hogy az a fájl lekerült a listáról.
Tehát itt egy stock fotó, amin látható, hogy 3872 x 2592 px méretű és 300 dpi felbontású, a fájl méret 5,4 MB. Ami egy grafikus számára kiváló alap arra, hogy tovább dolgozzon, viszont teljességgel alkalmatlan arra, hogy feltegyük a weboldalunkra. Megnyitottam a képet Photoshop-ban, Image size: Ctrl+Alt+I billentyűkombinációval láthatjuk a kép méreteit.
A Resolution értéket állítsuk 72-re, láthatjuk, hogy a kép méret is csökkenni fog. Ha most elmentjük, láthatjuk, hogy az 5,4 MB máris lecsökkent 375 KB-ra, ez azonban még kevés. 100 KB alá kell menni.
Nyomjuk le az Alt+Ctrl+Shift+S kombót, ez a Save for Web funkció Photoshopban. A jobb felső sarokban kattintsunk a képen látható legördülő menüre és válasszuk ki a megfelelőt. A bal alsó sarokban látjuk a kép méretét.
Maximum: 318 KB
Very high: 204 KB
High: 141 KB
Medium: 90 KB
Low: 58 KB
Az én esetemben a Medium volt a nyerő. Mentsük el, majd töltsük vissza FTP-n ugyanazzal a fájlnévvel, tehát írjuk felül a tárhelyen található képet. Ha új képet szeretnénk optimalizálni menjünk végig ezen az eljáráson, mielőtt feltöltjük.
A képek optimalizálása szinte bármilyen komolyabb képszerkesztő programmal megoldható, vannak online lehetőségek is. Ez csak egy megoldás a sok közül.
