10 tipp weboldalad sebességének optimalizálására

//10 tipp weboldalad sebességének optimalizálására
  • 10 tipp weboldalad sebességének optimalizálására

A weboldal sebesség és teljesítmény nagyon fontos a jó felhasználói élmény eléréséhez. Ha az oldalad túl lassú, nem csak látogatókat vesztesz, hanem potenciális vevőket is. 

A keresőrobotok, mint például a Google figyelembe veszi a weboldal sebességét a rangsorolásban. Éppen ezért, amikor optimalizálod a weboldalad sebességét, minden tényezőt számításba kell venned. Minden milliszekundum számít. – Íme pár alap és általános javaslat a weboldalad teljesítményének növelésére.

1. Késleltesd a tartalom betöltését, ha lehetséges

Az Ajax technológia olyan weboldalak készítésére ad lehetőséget, amelyek bármikor aszinkron módon frissíthetőek. Ez azt jelenti, hogy az oldal újratöltődése nélkül böngészhet a felhasználó attól függetlenül, hogy milyen műveleteket végez, egyszerűen frissíthetjük az oldal bizonyos részeit.

Vegyünk például egy képgalériát. A képfájlok nagyok, lelassíthatják az weboldal betöltési sebességet. Ahelyett, hogy az összes kép egyszerre betöltődne a felhasználó oldalra való kattintásával, megjeleníthetjük csak a bélyegképeket, és amikor a felhasználó rájuk kattint, lekérethetjük a szerverről a teljes méretű képeket és frissíthetjük a weboldalt. Így tehát, ha a felhasználó csak néhány képet akar látni, nem kell várnia az összes betöltődésére. Ezt a fejlesztési mintát lusta betöltésnek (lazy loading) nevezzük.

Az olyan Ajax/web library-k, mint a jQuery, a Prototype és MooTools megkönnyítik a késleltetett oldalbetöltés alkalmazását.

2. Használj külső JS és CSS fájlokat

Amikor a felhasználó először tölti be a weboldaladat, a böngésző olyan külső forrásokat fog cache-elni, mint a CSS és a JavaScript fájlok. Így tehát belső JavaScript és CSS fájlok helyett, a legjobb őket külső fájlokba helyezni.

Az inline CSS használatával megnövekszik a weboldal renderelési ideje is. Mindent egy CSS fájlban definiálva viszont lehetővé válik, hogy a böngésző kevesebbet dolgozzon mikor rendereli az oldalt, mivel ismer minden szabályt, amit alkalmaznia kell.

Ezen felül a külső JavaScript és CSS fájlok használata megkönnyíti a weboldal karbantartását is, mivel csak a globális fájlokat kell karbantartanod a több oldalra zsúfolt ronda inline kódok helyett.

3. Használj cache rendszereket

Mikor rájössz, hogy weboldalad azért van összekötve az adatbázisoddal, hogy ugyanazt a tartalmat hozza létre, akkor ideje elkezdeni használni egy cache rendszert. Egy cache rendszer meglétével az oldaladon elég lesz egyszer létrehozni a tartalmat ahelyett, hogy mindig elkészíted a tartalmat, amikor látogatóid vannak. Ne izgulj, a cache rendszerek frissítik a cache-eiket attól függően, hogy állítottad be őket – tehát még a folyamatosan változó weboldalak (mint a blog bejegyzések komment szekcióval) is cachelhetőek.

A népszerű tartalomkezelő rendszerek, mint a WordPress és a Drupal rendelkeznek olyan cache-elési tulajdonságokkal, amelyek a dinamikusan létrehozott oldalakat konvertálják át statikus HTML oldalakká ahhoz, hogy csökkentjék a felesleges szerver leterheltséget. WordPress-nél nézd meg a WP Super Cache-t, amely egyike a legnélkülözhetetlenebb WP pluginoknak. A Drupal-nak is van beépített cache rendszere.

Vannak adatbázis catching és szerveroldali script cache rendszerek is, amelyeket a webszerveredre telepíthetsz (ha van rá lehetőséged). Például, a PHP-nak van egy bővítménye PHP accelerators néven, amelyek cachelés és más módszereken keresztül optimalizálják a teljesítményt; egy példa a PHP accelerator-ra, az APC. Az adatbázis cachelés javítja a weboldalad teljesítményét és skálázhatóságát úgy, hogy csökkenti az adatbázik olvasására/írására/hozzáférésére vonatkozó munkát. A memcached  például cache-eli a gyakran használt adatbázis lekérdezéseket.

4. Kerüld a képek HTML-ben történő átméretezését

Ha egy kép eredetileg 1680x1100px mérettel rendelkezik, de 640x421px méretben akarod felhasználni, át kellene méretezned kicsire egy olyan képszerkesztő segítségével, mint pl. a Photoshop ahelyett, hogy a HTML szélesség és magasság attribútumait használnád. Ez azért fontos, mert a nagyobb képek természetüktől fogva nagyobb fájlmérettel rendelkeznek és a HTML-ben történő méret állítás nem fogja a fájlméretet csökkenteni. A két megoldás között megjelenésbeli különbség nem nagyon van, éppen ezért a laikus szem talán csak onnan veszi észre a különbséget, hogy bár kis méretűek a képek, mégis nagyon lassan töltődnek be. Mivel a képek optimalizálása akár a weboldal indítása után is elvégezhető, ezért ez egy olyan művelet, amellyel akár később, a fejlesztés befejezése után is foglalkozhatsz.

