Honlap optimalizálás – 15 tipp a weboldal felgyorsítására

Minden másodperccel, amit az oldalad betöltéssel veszteget, látogatókat veszítesz – akik akár potenciális ügyfeleid is lehetnének -, épp ezért egy weboldal betöltődésének sebessége kritikus egy modern vállalkozás sikere szempontjából. Az Edubirdie kimutatása szerint a weboldal elhagyásának okaként az esetek többségében a lassú betöltődés okolható, ezért a honlap optimalizálás elsőszámú célpontja a sebesség kellene, hogy legyen.

4 másodperces betöltődési idő esetén már a látogatóid 25%-át elveszíted és ez az arány minden egyes másodperccel tovább nő. A Google szerint az optimális az lenne, ha a betöltődés idejét 3 másodperc alá tudnánk levinni. Sajnos a honlapok többsége meg sem közelíti et a küszöb-értéket, pedig a megoldáshoz nem kell Nobel-díjasnak lenni…

A kérdés üzleti oldala

Azt is érdemes végiggondolni, hogy a vállalkozások nagy része mennyi időt, energiát és legfőképpen pénzt fektet SEO-ba, tartalommarketingbe és linképítésbe, miközben olyan tetű lassú weboldala van, amely már azelőtt elveszíti a látogatók 30-40%-át, mielőtt azok akár egyetlen sor szöveget is elolvashatnának az oldalon.

Ebben a cikkben meg szeretném osztani veled a honlap optimalizálás azon technikáit, amelyekkel feljavíthatod a weboldalad sebességét. Nulladik lépésként azonban azt javaslom, hogy ellenőrizd, hogy a Google Page Insights szerint hogyan teljesít az oldalad a jelenlegi állapotában. Az eszközt végtelenül egyszerű használni, csak írd be az URL-edet, és az elemzés gombra való kattintás után egy százas skálán értékeli a weboldalad sebességét mind mobilon, mind desktop felületen.

Egy közismert példa

Íme a jelentés az index.hu-ról generálva:

Fontos kiemelni, hogy a Google javaslatait érdemes útmutatásként értelmezni, nem pedig szolgai módon végrehajtani. Ennek ékes példája, hogy ha a Page Insights-ba beírom, hogy “ https://www.google.hu”, akkor mindössze 96/100 pontot kap mobilon és előzékenyen közöl pár tippet, hogy némi honlap optimalizálás hogyan javíthatna a saját weboldaluk teljesítményén…

A lényeg, hogy nem a 100 pontra kell törekedni; 75 pont felett igen jó formában vagy, 90 fölött pedig tükörsimára simogathatod a buksidat a kivételes teljesítményért!

Ha lefuttattad a tesztet, akkor már látod, hogy mit javasol a Google a honlap optimalizálás következő lépéseire vonatkozóan.  Ideje hát belemerülni a sebesség optimalizációs eszközök és stratégiák világába, hogy javíts a kifogásolt mutatók eredményén. Ne csüggedj, ha nem tudsz mindenen javítani, a következő 15 pont betartásával ugrásszerűen javulni fog az eremény:

15 tipp a weboldal sebesség optimalizálásához

1. Válassz gyors tárhelyszolgáltatót és -csomagot

A leggeyszerűb lépés a honlap optimalizálás ösvényén a megfelelelő tárhelyszolgáltató kiválasztása. A legtöbb nagy szolgáltatónál ebből a szempontból jó helyen van az oldalad. Ha azonban egy gyors szolgáltatót választasz, de a legolcsóbb tárhely csomagra fizetsz elő, akkor jó eséllyel a weboldalad megakad a szerveren sok olyan oldallal egyetemben, amelyek a rendelkezésre álló szerver erőforrásokért és sávszélességért küzdenek. Ha komolyan gondolod egy vállalkozás megjelenítését az interneten, akkor a weboldal fejlesztés során a tárhelyen spórolni nem túl bölcs – cserébe elég rossz – ötlet.

2. Használj szöveget képek helyett

