Ebben nagyobb lélegzetvételű bejegyzésben a weboldal gyorsaságának fontosságáról, a honlap teljesítményének teszteléséről, valamint a weboldal sebességét csökkentő tényezőkről szeretném megosztani veled azokat a tudnivalókat, amelyeket a saját oldalad gyorsításához érdemes tudnod.

Miért fontos, hogy gyors legyen a weboldal?

Joggal merülhet fel benned a kérdés, miért érdemes ezzel egyáltalán foglalkozni, ha például a nagy ismert portálok sokszor olyan lassan töltődnek be, hogy kínlódás használni őket, és mégis nagy a látogatottságuk, olvassák őket.

Ha nagyon le akarom egyszerűsíteni, akkor, ami jó az olvasónak, az jó neked és jó a Google-nek is. Ha jó a weboldal tartalma és gyorsan lehet rajta böngészni, akkor a látogatók szívesen időznek rajta, alacsonyabb lesz a visszafordulási arány, jó lesz a felhasználói élmény.

Ezt pedig szereti a Google és sok egyéb tényező mellett, szerepel a rangsorolási szempontjai között, amikor a különféle algoritmusok összeállítják a találati listát, ami egy adott kifejezésre keresve megjelenik a Google-ben.

Nem túl régi hír, hogy már a Facebook algoritmusa is előtérbe helyezi, a gyorsan betöltődő weboldalakat!

Ha az emberek szívesen időznek a weboldaladon, könnyen megtalálják a szükséges információkat, és egyszerűen kapcsolatba tudnak veled lépni, akkor nagyobb eséllyel válhat belőlük vásárló vagy ügyfél, ami a vállalkozásod bevételét növeli.

Milyen tényezők lassítják a weboldal betöltődését?

Lekérések száma, lekért fájlok száma és mérete

Amikor megnyitsz a böngésződben egy weboldalt, akkor lekéréseket küldesz a szerver felé, hogy betöltődjön a weboldal. A lekérések során azokat a fájlokat kéred le, melyek a weboldalt alkotják.

Milyen fájlok lehetnek ezek:

JS fájlok

CSS fájlok

HTML fájlok

Betűtípus (font)

Képek

Ha ezekből a fájlokból túl sok van és/vagy túl nagy a méretűk, akkor nagyon sok lekérés szükséges a weboldal teljes betöltéséhez, ennek az a következménye, hogy a honlap lassú lesz, a betöltési idő pedig nagy. A cél tehát az, hogy a felsorolt fájlok számát és méretét csökkentsd, így kevesebb lekérésre lesz szükség és a weboldal is gyorsabb lesz.

Külső forrásból lekért fájlok

Itt említeném meg a külső forrásból betöltődő fájlokat, melyek számát érdemes minimálisra csökkenteni. Vannak persze esetek, amikor kikerülhetetlen (pl. Google Adsense, Facebook doboz, Facebook like gomb stb.) a használatuk, de esetenként elkerülhető.

A Google Analytics JS fájlja például egyszerűen gyorsítótárazható. Az is sokat lendít a dolgon, ha a képeket a saját tárhelyedre töltöd fel, és nem egy másik oldalról szúrod be a bejegyzésbe.

Szerver válaszidő

A honlap betöltése során, nem elhanyagolható tényező a szerver válaszideje sem, ami konyhanyelvre lefordítva annyit tesz, hogy milyen gyorsan szolgálja ki a szerver a lekéréseket. Minél gyorsabb a szerver, minél alacsonyabb a válaszideje, annál gyorsabb a weboldal betöltése.

Elavult tartalomkezelő rendszer és vagy/bővítmény, „teleszemetelt” túl nagy adatbázis

Lassíthatja az oldal betöltődését még néhány „motorháztető alatti” dolog, ilyen a túl nagy adatbázis, amely elavult és felesleges információkat tartalmaz, a nem frissített, vagy eleve rosszul megírt bővítmények, a nem frissített tartalomkezelő rendszer (Joomla, WordPress).

Hibás linkek

A weboldalon belül pl. bejegyzésekben elhelyezett linkek nagyon hasznosak. Segítik az olvasók számára a navigációt, így több időt tölthetnek a weboldalon és a belső linképítéshez is elengedhetetlenek. A hibás linkek, amelyek nem létező oldalra visznek, igaz nem lassítják le az oldalt, de a felhasználói élményt rontják. Ugye milyen bosszantó, ha rákattintasz valamire, és egy hibaoldalra visz a link? Érdemes néha lefuttatni egy belső link ellenőrző bővítményt.