HTML haszálatával történő átméretezés helyett tehát használj olyan képszerkesztőt, mint a  Photoshop, és mentsd el új optimalizált fájlként az állományaidat.

5. Ne használj képet szöveg megjelenítésére

Mert nem csak a szöveget teszi a képernyőolvasók számára érthetetlenné, hanem teljesen haszontalanok lesznek a SEO számára is, mivel bár folyamatosan fejlődik a Google algoritmusa, a képeken elhelyezett szövegeket még mindig nem képes felismerni. A képként tárolt szöveg ezen felül még az oldal betöltési sebességét is lassítja, mivel a kép hatalmas helyet foglal egy szöveghez képest.

Ha sok egyedi betűtípust kell használnod a weboldaladon, tanulmányozd a CSS @font-face megjelenítést egyedi betűtípusú szövegek hatásos megjelenítésére. Ezzel a módszerrel nyilvánvalóan nem kell azon törnöd a fejed, hogy vajon a betűtípus fájlok kiszolgáltatása optimálisabb-e, mint képek megjelenítése.

6.  Optimalizáld a képek fájlméretét a helyes fájlformátum kiválasztásával

A megfelelő fájlformátum kiválasztásával optimalizálhatod a fájlok méretét a képminőség romlása nélkül. Használj például JPG formátumot fényképek kisméretű megjelenítéséhez, hacsak nincs szükséged olyan átlátszóságra, amelyet a PNG formátum nyújt.

Ahhoz, hogy megtudd, hogy JPG, PNG vagy GIF formátumra van szükséged, olvasd el az alábbi útmutatókat:

Ezen kívül van még nagyon sok eszköz, amelyeket a fájl méreteinek további csökkentéséhez használhatsz. Guglizz rá, sokat fogsz találni, köztük számos ingyenest is.

7. Optimalizáld a kódodat

Nézz bele a forráskódodba. Tényleg kell az összes tag, amit használsz vagy használhatnál CSS-t is helyette? Például a <h1><em>Főcímed </em></h1> használata helyett könnyedén használhatsz CSS-t is a főcímed dőltbetűvel történő megjelenítéséhez a font-style beállításával. A hatásos kódírás nemcsak lecsökkenti a HTML és CSS dokumentumaid méretét, hanem egyszerűbben karbantarthatóvá is teszi.

8. Töltsd be a JavaScriptet a dokumentumod végén

Legjobb az, ha az oldalad végén töltődnek be a scriptjeid és nem a legelején. Ez lehetővé teszi a böngésző számára, hogy mindent még azelőtt rendereljen, hogy a JavaScriptet-tel foglalkozna. Ez a megoldás reszponzívabb érzetet kelt az oldaladon, mivel úgy működik a JavaScript, hogy blokkolja az alatta lévő dolgok renderelését addig, ameddig bejeződik a betöltés. Ha lehetséges, hivatkozz a JavaScriptre azelőtt, hogy bezárnád a HTML dokumentumaid <body> tag-ét. Hogy többet megtudj róla, olvass utána a JavaScript betöltésének késleltetéséről.

9. Használj Content Delivery Network-öt (CDN)

Az oldalad sebessége nagyban függ a felhasználó és a szerver fizikai helyzetétől. Minél távolabb vannak egymástól, annál nagyobb utat kell megtennie átvitel során az adatnak. A tartalmad több, stratégiailag elhelyezett földrajzi helyen keresztüli cachelés segít ezen a problémán. A CDN egy kicsit emelheti a működési költségeket, de lényeges sebesség növekedést nyerhetsz vele. Bővebb információkért nézd meg a MaxCDN-t vagy az Amazon Simple Storage Service (Amazon S3)-t.

10. Optimalizáld a Web Cache-t

Cache rendszerek használata mellett, olyan weboldalakat kell fejlesztened, amelyek a lehető legjobban hasznosítják a web cache-elést. A web cache-elés az, mikor a fájlokat a böngésző későbbi használatra eltárolja. A böngésző által cache-elhető állományokhoz tartoznak a CSS fájlok, a JavaScript fájlok és képek.

Az alapokon túl, mint pl. a CSS és JavaScript kódok több oldalban lévő külső fájlokba való beágyazása, sok mód van arra is, hogy megbizonyosodj, hogy a fájlok cache-elése a leghatásosabb módon történik-e.

Például, beállíthatsz olyan HTTP válasz-fejrészeket, mint az „Expires” vagy a „Last-Modified” ahhoz, hogy csökkentsd az oldalad újratöltését minden alkalommal, mikor a felhasználó újra megnyitja az oldaladat. Hogy többet megtudj, olvass a HTTP-ben való cache-elésről és a böngésző cache-elés kiaknázásáról.

Sok sikert a munkához!

By |2017-11-27T15:34:51+00:002017. november. 21.|Categories: Honlapkészítés|0 Comments

About the Author:

Tusnádi István
Mi vagyunk a Usernet, egy Budapesti webfejlesztő cég. 6 fős csapatunk 16 évnyi tapasztalatával céltudatos és hatékony webes megoldásokat készít. Ügyfeleink a kiemelkedő minőségű munka mellett a személyes kommunikáció és a szakmai támogatás miatt szeretnek minket.

Leave A Comment