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:
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.
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!
- Ajándékutalvány értékesítése webshopban - 2024. 11. 22.
- Nagykereskedelmi ár vagy Klub tagsági ár beállítás WooCommerce webáruházban - 2024. 11. 22.
- Landing oldal készítés, minta a hatékony és jól konvertáló weboldalakhoz - 2024. 06. 12.