A használt sablon

Előfordulnak olyan esetek is, amikor az oldal külsejét adó sablon felelős a weboldal lassúságáért, ezért sablon választáskor érdemes azok közül a sablonok közül választani, amelyek sebesség optimalizáltak.

Hogyan tesztelhető a weboldal teljesítménye?

Ha úgy döntesz, hogy belevágnál a honlapod sebességének javításába, akkor először mindenképpen teszteld le egy vagy több tesztelő eszközön, hogy tisztán lásd, melyek azok a területek, amelyek javításra szorulnak. Ezekből mutatok be néhányat, amit rendszeresen használok.

Google PageSpeed Insights

pagespeed insights

Link a teszt futtatásához: PageSpeed Insights

A Google tesztelő eszköze, mellyel a weboldal asztali és mobil nézete tesztelhető. A Google a mobilnézet ellenőrzésére, az oldal tetején piros sávban a Mobile Friendly Test-et ajánlja helyette, mellyel ellenőrizhető, hogy a weboldal mobilbarát-e.

A PageSpeed Insights, használata egyszerű, csak be kell írni a weboldal linkjét és az elemzésre kattintani. Amikor lefut a teszt, kapsz egy értéket (0-100-ig van skálázva), valamint egy listát a megoldandó problémákról.

A leggyakrabban ezekkel a problémákkal találkozhatsz:

Optimalizáld a képeket (méretezd át és tömörítsd) – a képek optimalizálását komolyan súlyozza a teszt, ha ezen a téren hiányosságok vannak, jelentősen csökkenti a pontszámot.

Használd ki a böngésző gyorsítótárazását: a gyorsítótárazással azt lehet megadni, hogy az oldal azon elemei, melyek nem változnak állandóan (statikusak), mennyi ideig tárolódjanak a böngésző gyorsítótárában. A gyorsítótárazás azért fontos, mert így a tárolt elemeket, nem kell újra és újra letölteni, amikor megnézed a weboldalt, így gyorsabb lesz a betöltődési sebesség.

Itt szerepelhetnek külső forrásból származó JS fájlok is, például a különféle Google-s termékeké (Google Analytics, Google Adsense), egyes bővítményeké, valamint a közösségi oldalaké (Facebook doboz, like gomb stb.)

Engedélyezd a tömörítést: a Gzip tömörítés segítségével egy szerveren lévő program tömöríti a weboldalt, és ezt a tömörített változatot szolgálja ki, a lekérésekre adott válaszul. A kisebb méret, gyorsabb letöltődést, gyorsabb weboldalt eredményez.

A megjelenítést gátló JavaScript és CSS kizárása a hajtás feletti tartalomban: az oldal hajtás feletti része, a weboldalnak az a része, amely görgetés nélkül is látszik. Itt szokott megjelenni pl. a Google font (betűtípus) linkje, mint betöltődést gátló forrást, valamint a weboldal sablon és a bővítmények JS és CSS fájljai is, ha nincsenek tömörítve és áthelyezve.

JavaScript csökkentése, CSS csökkentése, HTML lekicsinyítése: külön-külön szoktak megjelenni, mint javítandó probléma, de összevontam őket, mert a lényeg mindegyik esetben ugyanaz, csökkenteni kell a fájlok számát és a méretüket.

Rangsorold a látható tartalmat: az oldal hajtás feletti részének megjelenítéséhez további forrásokra van szükség. Erre a problémára többféle megoldási lehetőség van, ilyen a CSS, JS, HTML fájlok és képek méretének csökkentése, a tömörítés bekapcsolása, valamint ha az oldal hajtás feletti részének betöltése prioritást kap.

A szerver válaszidejének csökkentése: ha lassú a szerver válaszideje, akkor a PageSpeed Insights ezt is jelzi, a mért idővel együtt. A lassúság oka, a rosszul sebesség optimalizált weboldal, valamint a lassú szerver egyaránt lehet.

Webpagetest

webpagetest

Link a teszt futtatásához: Webpagetest.org

Nagyon hasznos eszköz, amely plusz információkkal is szolgál a PageSpeed Insights-hoz képest. A teszteléshez be kell másolni a weboldal linkjét, majd pedig választani egy lokációt, Magyarországhoz legközelebb Prága van a felsorolt listában, így én ezt szoktam kiválasztani. A Start Test-re kattintva lefut az elemzés, várni kell néhány másodpercet, eltart egy ideig.

