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ő 99%-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.
-
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 az EZIT cpanelt futtató tárhelyein működnek.
-
A weboldalad alapja, a keretrendszer, amit már a honlapod készítése előtt ki kell választani.
Válassz olyan honlapkészítőt, aki megbízható, modern, gyors keretrendszert használ!
Ha a rendszer lassú, túlságosan összetett, a felépítmény optimalizálása már aligha segíthet.
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.
-
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.
-
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 20-30 kB alatti, de mindenképp 100-150 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.
Használj modern képformátumot, amilyen a .webp is. A .jpg-hez képest fele-harmada lesz az elfoglalt hely a tárhelyeden, és a betöltési idő is eszerint csökken. Ma már minden böngésző támogatja a .webp formátumot, így nyugodtan alkalmazhatod. A honlapjaimhoz használt Drupal rendszer legfrissebb változata már alapból képes konvertálni a feltöltött .jpg képeket .webp formátumba.
-
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ó).
-
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.
-
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 az EZIT tárhelyein működik. A cikk nyitóképén látható 99%-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!