Mutatok 10 tippet honlap optimalizálás, weboldal sebességoptimalizálására é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. Fontos a SEO, Google felhasználói élmény miatt is.
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.
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..
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, így a weboldal optimalizálás külön plugin nélkül is megoldható.
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.
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
Az optimalizálás során 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!