Egyszerű megoldások a weboldal sebesség javítására

Szerző: 2019. Júl. 8.honlapkészítés, keresőoptimalizálás

Manapság alapvető elvárás egy korszerű honlappal szemben, hogy legyen gyors. Az egyszerű felhasználó és a Google is a szélsebesen betöltődő weblapokat szereti, ezért egy üzleti célú, vállalkozói honlap esetében kulcskérdés a weboldal sebesség. Ebben a cikkben egyszerű, komolyabb háttértudás nélkül is alkalmazható, ám mégis nagyon hatásos sebesség-optimalizációs trükköket mutatok be.

Miért fontos a gyorsaság?

A weboldal sebesség először is a felhasználói élmény miatt lényeges. Senki sem szeret várni, az emberek az interneten pedig általában különösen türelmetlenek. Mindenhol csak a lényeget keresik, gyorsan szeretnének releváns információhoz jutni. Ha ebben akadályozza őket egy csigalassúsággal betöltődő honlap, nagyon gyorsan továbblépnek.

Ráadásul a felhasználói élmény fontos tényező a Google rangsorolási metódusában.

Ez azért van így, mert a Google alapvetően nagyon sok elégedett felhasználót akar, hiszen így biztosítja a piacvezető pozícióját.

Vagyis az a honlap, amelyik gyors, több eséllyel kerül jobb helyre egy-egy kulcsszóra vagy kifejezésre lefuttatott kereséskor, mint egy lassú. (A keresőoptimalizálásról bővebben itt és itt olvashatsz.)

Összefoglalva: egy minőségi weboldalnak gyorsnak kell lennie.

Szerencsére a honlapod sebessége jórészt rajtad múlik. Ha teszel érte, meglesz az eredménye.

 

Hogyan lehet mérni egy weboldal sebességét?

A honlapok betöltési sebességének méréséhez számos online eszköz áll rendelkezésre. A különböző lehetőségekről magyar nyelven a The Pitch blogján olvashatsz egy jó összefoglalót

Egy friss weboldal esetében szerintem a legjobb támpont a Google saját tesztje, a PageSpeed Insights, amely egy nullától százig terjedő skálán pontozza a weboldal sebességet, és megoldásokat is javasol a gyorsaság növelése érdekében.

Persze a Google sebesség tesztje sem tökéletes, vannak, akik nem igazán kedvelik a kissé átláthatatlan szempontjai miatt. Közismert példa, hogy legtöbbször a Google sem éri el a maximális pontszámot a saját tesztjén.

Google sebesség teszt

Nem rossz, de nem is tökéletes eredmény. Ejnye, Google!

Találkoztam már olyan véleménnyel is, amely szerint kár WordPress-en futó weboldallal használni, mert úgyis csak lepontozza a sebességet, és nem ad olyan javaslatokat, amelyek érdemben használhatóak lennének egy WordPress honlap számára.

Szerencsére ez így nem igaz. Az tény, hogy a WordPress esetében, ha a webhely tulajdonosa nem akar vagy nem tud komolyabb programozási műveletekkel bíbelődni, komolyan megköti a kezét a használt sablon. De még így is nagyon sok lehetősége marad, amivel könnyen és egyszerűen gyorsíthatja a honlapját. 

Az én tapasztalatom az, hogy némi körültekintéssel és utánajárással igenis szép eredményeket lehet elérni a Google sebesség teszt ajánlásait követve.

Természetesen nem kell mindent Szentírásnak venni, amit a teszt javasol, de azért érdemes megpróbálni javítani, ha súlyos hibákra vagy hiányosságokra figyelmeztet. 

Szép eredményeket érhetünk el, ha komolyan vesszük a Google sebesség teszt ajánlásait.

Szép eredményeket értem el, amikor elkezdtem komolyan figyelembe venni a teszt javaslatait.

Fontos az is, hogy nem kell 100 pontot elérni. Ha mind a mobilos, mind az asztali betöltési sebességünk 2-3 másodperc körüli, és tartósan 65-70 körüli vagy feletti pontot kap, akkor megnyugodhatunk, nem lesz komoly bajunk a weboldalunk sebességével.

1. Válassz gyors tárhelyet és jó sablont!

Egy gyors weboldal alapfeltétele a megfelelő tárhelyszolgáltató. Ha a szerver válaszideje túl sok, akármit csinálsz, mindig lassú lesz a honlapod. Ezért nagyon megéri körültekintőnek lenni, és nem feltétlenül a legolcsóbb opciót választani. A tárhelyválasztás szempontjairól ebben a cikkben írtam bővebben. 

Ha már van egy jó tárhelyed, és WordPress alapú weboldalt szeretnél, kell választanod egy szuper minőségű sablont. Alapvetően meghatározza a betöltési sebességet, hogy mennyire tiszta a sablonod kódja.

