Ide kattintva egyszerűen hívható
+36 70 200 4205

weboldal betöltési sebesség optimalizálása

A weboldal betöltési sebesség az új és modern weboldalak egyik jellemző háttér problémája, a főként az egyre fontosabb mobil telefonos nézetekben. A cikkben a honlap betöltési sebesség vizsgálatával és javításával kapcsolatban szerepelnek ötletek és javaslatok.

A weboldal gyors betöltési sebességének fontossága

Szerintem elegendő két alapvető és összefüggő okot említeni:

  • A weboldal látogató nem szívesen vár sok másodpercet – jellemzően mobilon jelentkező probléma ez – az oldal betöltésére,inkább tovább klikkelnek és mást választanak
  • A Google organikus keresési találat listájában az oldal betöltési sebességének szerepe van. Az ok egyszerű, a Google olyan oldalt ajánl szívesen, ahol a felhasználó élmény az oldal betöltési sebessége tekintetében is rendben van, gyorsan betölt az oldal.
    A lassan betöltő weboldalakat a Google algoritmusa hátrébb rangsorolja.

Hogyan ellenőrizzük, hogy a weboldalunk betöltési sebessége megfelelő-e?

Google PageSpeed Insights

Másoljuk be az oldal url-jét a megfelelő mezőbe és klikkeljünk az ellenőrzés gombra:

https://developers.google.com/speed/pagespeed/insights/

Az eredmény alapján elég jó képet kapunk arról, hogy mobilon és asztali gépen a weboldalunk hogyan viselkedik, weboldal betöltési sebesség tekintetében.

A listában a problémás pontokat és a Google javaslatait is megtaláljuk.

A színskála egyértelműen jelöli, hogy az értékek megfelelőek vagy van teendőnk. Asztali nézetben szerintem a zöld zóna elvárható, mobilon a sárga zóna közepét – felső határát még rendben lévőnek tartom.

GTmetrix

A fentinél részletesebb eredményt ad a GTmetrix, ami szintén egy díjmentes elemző eszköz a weboldal sebesség vizsgálatához:

https://gtmetrix.com/

Elképzelhető, hogy a részletes eredmények egy más hivatású, nem webfejlesztő szakember számára nem teljesen egyértelműek, de a mutatószámok itt is sokat mondóak és magyarázatot is biztosítanak hozzá.

Így arra a kérdésre, hogy a weboldal rendben van-e vagy van teendő vele betöltési sebesség tekintetében, arra itt is választ kaphatunk.

Milyen megoldásokra van szükség a gyors weboldal betöltéshez?

Konkrét teendők egy weboldalon a gyors betöltés biztosítására

A fent ismertetett mérőeszközök elég sok, konkrét támpontot adnak, ezeken mindenképpen érdemes végigmenni és ahol lehet, a javasolt módosításokat végrehajtani.

Egy WordPress weboldalt jellemzően lassító tényezők

Egy weboldalt lassító elemek nagyon sokfélék lehetnek.

Azt fontos tudni, hogy önmagában egy jól konfigurált WordPress-es weboldal vagy akár webshop képes gyorsan betölteni, ha a gyakorlatban nem ez történik, akkor ott érdemes megnézni az esetleges teendőket.

A leggyakoribb észrevételek és problémák

  • túl nagy képek használata
  • túl sok külső script (pl. Google Map, Youtube videó) betöltése a főoldalon vagy láblécben
  • nem optimalizált és/vagy elavult WordPress sablon használata
  • túl sok plugin használat (sok esetben látok olyan weboldalt, ahol feleslegesen építenek be bővítményt olyan funkcióra is, ami nem indokolt, a WordPress keretrendszeren vagy a sablonon belül is megoldható lenne)
  • lassú vagy nem megfelelően konfigurált tárhely
  • gyorsítótárazás elmaradása.

A fenti esetekre a következő pontban a WordPress-es weboldalakhoz konkrét megoldásokat is javaslok.

WordPress weboldal betöltési sebesség optimalizálása

Képek webre optimalizálása

Az optimális képméret a weboldal különböző részein, pl. slider, termékkép, cikkek kiemelt képei eltérő lehet. A sablon által meghatározott optimális képméretnél soha nem érdemes nagyobb képet feltölteni.

Fontos, hogy a képet tömörítsük is, a feltöltést megelőzően, ne csak a px-ben kifejezett képméretet mérsékeljük.

Egy mobiltelefonos kép mérete is már elérheti a 2-3 MB-ot, ezzel szemben a webre optimalizált kép mérete max. pár száz kb, ezért semmiképp ne használjuk ezeket módosítás nélkül.

