Honlap optimalizálás – 10 tipp a weboldal sebesség gyorsításra ⋆ OVGO

Honlap optimalizálás – 10 tipp a weboldal sebesség gyorsításra


Mutatok 10 tippet a weboldal sebességoptimalizálás és gyorsításra. 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

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 amikor 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ökkentsé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.

Még maradva a WordPress rendszernél, egyre jobban kezd elterjedni a Swift Performance plugin is, ami magyar fejlesztés, és csodákat képes tenni a weboldalad sebességével.

Google PageSpeed Insights sebesség teszt mobilon.

Google PageSpeed Insights: sebesség teszt mobilon.

Az OVGO weboldalán a Swift Performance plugint használjuk, és mobilon 92 pontot, asztali gépen pedig 100 pontot tud a Google sebesség teszten, az OVGO ingyenes anyagait tartalmazó aloldal.

Google PageSpeed Insights sebesség teszt asztali gépen..

Google PageSpeed Insights: sebesség teszt asztali gépen..

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ázis 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 haszná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.

Ezt a problémát elég sok WordPress theme (sablon, kinézet) készítő már felismerte és beépítette a sablon beállításaiba. A Thrive Themes is ilyen sablon. Az ára egy kicsit borsos, viszont kapunk érte cserébe egy profi marketing rendszert, és sebesség optimalizált kinézeteket.

ThriveThemes sebesség optimalizálás beállítások, képek méretre vágása automatikusan.

Thrive Themes sebesség optimalizálás beállítások, képek méretre vágása automatikusan.

A Thrive Themes beállításaiban már találsz olyan opciót, hogy feltöltés közben a sablon méretre vágja a megjelenítendő képeket.

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őlt betű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 befejező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 a weboldal sebesség optimalizálás kivitelezéshez!

>