Képként megjeleníteni a szöveges tartalmat régi hibának számít, amellyel sajnos még manapság is néha szembe lehet találkozni. Mivel a Google algoritmusa még nem alkalmas a képként megjelenített szöveg értelmezésére, ezért ez a megoldás nem csak azért hátrányos, mert a kép fájlmérete miatt lassul az oldal betöltése, hanem keresőoptimalizálás oldaláról is hátrányt szenvedsz. Éppen ezért minden esetben valódi szöveget használj kép helyett.

3. Honlap optimalizálás a képek tömörítésével

Lehet ugyanakkor tiéd a világ legfullosabb  tárhelyszolgáltatása, ha a weboldalad tömörítetlen és optimalizálatlan képekkel van tele – egy csepp különbséget sem fogsz látni. Az optimalizálatlan képek a lassú oldalak elsődleges okai és ez meglehetősen furcsa, tekintve, hogy ezernyi eszköz van arra, hogy a lehető legjobb teljesítményt hozd ki a képeid optimalizálásával – nagyjából 10 perc időbefektetéssel.

Ha WordPress felhasználó vagy, akkor az egyik lehetséges alternatíva az EWWW Image Optimizer nevű plugin. Ez a hasznos kis plugin konfigurálható minden feltöltött kép automatikus optimalizálására és tömörítésére – akár egy létező képgaléria optimalizálására is. A plugin telepítésével és a képminőség beállításával nagyjából le is tudtad a honlap optimalizálás egyik legnagyobb részét.

4. Optimalizáld a „hajtás feletti” tartalmat

A „hajtás feletti tartalom” elnevezés még a hagyományos újságok korából származik, ahol reklám szempontjából értékesebb, jobban olvasott volt az a rész, amely a kettéhajtott újság hajtás feletti oldalára esett. A weboldalak estében „hajtás feletti” tartalomnak azt a részt nevezzük, amelyet még görgetés nélkül lát a látogató.

Az oldal sebességének optimalizálása során értékes időt nyerhetsz, ha arra figyelsz, hogy ez a bizonyos „hajtás feletti” rész minél gyorsabban betöltődjön. Miután a látogató már olvasható tartalomhoz jutott, ezzel nyersz még egy pici időt arra, hogy az oldalon lejjebb található tartalmat is betöltsd, hiszen fel kell fognia, amit lát, ki kell találnia, hogy hova akar kattintani.

Pro tipp: Haladók megtehetik azt is, hogy két részre bontják például a CSS állományokat. Egy kisebb részre, amely a hajtás feletti rész megjelenítéséért felelős és egy nagyobb részre, amely a fennmaradó részt formázza.

5. Minimalizáld a HTTP lekéréseket

Egy oldal minden eleme HTTP lekérést generál (képek, scriptek, stíluslapok, videók, stb.), szóval minél több dolog van az oldaladon, annál tovább tart a betöltés. A HTTP lekérések minimalizálása így egy logikus honlap optimalizálási taktika. Íme pár tipp ehhez:

• Hagyj el minden felesleges elemet az oldaladról. Ha valami tényleg haszontalan és nem jelent értéket, akkor kukába vele
• Használj CSS-t képek helyett, amikor csak lehet
• Kombináld egybe a stíluslapokat, amikor lehetséges
• Csökkentsd le a felesleges scriptek számát az oldaladon

6. Óvatosan válassz sablont

A WordPress fejlesztők egy része „mindent vivős” full extrás sablonokon dolgozik, amely alkalmas lehet arra, hogy sok iparágban sokfajta igényt kiszolgáljon. Ez a folyamat olyan túlsúlyos sablonokhoz vezetett, amelyek a demó változatban jól mutatnak, de a valóságban dagadtak és lomhák.

Nemrég költöztettünk egy hatalmas weboldalt Joomla-ról WordPress-re, és az egyik legnépszerűbb témát használtuk a ThemeForest-ból. Ez a téma nagyszerűnek tűnt papíron; olyan hasznos kiegészítőkkel, amelyekről tudtuk, hogy szükségünk van rájuk és egy csomó másikkal, amelyekre nem volt szükségünk. Miután konvertáltuk az oldalt e téma használatával, nem számít mit csináltunk, az oldal lomhának tűnt, és mikor a színfalak mögé tekintettünk és megnéztük minden egyes oldal forráskódját, akkor láttuk, hogy rengeteg felesleges kóddal és állománnyal volt teletömve.