Ha lefutott a teszt, akkor kapsz egy részletes értékelést az első megjelenítésre, valamint az ismétlődő megjelenítésre vonatkozóan is.

Mivel tud többet a Webpagetest, mint a PageSpeed Insights?

Mutatja a Time to First Byte (az első byte letöltéséig eltelt idő) értékét: minél kisebb, annál jobb.

Méri az oldal betöltődés idejét az első és második letöltés alkalmával is.

Jelzi a lekérések számát.

Waterfall (vízesés) nézetben mutatja, hogy milyen sorrendben és mennyi idő alatt töltődtek be az oldalt alkotó fájlok.

Kör diagrammal mutatja, hogyan oszlik meg a lekérések száma az egyes fájltípusok között, szintén ilyen nézetben látható az egyes fájltípusok mérete az oldal teljes méretéhez viszonyítva.

Az eredményt A-tól F-ig skálázva értékeli az oldal, ahol A a legjobb, F a legrosszabb érték. Információt kaphatsz a Gzip tömörítésről, a képek gyorsítótárazásáról, a statikus elemek gyorsítótárazásáról is. Ha rákattintasz a Betűre, akkor egy listát is láthatsz a problémás fájlokról.

GTmetrix

gtmetrix

Link a teszt futtatásához: GTmetrix

A Webpagetest-hez hasonló külföldi tesztelő oldal, tud mindent, amit az előbbi honlap. Az oldal külseje kicsit más, az értékelés százalékosan és betűvel egyszerre történik. A GTmetrix kétféle eredményt mutat a PageSpeed Score-t és a YSlow Score-t. Mindkét esetben minél magasabb a %, annál jobb. Az A-A, A-B, B-A, B-B, igazán jó eredmény.

Ha a PageSpeed vagy a YSlow fülekre kattintasz meg tudod nézni, milyen komponensekből tevődik össze az adott pontszám. A vizsgált komponenseknél, a kis lefele mutató nyílra klikkelve, elolvashatod melyik fájlokkal kell foglalkoznod a jobb eredményért. Ha a „What’s this mean?”-re mutatsz a felugró ablakban megjelenik egy magyarázó szöveg a Read more pedig a megoldási javaslat oldalára visz.

A Waterfall fül itt is a Webpagetesthez hasonló vízesés nézetre visz, ahol egymás alatt szerepelnek a fájlok a betöltési idővel együtt. Az oldal előnye, hogy a Compare gomb segítségével, összehasonlítható a tesztelt oldalt, más oldallal. Ez lehet a saját weboldalad egy másik oldala, vagy akár a konkurencia weboldala is.

Pingdom

pingdom

Link a teszt futtatásához: Pingdom.com

Nagyon egyszerű felépítésű tesztelő oldal, a tesztelésnél Stockholmot érdemes kiválasztani, mint egyetlen európai lehetőséget.

A teszt után kapsz egy zanzásított eredményt (Summary), mely tartalmazza, hogy milyen besorolásba esik az oldal a szerzett pontok alapján, mennyi idő alatt töltődik be a weboldal, mekkora az oldal mérete, hány lekérés szükséges a betöltéshez, és hogy az eredménye alapján gyorsabb-e vagy lassabb, mint a pingdom.com-on tesztelt weboldalak adott százaléka.

Lefelé gördítve találod a részletes eredményt mely a GTmetrix-hez hasonló külsejű. Az ez alatt lévő egyes dobozok szintén hasznos információkat tartalmaznak.

Content size by content type – Tartalom mérete típus szerint

Request by content type – Lekérések száma tartalom típus szerint

Content size by domain – Tartalom mérete domain szerint (külső forrásoknál érdekes lehet)

Request by domain – Lekérések száma domain szerint

Végül pedig az elmaradhatatlan vízesés nézet, és egy kis magyarázat a weboldal használatához.

SEOceros

seoceros

Link a teszt futtatásához: SEOceros

Magyar nyelvű oldal, amely nemcsak a sebesség optimalizáláshoz, hanem a keresőoptimalizáláshoz is segítséget nyújt.

A teszt első fele a tesztelt honlap asztali gépen, mobiltelefonon és táblagépen való megjelenését, optimalizálását vizsgálja.

Ezt követi a weboldal SEO szempontból való vizsgálata, ahol az eredmény mellett, magyarázatot, ajánlásokat is olvashatsz, miért fontos az adott tényező megoldása.

A SEOceros vizsgálja a meta adatokat, az oldal tartalmát, a fejlécek struktúráját, a képek alt címkézését, a keresőbarát linkeket, a külső és belső linkeket, az url átirányításokat és így tovább.

