Manapság alapvető elvárás egy korszerű honlappal szemben, hogy legyen gyors.
A hús-vér 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, mint egy lassú. (A keresőoptimalizálásról bővebben itt olvashatsz.)
Összefoglalva: egy igényes honlapnak 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.
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.
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 a weboldal készítés kezdőknek cikkemben írtam kicsit 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.
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.
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.
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.
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 180-200 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.
Az abszolút kedvencem az ingyenes letölthető Caesium alkalmazás, amivel nagyon eredményesen lehet tömöríteni JPG és PNG kiterjesztésű fájlokat.
+1. 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)
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!
Vélemény, hozzászólás?