Egy pár hét próbálkozás után le kellett nyelnünk a keserű pirulát és egy másik témával telepítettük át az oldalunkat, amellyel ugyanazt az eredményt értük el, sokkal kevesebb kóddal – pár másodpercnyi töltési időt nyerve mindezzel. Ez a pár másodperc hatalmas előrelépés nem csak a felhasználói élmény javításában, hanem hosszú távon a konverziós ráta növelésében is úgy, hogy közben nem kellett kompromisszumot kötni az oldal megjelenésében és funkcionalitásában sem. A fentiekhez hasonló döntések a honlap optimalizálás során stratégiai jelentőségűek.

7. Minimalizáld a plugin használatot

Ha nem használsz egy plugint, deaktiváld és távolítsd el. Úgy vélem, ezt nem kell ennél bővebben magyaráznom. A pluginekkel kapcsolatban létezik még egy trükk, ugyanis ha használsz is egy adott plugint az egyik URL-eden, attól még nem biztos, hogy a másik oldaladon is szükséged van rá. Ilyenkor ezzel a trükkös kis pluginnal oldalanként be tudod állítani, hogy mely kódrészletek töltődjenek be, és mely pluginokat hagyja ki a rendszer. (29 dollár, de minden centjét megszolgálja!)

8. Engedélyezd a cache-elést

Ha WordPress-t használsz, akkor a cache a honlap optimalizálás egyik kötelező eleme, amely azonnal fel fogja gyorsítani az oldalad betöltési sebességét a visszatérő látogatók számára. Próbáld ki ezt a két plugin-t:

• W3 Total Cache
• WP Super Cache

Mindkettőt sikerrel használtam és ha össze kellene foglalnom a különbséget közöttük, azt mondanám, hogy a WP Super Cache egyszerűbben használható, míg a W3 Total Cache erősebb, ugyanakkor több technikai hozzáértést igényel.

[adning id=”29652″]

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

A honlap optimalizálás technikai részleteibe történő elmerülés nélkül, ha van egy képekkel telezsúfolt weboldalad, célszerű elosztani a képeidet olyan CDN-eken, mint az Amazon Cloudfront-ja.  Ez lényegesen emelheti a weboldalad sebességét, lecsökkentheti a szervered betöltési idejét és jelentősen csökkenti a sávszélesség költségeit is.

Ha WordPress-t használsz, számos plugin van, amelyek korszerűsítik a folyamatot, mint pl. a W3 Total Cache, amely CDN támogatást nyújt más cache-elési jellemzőkkel együtt. Egy CDN használata kétség kívül emeli az üzemeltetési költségeket, mégis a honlap optimalizálás egyik első lépése, mert CDN-el biztos lehetsz benne, hogy a világ bármelyik tájáról villámgyorsan fog betöltődni az oldalad.

10. Minimalizáld a kódodat

Amennyiben WYSIWYG szerkesztőt használsz a weboldaladon, nagy valószínűséggel a kód tele lesz felesleges és optimalizálatlan kóddal. Szerencsére vannak olyan programok, mint a fent említett W3 Total Cache, amely rendelkezik egy olyan opcióval, hogy megtisztítja a kódot, kiveszi belőle a felesleges szemetet – csökkentve ezzel a töltési időt.

11. Optimalizáld vagy távolítsd el az átirányításokat

Tudom, hogy az átirányítás szükséges rossz, de kerüld el, ha tudod. Ha nem tudod elkerülni, próbáld a .htaccess fájlaid használatával beállítani, semmint oldal szintű átirányításokat alkalmazni. Az olyan programok, mint a Yoast – SEO For WordPress egyszerűsítik az oldal- és bejegyzés szintű átirányításokat, de ezek lassabbak, mint a .htaccess szintű átirányítások, így a honlap optimalizálás szempontjából nem annyira hatékonyak.

12. Kerüld a 404-es hibákat

Egy weboldal frissítése, karbantartása során természetes folyamat, hogy 404-es oldalakat hagyunk magunk után – az azonban nnem természetes, hogy úgy is hagyjuk őket. A honlap optimalizálás egyik első lépéseként érdemes a Google Search Console-ban folyamatosan ellenőrizni ezeket az oldalakat annak érdekében, hogy csökkentsd az olyan átirányítások számát, amelyek lassítják a hasznos tartalom betöltését – meg ugye a 404 nem is mutat annyira jól…