A teszt utolsó része a sebesség optimalizálás elemzésére terjed ki, mely vizsgálja a szervert, a megjelenítést gátló forrásokat, a JS, CSS fájlokat, a tömörítést és a gyorsítótárazást is.

A teszt az oldal tetején és végén is ír egy pontszámot, a SEOceros 0-tól 100-ig pontoz. Én a 90pont feletti értékre törekszem, ez kis odafigyeléssel teljesíthető feladat.

Hogyan javítható a WordPress-es oldal sebessége?

Néhány bővítmény telepítésével és beállításával, nagyon egyszerűen javítható a WordPress alapú weboldalak sebessége. Most nem térnék ki az egyes bővítmények beállítására, de külön bejegyzésben foglalkozom majd velük.

JS, CSS, HTML fájlok számának csökkentése, tömörítése

Ehhez a feladathoz nekem az Autoptimize nevű WordPress bővítmény vált be leginkább, a telepítés után elő kell csalogatni a haladó beállításokat, amitől nem kell megijedni, nincs ilyen sok lehetőség.

A segítségével a sok fájlból, egy-egy tömörített fájlt lehet létrehozni. Hasznos funkciója, hogy ki lehet vele kapcsolni a Google fontot, ami segít a külső forrásból betöltött fájlok csökkentésében. Ezt akkor érdemes aktiválni, ha olyan sablont használsz, ami Google betűtípus nélkül is jól néz ki. Ha szükséged van a Google font-ra, akkor sincs veszve semmi!

Google font sebesség optimalizálása

Lehetőség van a betűtípus késleltetett betöltésére, a Google Webfont Optimizer segítségével. Ez egy nagyon egyszerű bővítmény, aktiválni kell, és beállítani a Javascript Webfont Loader opciót.

A másik megoldás, ami kissé bonyolultabb, viszont hatékony, ha a saját tárhelyedre töltöd fel a sablon által használt Google fontot és a külső forrás helyett innen tölti be a sablon.

Gyorsítótárazás és Gzip tömörítés

Erre a feladatra a WP Fastest Cache nevű bővítményt használom. Tudom, hogy a W3Total Cache vagy a WP Super Cache sokkal ismertebb, és lényegesen több telepítés díszeleg a neve mellett a bővítménytárban, de nekem ezek nem váltak be. A W3 Total Cache megnövelte a Time to First Byte idejét, lassította a WordPress admin felületét, és szerintem kezdő felhasználóknak átláthatatlan is a rengeteg beállítás.

A WP Fastest Cache nem okozott ilyen problémákat, a beállítása pedig nem tart tovább egy percnél, és a Gzip tömörítést is meg tudom vele oldani. A használata során egyetlen egy negatívumot fedeztem fel, mégpedig azt, hogy Multisite-on nem használható, azonban ez nem okoz problémát, ha szóló WordPress weboldalad, vagy blogod van.

Képek optimalizálása

A képek optimalizálásánál az egyik feladat a kép méretének csökkentése, a másik pedig a weboldal betöltésekor letöltött képek számának csökkentése.

A képek méretének optimalizálásánál eleve nagy segítség, ha nem használsz, az indokolnál nagyobb képeket. Minek használnál egy 1400×900-as képet, ha a bejegyzésbe, egy 600×400-as is elég?

Ha meg van a megfelelő felbontású kép, annak mérete tovább csökkenthető a veszteségmentes tömörítés segítségével, ennek lényege, hogy a kép minősége nem romlik, a felbontása nem változik, a fájlméret viszont kisebb lesz.

Erre vannak különböző bővítmények, melyek a kép feltöltésekor végzik el a műveletet, és a már feltöltött képeket is tömöríteni lehet velük. A Smush it és Kraken.io bővítmények korlátozásokat tartalmaznak. A Smush it ráadásul lassan is dolgozik.

Az EWWW Image Optimizer jó megoldás, azonban, előfordulhat, hogy nem végzi el a tömörítést, ha a tárhely szolgáltatónál nincs aktiválva a jpegtran (Erre a tömörítés futtatásakor a jpegtran is missing felirat figyelmeztet. Ilyenkor bár dolgozik a bővítmény, mégsem történik meg a tömörítés).

A beállítások egy része korlátozva van az ingyenes verzióban, pl. jpeg esetében nem választható veszteséges tömörítés, csak veszteségmentes, de az ingyenes és valamennyire korlátozott megoldások között ezt a bővítményt tartom a legjobbnak.