A legjobb sablonok készítői ezt pontosan tudják, és már eleve a gyorsasági szempontok figyelembevételével írják meg a kódot. Te ezen már csak programozói tudással fogsz tudni javítani, bár kérdés, hogy megéri-e, ha amúgy két kattintással válthatsz egyik sablonról a másikra. A sablonválasztás szempontjairól szintén a kezdőknek szóló útmutatóban írtam.

2. Tömörítsd a weboldalad és ellenőrizd a PHP verziót!

Ha gyors weblapot szeretnél, be kell állítanod, hogy a tárhelyet biztosító szerver tömörítve szolgálja ki a honlapodat. (Tudom, kicsit bonyolultnak hangzik, de nem az!) Ilyenkor a felhasználók böngészője csak egy tömörített csomagot (.gzip) tölt le a weboldalra érkezéskor. Ez azért jó, mert a kisebb adatmennyiség miatt sokkal gyorsabban töltődik be a weblap.

A gzip tömörítést a tárhelyed online kezelőfelületén tudod beállítani. Ha cPanelt használsz (ez a legelterjedtebb megoldás) a “Szoftver” menüpont alatt találod a “Webhely optimalizáció” lehetőséget. Itt válaszd az összes tartalom tömörítését, majd frissítsd a beállításokat. Ez akár 70 százalékkal csökkentheti a weboldalad méretét, és jelentősen meglódíthatja a betöltési sebességet.

Gzip tömörítés beállítása cPanelen

Ha ezzel kész vagy, ellenőrizd, hogy a PHP melyik verziója fut a webhelyeden. A PHP egy szkriptnyelv, amelyet dinamikus weblapok programozására használnak, mást most nem kell tudnod róla.

Sok tárhelyszolgáltató a ma már elavultnak számító 5-ös verziót használja alapértelmezett beállításnak, azonban az újabb, 7-es PHP verzió sokkal gyorsabb és biztonságosabb, ráadásul a WordPress is ezt támogatja.

A cPanelen a “Multi PHPManager” lehetőségre kattintva tudod ellenőrizni és átállítani a weboldaladon futó PHP verzióját. Alul ikszeld be a megfelelő tartományt, majd jobbra középen válaszd ki a legújabb elérhető PHP verziót, és nyomj az Alkalmazás gombra.

  PHP verzió beállítása cPanelen

3. Gyorsítótárazz (cache) hatékonyan! 

Már tömörítettük a weboldalunkat, hogy a látogatóknak ne kelljen túl sok adatot letöltenie. De még gyorsabb lenne a weblapunk, ha nem kellene minden egyes látogatáskor újra és újra letölteniük mindent, igaz? Ebben segít a gyorsítótárazás. A lényege, hogy megszabhatjuk, milyen hosszú ideig tárolja honlapunk statikus (nem változó) részeit a böngészők gyorsítótára. 

A WordPress esetében a gyorsítótárazás beállítását legegyszerűbben bővítményekkel végezhetjük el. A legnépszerűbb ezek közül a W3 Total Cache, de elterjedt a WP Super Cache, a WP Comet Cache, és sokan esküsznek a WP Fastest Cache nevű pluginra is. 

A W3 Total Cache legnagyobb erénye, hogy nagyon aprólékos beállítást tesz lehetővé. Viszont egyben ez a legidegesítőbb hátránya is: egyszerűen első ránézésre (sőt, sokadikra is) túl bonyolult.

Ha ezt a bővítmény szeretnéd választani, ide kattintva letöltheted tömörítve (.zip) az általam is használt alapbeállításokat. 

A beállítások használatához telepítsd a W3 Total Cache-t (új bővítmény hozzáadása menüpont), majd a bővítmény beállításainál (Settings)  görgess le az oldal aljáig. Ott láthatod az Import Configuration lehetőséget, ide töltsd fel a kicsomagolt json kiterjesztésű fájlt, és már kész is vagy.

W3 Total Cache beállítások importálása

4. Adj prioritást a “hajtás feletti” képek betöltésének!

A “hajtás feletti” (above the fold) kifejezés még a nyomtatott újságok világából származik, azt a tartalmat jelöli, amely a kettéhajtott újság címlapjának felső részét foglalta el. A weboldalakon a hajtás feletti tartalom az, amely görgetés nélkül jelenik meg a böngészőben.

Akárcsak egy nyomtatott napilap esetében, a honlapon is ez a legfontosabb terület, ezzel találkozik először a látogató, amikor a weboldalra érkezik. Ezért is nagyon fontos, hogy minél gyorsabban töltődjön be. 