13. Helyezd a scripteket alulra

A böngészők felülről lefelé olvassák és töltik be a weboldalakat, így ha számos különböző scriptet futtatsz az oldalad felső részében (analytics, tracking, split testing, stb.), lelassítják az alattuk lévő összes tartalom betöltődését. Ez azt jelenti, hogy amíg a scriptek töltődnek a háttérben, a tartalom, amit a látogatók keresnek, nem fog megjelenni. Érdemes ezért ezeket a „láthatatlan” scripteket alulra pozícionálni.

14. Ügyelj a betűtípusok méretére

A HTTP Archive kutatása szerint a weboldalak 60%-a valamilyen egyedi betűtípust használ, amely 850%-os növekedés 2011-hez képest. A web fontok, pl. Google fontok használatának hátránya, hogy külső forrásból származó extra HTTP kérésekkel növelik az oldal betöltődésének idejét. Éppen ezért javaslom az alábbi betűtípusokkal kapcsolatos ajánlásaimat megfontolni a honlap optimalizálás során:

• Vizsgáld meg, hogy az adott betűtípust hogyan jelenítik meg a különböző böngészők
• Csak azokat a betűtípus stílusokat használd, amelyekre szükséged van
• A karakterkészletet lehetőség szerint tartsd a minimumon
• A betűtípusokat a szerveren tárold és ne külső forrásból töltsd be
• Figyelj a betűtípus fájlméretére a választás során

15. Optimalizáld az adatbázisodat

A weboldal adatbázisa nagy hatással van a betöltődés sebességére. A honlap optimalizálás egyik célpontja ezért az adatbázis, mivel ha optimalizálva van, akkor az jótékony hatással lehet a teljesítményre. Az extra mező indexelés például hatékony módja egy kis sebesség plusz elérésének, mivel segítségével lényegesen gyorsabban lehet egy adott rekordot megtalálni a több millió között.

Honlap optimalizálás WordPress oldalakra

A Google Page Insights lefuttatása után valószínűleg több ajánlást is kapsz a sebesség javításra vonatkozóan, noha a szakmai nyelvezet megnehezítheti ezek értelmezését – különösen kezdők számára.

Éppen ezért a korábbi évek tapasztalatai alapján összeállítottam egy könnyen értelmezhető honlap optimalizálás listát arról, hogy melyek azok az elemek, amelyek specifikusan egy WordPress weboldalon szokták takarékra rakni a sebességet:

1. Hoszting – olcsó, rossz minőségű, alacsony sávszélességű vagy elmaradott technikai felkészültségű tárhely környezet
2. Ha a cache-elés nincs megfelelően beállítva, akkor a WordPress túlterheli a szervert, amely sebesség lassulással, vagy akár teljes leállással járhat
3. Hatalmas fájlméretű oldalak – a nem megfelelő kép-optimalizálás miatt hatalmasra duzzadt oldalak még egy gyors szerver esetén is lassan töltődnek be különösen mobilon.
4. Gyenge, rossz minőségű, optimalizálatlan plugin-ek. Nagyon alaposan válogasd meg melyek azok a plugin-ek amelyekre feltétlenül szükséged van és azok mennyiben ronthatják weboldalad teljesítményét. Egy nem túl felkészült fejlesztő értelemszerűen nem sok energiát fektet az általa írt plugin teljesítményének optimalizálásába.
5. Számtalan külső forrás betöltése – reklámok, betűtípusok … nagy mennyiségű betöltése minden oldalon nagy mértékben ronthatja a teljes weboldal teljesítményét.

Összefoglalás

A webhely sebességére fókuszáló honlap optimalizálás az egyik legolcsóbb és legegyszerűbb módja a felhasználói élmény és a keresői rangsorolás javításának. Ha azt szeretnéd, hogy 2018-ban is a legjobbak között légy, akkor itt az ideje egy alapos site auditnak, amely fényt derít a sebességet lassító hibákra.

Ha van még valami plusz tipp a tarsolyodban, amit megosztanál velünk, akkor hajrá, használd a komment mezőt!