Mitől lesz gyors a weboldalad?

Mitől lesz gyors a weboldalad?

Egy weboldal betöltési sebességének mértéke alapvetően csak néhány, egyszerűen felépíthető pilléren nyugszik. Ha ezeket megfelelően választjuk ki, illetve állítjuk be, akkor nem lesz gondunk a Google elvárásainak teljesítésével.

Megjegyzés: a fotón szereplő 100%-os teszt eredmény valós. Próbáld ki a Google sebességtesztjét!

Vegyük sorra, mikre kell odafigyelni, hogy a csiga lassúságú honlapod a rakéta sebességével száguldjon.

  1. Amire már a kezdetekkor célszerű odafigyelni:

    Körültekintően válassz tárhely szolgáltatót!

    Tapasztalatom szerint a honlapok gyorsaságát alapvetően a megfelelő tárhely határozza meg. Egy lassabb szerveren tárolt weboldal hiába gyors, a végeredmény siralmas lesz. A klaszterbe rendezett szerveres tárhelyek általában lassabbak a nem-klaszteres, tehát különálló szerveres társaiknál. Az általam készített honlapok nagy része a 3in1 Hosting cpanelt futtató, magyar tárhelyein működnek.

  2. A weboldalad alapja, a keretrendszer, amit már a honlapod készítése előtt ki kell választani.
    Ha a rendszer lassú, túlságosan összetett, a felépítmény optimalizálása már aligha segíthet.

    Válassz olyan honlapkészítőt, aki megbízható, modern, gyors keretrendszert használ!

    A legelterjedtebb rendszer (CMS - Tartalomkezelő rendszer) a Wordpress, de kiváló eredmények érhetők el Drupallal, vagy saját fejlesztésű, egyedi rendszerekkel is. Honlapjaim egytől-egyig Drupal alapúak, így bátran állíthatom, hogy sebesség tekintetében is remekül megállják a helyüket.

  3. Még a szerkezeti elemeknél maradva, nem mindegy, mekkora méretű, és mennyi szkriptet futtat a honlapod.

    Használj kerülő megoldásokat a videók beágyazásához!

    Sajnos a sokat használt Youtube, illetve Google recaptcha és fonts beágyazási szkriptek meglehetősen nagy méretűek, így lassítják a honlapodat. Szerencsére vannak kerülő megoldások, illetve alternatívák, amikkel elkerülhető a negatív hatás.

    A Youtube videók késleltetett megjelenítésére egy jó módszer a Light Youtube Embed.

    A Google Fontok használata nagyon egyszerű, de csak azokat a típusokat válaszd ki a Google Fonts honlapján, amiket használsz (extra light, light, regular, bold, italic). A felesleges fontok akár jelentősen, de haszontalanul megnövelhetik a szkriptek méretét.

  4. Amikor tartalommal töltöd meg a weboldaladat, a legfőbb sebesség csökkentő tényezők a képek.

    Mindig optimalizált méretű képeket tölts fel, és abból is egy oldalra max. 4-5-öt!

    Mekkora egy optimalizált méretű kép? A pixelben megadott mérete legyen kicsit nagyobb, mint a honlapodon megjelenítendő méret, de semmiképp sem sokkal nagyobb! Hogy miért jó, ha kicsit nagyobb? Mert amikor a honlap beállítja a megjelenési méretet, egyúttal élesedik is a kép (ha kicsinyítesz egy kevésbé éles képet, optikailag élesebb hatást kelt). Tehát ha a logód 150px széles helyet foglal el, akkor tölts fel egy 200px széles képet, és állítsd be a kép "width" attribútumát 150-re.

    A kB-ban megadott méretet a lehető legkisebbre kell tömöríteni, úgy, hogy a kép még ne legyen szemcsés, pixeles. Az interneten számos ingyenes kép tömörítő szoftvert találhatsz.

    A legjobb, ha egy kép 100 kB alatti, de mindenképp 200 kB-nál kisebb legyen. Ez háttérképeknél ugyan nem mindig megoldható, de ott is a lehető legkisebb méret a cél.

  5. Ha sok képet jelenítesz meg egy oldalon, pl. galéria, referenciák stb., akkor fokozatos betöltésre van szükség.

    Galériák esetében használj betöltés késleltető (lazy load) szoftvert!

    Minden tartalomkezelő rendszerhez lehet telepíteni ún. lazy load (késleltetett betöltés) modulokat, melyek csak azokat a képeket töltik be, amiket a látogatód éppen láthat a képernyőn (vagy kicsit többet, ami beállítható).

  6. A honlap működéséhez, kinézetéhez használt .css és .js kiterjesztésű fájlok mennyisége és mérete sokszor nagyon sok (függően a használt modulok/plugin-ek számától), ezzel a betöltődés jelentős lassulását okozva.

    Használd a stíluslap és szkript fájlok egyesítési lehetőségeit!

    A .css (stíluslap) és a .js (java szkript) fájlok felelősek a honlapod kinézetéért, és az egyes elemek mozgásáért, el- és feltűnéséért. A CMS (Tartalomkezelő) rendszerek minden egyes plugin-je/modulja külön fájlokat használ, így egy bonyolultabb honlap esetében rengeteg különálló fájl betöltése történik, sokszor feleslegesen.

    A fájlok számának csökkentése érdekében találták ki az egyesítési opciót (aggregation), amivel gyakorlatilag a 20-30 fájlt 2-3 összevont fájlba helyezi át a rendszer.

  7. Az egyes oldalak ismételt betöltését jelentősen gyorsíthatod a gyorstár (cache) használatával.

    Állítsd be a gyorstárazást, hogy időt nyerj az oldalak ismételt betöltésekor!

    Biztosan hallottál már a cache törlés jelentőségéről, ha egy oldalt frissíteni szeretnél. Ez a cache, magyarul gyorstár részben a tárhelyen, a honlapod adatbázisában tárolja az adatokat, részben a látogatód böngészőjében. Mindkettő szerepe a már egyszer megnyitott oldalak gyors betöltése.

    Ez a módszer a Google sebesség tesztjét nem befolyásolja, de a látogatóid honlapoddal kapcsolatos élményét bizonyosan fokozza.