Erre valók többek között az úgy nevezett “Lazy Load” bővítmények, amelyek késleltetik a weboldalon található képek betöltődését egészen addig, amíg görgetéssel oda nem ér a látogató.

Olyan oldalakon, ahol viszonylag sok és nagyméretű kép található, ez az apró trükk sokat dobhat a sebességen, mert a “hajtás alatti” képek késleltetett betöltődésével időt nyerünk.

Ilyen bővítmény például az a3 Lazy Load, vagy a Lazy Load by WP Rocket, amit én is használok. Mindkettő alkalmas a képek, beágyazott keretek (IFrame) és videók késleltetett betöltésére. A beállításuk egyszerű és jól működnek.

5. Optimalizáld a képek méretét! 

Nagyon sok weboldal a túlméretezett képek miatt vérzik el a sebesség teszteken. Nem a képek mennyiségével van a baj (bár azt is érdemes ésszerű keretek között tartani), hanem azzal, ha eredeti fájlmérettel, tömörítés nélkül töltik fel őket a weboldalra.

Általános ökölszabályként érdemes minden kép méretét 120-150 kilobyte alatt tartani.

Ez nagyon kevésnek tűnhet a 20 megás képek világában, de igazából bőven elegendő.  A képek tömörítése, optimalizálása elvégezhető felöltés előtt online programokkal vagy feltöltés után bővítményekkel is.

Az én tapasztalatom szerint az első verzió a hatásosabb. Jó választás a nagyon egyszerű JPEG Optimizer alkalmazás, amivel az eredeti kép átméretezését és tömörítését is el lehet végezni. Hasonlóan működik a Compresso.io, ennek szebb a dizájnja, de kevésbé hatékony. 

A bővítmények közül az Imagify nevű alkalmazást tudom kiemelni, amely alapból minőségvesztés nélkül tömörít, de éppen ezért nem lehet vele nagyon alacsony méretűvé alakítani a képeket. Szerencsére lehet kérni tőle az agresszívabb tömörítést is, ilyenkor a minőségen is vág, az eredmény pedig jobb lesz. Az ingyenes verziónál havi 25 MB a limit, ha többet szeretnénk tömöríteni, fizetnünk kell.

6. Tartsd tisztán az adatbázisodat!

A WordPress alapú weboldalak az összes beállítást és tartalmat (kategóriákat, linkeket, kommenteket, bejegyzéseket, stb.) úgy nevezett MySQL adatbázisban tárolják. Ide kerülnek a bejegyzések, oldalak automatikus mentései. Nyomot hagyhatnak az adatbázisban a különböző telepített, majd törölt fájlok és programok is, ezért karbantartás nélkül elég hamar tele lehet szemetelni.

Egy teleszemetelt adatbázis pedig igencsak le tudja lassítani a weboldalt.

Az adatbázis optimalizálása lehetséges a cPanel kezelőfelületén, valamint bővítményekkel is. A legnépszerűbb megoldás a WP-Optimize nevű plugin, amellyel könnyedén karban lehet tartani az adatbázistáblákat. 

Telepítés után érdemes a bővítményt az alapbeállításaival használni, ez bőségesen elegendő lesz egy átlagos honlap számára. A WP-Optimize segítségével automatizálhatjuk is a karbantartást, megjelölve milyen gyakran szeretnénk elvégeztetni, de szerintem ezzel érdemes óvatosan bánni. Akárhogy is, az adatbázis optimalizálása előtt készítsünk biztonsági mentést! (Ehhez az Updraft Plus bővítményt ajánlom)

WP Optimize használata

A karbantartás elvégzéséhez nincs más dolgunk, mint rátenyerelni a Run all selected optimizations gombra!

Weboldal sebesség: csak ennyi lenne?

Természetesen még számtalan módszer és eszköz létezik a honlap betöltési sebesség javítására, de ebben a cikkben csak a legkönnyebben elvégezhető megoldásokra koncentráltam.

Ha neked is vannak egyszerű tippjeit, megoldásaid a sebességoptimalizálásra, ne tartsd magadban, írd meg hozzászólásban!

0 hozzászólás

Egy hozzászólás elküldése

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Profi weboldalra van szükséged és szeretnél biztosra menni?

Most egy éves teljes körű garanciát vállalok az új honlapodra.

2019 © Honlapszaki.hu 

andras@honlapszaki.hu

Rólam

Ajándék emailtanfolyam

Saját weboldal vállalkozásoknak:

az ötlettől a megvalósításig

Szükséged lenne egy ügyfélcsalogató honlapra, de nem tudod, hogyan kezdj neki?

Akkor neked szól a négyrészes mini emailtanfolyam! Próbáld ki, teljesen ingyenes!

Köszönöm! Hamarosan megkapod az email tanfolyam első részét!

Pin It on Pinterest

Share This