A képtömörítő bővítmények közül a Shortpixelt próbáltam még, ami nagyon hatékonyan dolgozik, viszont az ingyenes verziója erősen korlátozza a tömöríthető képek számát (100 kép, de a 100 képbe beleszámítanak a különböző méretű thumbnail képek is). Ha nem jelent számodra problémát, hogy fizess azért, hogy jóval nagyobb mennyiségű képet tömöríthess, akkor a Shortpixel jó megoldás lehet.

Egy másik megoldás a Kraken.io online felülete, ahova kötegelve (nem egyesével) is feltöltheted a képeket. A képek feltöltése előtt válaszd ki a lossless (veszteségmentes) lehetőséget, ha befejeződött a tömörítés, akkor a Download all Kraked Files-ra kattintva töltheted le a képeket tartalmazó zip fájlt.

Ha csak egy képet töltöttél fel, akkor a Download File-ra, kell klikkelni, ekkor megjelenik új böngésző lapfülön a kép, amit jobb egérgomb, kép mentése másként paranccsal tudsz menteni. Ingyenes használat esetén, 1Mb-nél nagyobb fájlt nem tudsz feltölteni.

Az online megoldások közül nekem az Optimizilla vált be a legjobban. Ennél az oldalnál nincs feltöltési korlát, nagyon hatékonyan dolgozik és egy skála segítségével is szabályozható a képminőség, a képek letöltése pedig nagyon egyszerű.

Alap esetben a weboldal betöltésekor, az oldalon található összes kép letöltődik. Ez rontja a weboldal sebességét. Az A3 Lazy Load nevű WordPress bővítmény segítségével, egyszerűen be tudod állítani, hogy csak azok a képek töltődjenek le, amelyek, a hajtás felett vannak, tehát az oldal betöltésekor fogadják az olvasót. A többi kép ebben az esetben, akkor töltődik le, amikor az olvasó odaér a görgetésben.

Adatbázis karbantartása

Az adatbázis karbantartásához a WP-Optimize bővítményt tudom ajánlani (használat előtt azért biztos, ami biztos készíts egy teljes biztonsági másolatot). Ezzel optimalizálhatók az adatbázis táblák, törölhetők a bejegyzések automatikus mentései és a spamek is. Más lehetőségeket is felajánl a bővítmény pirossal szedve, ezeket nem kell kipipálni, mert bizonytalan, hogy milyen eredménye lesz, ha lefuttatod a karbantartást.

Hibás linkek

A hibás linkek ellenőrzésére és javítására nagyon jó bővítmény a Broken Link Checker, amely meghatározott időközönként végignézi az oldalon található összes linket, jelzi a hibákat és a bővítmény oldalán azonnal javítható is a hibás link. A vizsgálat eredményéről emailben is kapsz értesítést.

Elavult bővítmények és tartalomkezelő rendszer

Nemcsak a weboldal sebessége, hanem biztonsága érdekében is fontos, hogy a bővítmények és a WordPress (vagy Joomla, Drupal), rendszeresen frissítve legyenek. A frissítések során gyakran biztonsági réseket javítanak a fejlesztők, a hackerek, rengeteg esetben ezeket a biztonsági réseket kihasználva támadják és törik fel az oldalakat.

A frissítés előtt érdemes teljes biztonsági mentést készítened a weboldalról és az adatbázisról, hogyha valami balul sülne el, akkor vissza lehessen állítani a mentésből. A bővítmények közül érdemes azokat választanod, amelyeknek nagyon sok és nagyon jó az értékelése, amelyeket rendszeresen frissít a fejlesztő, amely kompatibilis a WordPress verziójával.

A bővítmény frissítése előtt érdemes beleolvasni a bővítmény fórumába (a bővítmény oldala a WordPress bővítménytárban), hogy okozott-e esetleg a bővítmény frissítése valakinél problémát. Ha tömegesen jelzik, hogy probléma van, akkor várj inkább a frissítéssel.

A bővítményekkel kapcsolatban talán annyit említenék még meg, hogy bár rengeteg klassz bővítmény van, és szinte bármit meg lehet oldani velük WordPressben, érdemes lehetőség szerint minél kevesebbet használni, mert a túl sok bővítmény is lassíthatja az oldalt.

Bízom benne, hogy hasznos volt számodra ez a bejegyzés. Ha igen, tarts velem a továbbiakban is, amikor bemutatom részletesen is az egyes bővítmények beállítását.

Felhasznált források:

Webshark

PageSpeed Insights

Seoceros