A fenti listából kitűnik, hogy a legfontosabb tényező, ami egy honlap sebességét alapvetően meghatározza, az a gyors tárhely. Ha blogot szeretnél indítani, bizonyára belefutsz a Bluehost (amerikai) tárhely szolgáltatóba, melyet sok "szakértő" ajánl. Sajnos a Bluehost egy negatív példa, semmiképp sem ajánlom honlapod tárolására. Olcsó, azonban lassú, így esélyed sincs gyors honlapot üzemeltetni.

Az általam készített honlapok nagy része a 3in1 Hosting tárhelyein működik. A cikk nyitóképén látható 100%-os teszt eredmény egyértelmű bizonyíték ezen tárhelyek gyorsaságára.

Honlap referenciáimat itt találod.

Köszönöm, hogy elolvastad! Keress bátran!

Wallon-Hárs Viktor
egyéni.egyedi.wahavi.


A cikk affiliate linket tartalmaz. Ez azt jelenti, hogy ha tárhelyedet, domainedet a cikkben szereplő linken keresztül rendeled meg, én jutalékot kapok. Ez neked semmiféle plusz költséget nem jelent!

A cikk képeit a szerző, Wallon-Hárs Viktor készítette. Másolás, engedély nélküli felhasználás tilos!

Megrendelőim mondták...

Bögölyné Molnár Szilvia, fotóművész (Studio Kópháza)

Precíz, maximalista, kedves, pontos, abszolút megfizethető, minden kérést teljesít, szívből ajánlom mindenkinek!

Regös Sziránszki József, zenész (regosjoco.hu)

Én csak ajánlani tudom Wallon-Hárs Viktort, nagyon jó munkái vannak.

Tóth Károly, lelkész (Soproni Evangélikus Egyházközség)

Ajánlom mindenkinek a Wahavi Honlaptervezést. Soproni evangélikus gyülekezetünk honlapjának elkészítésekor nagyon alapos és szép munkát végzett.

Orbán Júlia, igazgató (Pedagógusok Soproni Művelődési Háza)

Motivációja, elkötelezettsége, precizitása munkája iránt példaértékű. Megbízható, kreatív tevékenysége nagy segítség számunkra.

Huszár Márta, pszichológus (huszarmarti.hu)

Viktorral honlapot csinálni elmélyült-izgalmas-vicces élmény volt! Szelíd türelemmel fogadta a változásokat és precízen dolgozott.

Kondor Szilvia, jóga oktató (Yoga & Balance, jógastúdió)

Szívből tudom ajánlani mindenkinek a Wahavi - honlap tervezés-t! Viktor nagy tapasztalattal rendelkezik, megbízható és elérhető.