Sebesség optimalizálás: CSS, JS és képek

Sebesség optimalizálás kiemelkedő fontosságú akár a céges oldalról akár privát blogról van szó. Előző cikkeinkben már tárgyaltuk a témához tartozó kérdéseket a szerver, illetve a tartalom oldaláról. A mostani, utolsó rész tippjeinek is fő célja, hogy legyél eredményesebb sebesség optimalizálás terén. Ez az általad nyújtott webes tartalom gyorsabb betöltéséhez vezet. Bármilyen keresőmotor, nagyszerű felhasználói élményt akar kínálni, és ennek nagyon fontos része hogy az oldal gyors legyen. Különösen fontos ez a Google kereső helyezések esetében.

Sebesség optimalizálás: CSS, JS és képek

1. Specifikáld a kép méretét

A böngésződ elkezd feldolgozni egy oldalt, mielőtt a képek betöltődnének. Specifikáld a kép méretét, hogy segítsd kialakítani a böngészőnek a nem-helyettesíthető elemeket. Ha semmilyen méret nincsen specifikálva, akkor a böngésződ még egyszer végigfut az oldalon, miután a képek már betöltődtek. A specifikáció érdekében az <img> kódnál használd a height és width tag-eket, hogy gyors honlap betöltést érj el.

Megjegyzés: ne használd ezt a funkciót, ha azt akarod, hogy betöltés közben módosuljon a kép mérete. Ekkor a felhasználó továbbra is az eredeti fájl méretet fogja letölteni, akkor is ha az nem igényel akkora helyet a képernyőn. Ez kifejezetten a sebesség optimalizálás ellen működne.

2. Optimalizáld a képeket

A képek tartalmazhatnak extra kommenteket és alkalmazhatnak használhatatlan színeket. Ha a képeket minimum méreten tartod, az nagy segítség a lassú hálózati kapcsolattal rendelkező felhasználóknak. Ezzel ők is a gyors honlap élményét kapják. Igyekezz JPEG formátumba menteni a képeidet. Használhatod a CTRL+SHIFT+ALT+S billentyűzet kombinációt, hogy elmentsd az optimalizált képet Adobe Photoshop-ban, illetve ott van a Yahoo! Smush.it, vagy ha WordPress-t használsz installálhatod a WP Smush.it plugin-t.

3. Tedd a CSS-t felülre és a JS-t alulra

Ha a stylesheet-eket az oldalhoz tartozó kód head-részébe teszed megakadályozod az egymás után következő rendering-eket. A böngésző le fogja állítani a rendering-et, hogy elkerülje az oldal elemeinek újrarajzolását. A legtöbb esetben, a felhasználó egy fehér oldallal fog találkozni így, amíg az oldalbetöltés teljesen be nem fejeződött. Ez abban is segít téged, hogy a W3 szabványoknak megfelelő weboldalt hozzál létre. Hasonló okokból, helyezd a javascript kódot az oldal aljára.

Számos más módszer van arra, hogy a sebesség optimalizálás kapcsán eredményesebb legyél. Igyekeztem azokról a legfontosabbakról írni, amelyek fölött a professzionális bloggerek is sokszor elsiklanak. Természetesen, az oldal sebessége nem lehet a fő cél. Ám még egy ideális honlappal is, de rossz betöltési idővel, nehéznek fogod találni, hogy sikeres legyél. A sebesség optimalizálás eszközeivel üzemeltess olyan gyors honlapot, amilyet csak tudsz, hogy gyorsabban elérd céljaid.

Engedd meg, hogy megismételjem: NE FELEJTS EL biztonsági mentést készíteni, mielőtt bármilyen változtatást végzel sebesség optimalizálás céljából, és ne felejtsd el megosztani tippjeid, vagy kommentelni.

Ha esetleg nagyon bonyolult és sok lenne amit írtunk, kérj bátran tőlünk segítséget az alábbi elérhetőségeinken. Segítünk szívesen a honlapod optimalizálásában.

A cikkünk a SeoMoz hasonló cikkének felhasználásával készült.