Weboldal betöltési sebesség teszt, optimalizálás és gyorsítás

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

vagy

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

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.