A képeket, ha már foglalkozunk velük, érdemes SEO, azaz keresőoptimalizálási szempontból is kezelni:

  • megfelelően elnevezni és
  • feltöltéskor a fontosabb kép meta tag-eket (alternatív szöveg és leírás) kitölteni.

Amennyiben még nem rendelkezünk ehhez megfelelő eszközzel, úgy szívesen ajánlom a Photoshop-hoz hasonló, de díjmentes, magyarul is elérhető Gimp programot (Gimp letöltés).
Ezzel kötegelt, csoportos műveletek is elvégezhetőek, azaz több képet is átméretezhetünk, átnevezhetünk egyszerre.

Nagy segítség akkor is, ha a webáruházba egységes, négyzetes képekre van szükség, de különböző tájolásúak állnak rendelkezésre, ugyanis ezek is egy művelettel előállíthatóak a Gimp segítségével, egyenkénti szerkesztés helyett.

Utólagos képoptimalizálás

Ehhez is rendelkezésre állnak bővítmények, ha már meglévő, nem optimalizált képeink vannak, akkor érdemes őket átfuttatni rajtuk.

Smush – Lazy Load Images, Optimize & Compress Images

Smush – Lazy Load Images, Optimize & Compress Images

vagy

reSmush.it : the only free Image Optimizer & compress plugin

reSmush.it : the only free Image Optimizer & compress plugin

Cache, gyorsítótárazás bővítmény használata

Itt már meglehetősen weboldal függő, hogy melyik bővítmény lehet a leghatékonyabb, de pl. Divi sablon használata esetén legalább a WP Fastest Cache plugint érdemes kipróbálni

WP Fastest Cache

WP Fastest Cache

A konkrét megoldási lista folyamatosan bővül, érdemes szeptemberben is visszalátogatni vagy feliratkozni a hírlevélre az új javaslatok megtekintéséhez.

WordPress sablon ajánló, a Divi sablon

A Divi sablon fejlesztői csapata idén augusztus végén egy nagyon innovatív sablon verziót mutatott be.

A főbb változás ezúttal a Divi sablon gyors betöltési sebességét érinti, ami drasztikusan megnőtt ebben az utolsó verzióban. A saját példámat tudnám említeni, eddig is elégedett voltam az oldal viselkedésével, de a fejlesztés hatására sikerült a mobil betöltési sebességet 30%-al emelni, az asztali gépen a betöltési sebesség 94%.

Így aki most gondolkodik új weboldal készítésben vagy a meglévő megújításában, annak szerintem érdemes a Divi sablont is kipróbálnia, az egy hónapos próbaidőszak garancia arra, hogy megalapozottan lehessen döntést hozni a megvásárlása tekintetében.

Divi sablon kedvezményes vásárlási lehetőség, az Elegantthemes hivatalos oldalán

Az ElegentThemes.com rendszeres akciója keretében általában 10%-os, ritkábban 20%-os kedvezménnyel teszi elérhetővé csomagjait a lenti gombra klikkelve elérhető, együttműködő partnereik számára rendszeresített weboldalon.

Mind az éves előfizetés, mind az örök licence megvásárolható a kedvezménnyel.

A csomagokban nem csak a piacvezető Divi WordPress sablon, de az Eleganthemes összes sablonja és bővítménye elérhető. Bármelyik csomag lehetővé teszi a sablonok, illetve bővítmények korlátlan oldalon történő felhasználását.

Miért érdemes kizárólag az Elegentthemes.com oldalon megvásárolni a Divi theme-t?

  • Mert ez esetben saját belépési felületen teljes hozzáférésünk van az összes sablonhoz és bővítményhez.
  • Továbbá 24 órában közvetlenül is rendelkezésünkre áll az Elegentthemes.com professzionális support csapata és támogatói eszközparkja.

Ha fontolgatja ezek bármelyikének a használatát, akkor érdemes élni a kedvezménnyel és így megvásárolni a licence-ek egyikét.

Nyilatkozat: A cikk egyes linkjei "affiliate” hivatkozások. Ez azt jelenti, hogy ha rákattint a linkre és megvásárolja a terméket, affilate jutalékot fogok kapni. Fontos, hogy kizárólag olyan terméket és szolgáltatást ajánlok, melyeket a lehető legjobbnak tartok saját kategóriájukban, ezt semmi nem bizonyítja jobban, mint hogy ez a weboldal is a Divi sablonnal készült. A gombra klikkelve kedvezőbb áron vásárolhat, miközben támogatja a munkámat.  Köszönöm szépen!

Webfolio Webdesign - Hugyák Andrea