WordPress weboldal gyorsítása bővítményekkel és plugin nélkül (11 bővítmény + 17 tipp sebességoptimalizáláshoz)
Egy gyors weboldal szinte már alapvetésnek számít a mai világban, hiszen a lassú weboldalakt senki sem kedveli, a felhasználók nem várják meg míg betölt, a keresők pedig hátrasorolják a nem elég gyors weboldalakat.
Ebben a cikkben összefoglaljuk, hogy miért fontos egy gyors weboldal (fentebb már lespoilereztük), bemutatjuk, hogy milyen eszközökkel tudjátok a sebességet mérni, tisztázzuk az alapvető fogalmakat, illetve konkrétan bemutatjuk, hogy hogyan tehetitek gyorsabbá a weboldalatokat, legyen szó plugin segítségéről, vagy pedig bővítménymentes megvalósításról.
Miért fontos a gyors weboldal?
Egy weboldal betöltési sebessége két szempontból is fontos tényező. Fontos felhasználói szempontból, hiszen senki sem szeret arra várni, hogy egy weboldal hosszú másodpercek alatt töltsön be, és fontos technikai szempontból is, hiszen a gyorsabb weboldalakat jobban szeretik a keresők is.
Rengeteg tényezőtől függ, hogy egy weboldal hányadik helyen jelenik meg a keresőkben, de a weboldal betöltési sebessége mindenképp rangsorolási faktor. Illetve a felhasználók is szívesebben használnak egy gyorsabb weboldalt, ha minden egyes lapváltásra 5-10 másodpercet kell várni, akkor a felhasználók nem fognak hosszasan böngészni az oldalunkon. Így megnő a lemorzsolódás, amely minden weboldal esetében negatív, de egy webshop esetében hatványozottan.
Sebességmérő eszközök
Először is le kell mérnünk a weboldalunk sebességét, hogy láthassuk hányadán állunk. Ennek a legegyszerűbb módja, hogy megnyitjuk az oldalunkat és stopperrel lemérjük, hogy hány másodperc alatt tölt be. Ha a weboldal 3-5 másodpercnél több idő alatt tölt be, akkor mindenképp intézkedés szükséges.
Azonban a fent említett módszer eléggé fapados, vannak már sokkal kifinomultabb eszközök, amelyek nem csak a betöltési időt elemzik, hanem még tippeket is adnak, hogy milyen területen érdemes javítani.
PageSpeed Insights
Talán a legegyszerűbb eszköz, amelyhez csak annyira van szükségünk, hogy beírjuk az URL-t a weboldalon, és az elemzés pár másodperc alatt el is készül.
Az oldalon két nézetet láthatunk: láthatjuk az eredményeinket asztali gépeken és mobileszközökön. Ezentúl láthatunk még több mérőszámot, amelyek közül számunkra a Teljesítmény a legfontosabb, ennél célszerű, hogy minél magasabb legyen. Azonban érdemes helyén kezelni a dolgokat, szép eredmény a 90 fölötti érték, de ha a weboldalunk tartalmaz Google Analytics, Facebook Pixel, Google AdSense kódokat, vagy bármi más külső szkriptet, akkor azok rendesen lehúzzák az eredményeket.
Az oldal alján tippeket láthatunk arra vonatkozólag, hogy az oldal hibáit, hogyan lenne érdemes orvosolni.
GTmetrix
A GTmetrix talán az egyik legkomplexebb weboldalsebesség-elemző oldal, itt már nem csak egy URL-t adhatunk meg, hanem azt is, hogy melyik országból indítsák a mérést. Itt érdemes a szerverünkhöz legközelebb lévő lokációt választani.
Ez az oldal is nyújt tippeket arra vonatkozólag, hogy mit kell javítani az oldalunkon, illetve érdemes szemügyre vennünk az oldal betöltésének vízesés-diagramját, hiszen itt pontosan látszik, hogy mi vesz el jelentős időt a betöltés során.
Pingdom Website Speed Test
Ez szintén egy olyan elemző oldal, ahol megadhatjuk azt, hogy melyik városból induljon a weboldalunk elemzése.
Ezen az oldalon láthatjuk az oldal méretét, betöltési idejét, a kérések számát, illetve az egyes tartalmak (szöveg, kép, szkript) méretét. Ezentúl természetesen ők is tesznek ajánlásokat a weboldal gyorsítására vonatkozólag.
DevTools
A DevTools egy beépített eszköz a Chromium alapú böngészőkben, például Chrome, Edge. Csak jobb klikkelnünk kell a vizsgálni kívánt oldalon, majd meg kell nyomnunk a Vizsgálat gombot, itt két lehetőségünk van, az egyik a Lighthouse, amely nagymértékben megegyezik a PageSpeed Insights eszközzel, illetve a Network fül, amely eléggé komplexen elemzi a weboldal összes kérését.
Természetesen itt is láthatunk betöltési időt, kérésszámot, vízesés-diagrammot.
Fontos mérőszámok
Utolsó olyan kitérő, amely még nem a konkrét megoldásokat tartalmazza, de nagyon röviden mindenképp érdemes kitérnünk ezekre is.
Betöltési idő
Ennyi idő alatt tölt be az adott oldal, a folyamat az oldal megnyitásától indul és a teljes betöltésig tart. A felhasználó szempontjából ez a legfontosabb mérőszám.
Oldalméret
Ekkora az adott oldal mérete, amelyet a megnyitáskor be kell tölteni. Ha kevesebb, kisebb méretű szkripteket, képeket használunk, akkor drasztikusan csökkenthető ez a szám.
Time to First Byte (TTFB)
Leegyszerűsítve azt mondhatjuk, hogy ez az érték fejezi ki a szerver reakcióidejét. Így bérelt szerver esetén, ezt nagyobb tárhelyre váltással, vagy tárhelyszolgáltató váltással tudjuk javítani.
Weboldalgyorsítás bővítményekkel
Na végre már (mondhatod magadban), elérkeztünk azokhoz az eszközökhöz, amelyek érdemben javítani fognak a weboldalad sebességén.
A WordPress bővítménytár tele van sebességoptimalizáló bővítményekkel, érdemes többet is kipróbálni, hogy melyik válik be jobban, azonban nem érdemes több weboldalgyorsító bővítményt használni egyidejűleg. Legalábbis azonos funkciókkal rendelkezőt, azaz egy gyorsítótár bővítmény, plusz egy képoptimalizáló simán megfér egymás mellett. De ne használjunk kettő ugyanolyan funkcionalitású bővítményt.
Na nézzük a mi személyes kedvenceinket, amelyek közül bármelyiket ajánljuk kipróbálásra. A legtöbb tartalmaz automatikus telepítőt, így kezdők számára sem lehet problémás a használata. Azonban érdemes játszadozni a beállításokkal, bekapcsolni egy funkciót, megnézni az eredményeket, majd ha javulást látunk, akkor megtartani. Ha esetleg az oldal szétesne, akkor sem kell megijedni, csak kapcsoljuk ki azt a funkciót, amelyet legutóbb bekapcsoltunk. A biztonság kedvéért azért legyen biztonsági mentés az oldaunkról.
Hummingbird
A Hummingbird egy olyan ingyenes bővítmény, amelynek van prémium verziója is, ám már az ingyenes is jelentős mértékben tudja javítani a weboldal betöltési idejét.
Segítségével szkennelhetjük és egy kattintással aktiválhatjuk a javításokat. Tartalmaz gyorsítótár (cache) funkciókat, fájloptimalizálót, Gzip tömörítést és még sok minden mást.
Swift Performance
A Swift Performance bővítménynek magyar vonatkoztatása is van, hiszen magyar fiatalok kezdték el fejleszteni. Ennek a bővítménynek is van ingyenes és fizetős változata (mint a legtöbbnek), de az ingyenes verzióval is jelentős eredményeket lehet elérni.
Ingyenes verzió funkciói:
- cache (gyorsítótár)
- CSS és JavaScript optimalizáció
- adatbázis optimalizáció
- bővítményrendszerező
- pár kattintásos telepítő, illetve maximális mértékig személyreszabhatóság
Smush
A Smush bővítményt ugyanaz a csapat fejleszti, mint a Hummingbird-öt, azonban ez a képek optimalizálásában segít. Csökkenti a képek méretét tömörítés révén, lusta betöltést (lazy load), átméretezést tesz lehetővé.
WP-Optimize
A WP-Optimize egy kiváló bővítmény az adatbázis tisztításra, képoptimalizálásra, gyorsítótárazásra, illetve CSS és JavaScript fájlok méretének csökkentésére.
Autoptimize
Ez a bővítmény szintén csökkenti a fájlok méretét, illetve gyorsítótárazza a szkripteket (JS) és stílusokat (CSS), továbbá optimalizálja és késlelteti a képek betöltését (lazy loading), optimalizálja a Google Fonts betűtípusokat.
WP Fastest Cache
Elsősorban cache (gyorsítótár) bővítmény, pont ezért rengeteg funkciója van ezen téren: mod_rewrite, cache törlése bejegyzések frissítésekor, törlésekor, SSL, CDN, CloudFlare támogatás, preload cache, WP-CLI cache ürítés.
Azonban a gyorsítótárazáson túl is vannak hasznos funkciói: képes statikus HTML fájlokat generálni egy dinamikus WordPress oldalból, kicsinyíti (minify) a HTML és CSS fájlokat, Gzip tömörítés, böngésző gyorsítótárazás, CSS és JS kombinálása, emojik kikapcsolása.
LiteSpeed Cache
Ez a bővítmény kompatibilis az összes nagyobb szervertípussal: LiteSpeed, Apache, Nginx, stb.
Funciói:
- objektum gyorsítótár (Object Cache)
- képoptimalizálás
- CSS, JavaScript és HTML minimalizálás
- CSS, JavaScript kombináció
- Critical CSS
- lazy-load (lusta betöltés) nem csak képekre, hanem iframe-kre is
- reszponzív képhelykitöltő
- CDN támogatás
- böngésző gyorsítótár
- adatbázis tisztító
- DNS Prefetch (előzetes letöltés)
- WebP támogatás
Asset CleanUp
Az Asset CleanUp neve is utal rá, hogy a bővítmény főterülete a tisztítás. Segítségével beállíthatjuk tűpontosan, hogy az egyes oldalak, bejegyzések megnyitásakor mely eszközök, fájlok töltődjenek be, és melyek nem.
A készítők véleménye szerint a bővítményük egy másik cache pluginnal működik a legjobban, például WP Rocket, WP Fastest Cache.
Funkciók:
- csökkenti a kérések számát
- preload CSS/JS
- minify CSS/JS
- CSS/JS kombinálása
- RSS feedek kikapcsolása
- Gzip tömörítésnél jobb fájltömörítés
- Google Fonts/lokális betűtípusok optimalizációja
- haszontalan linkek, meta tag-ek, HTML kommentek eltávolítása
EWWW Image Optimizer
A következő bővítmény szintén képoptimalizálás terén jeleskedik.
Funkciók:
- JPG, PNG, GIF, PDF tömörítés, méretcsökkentés
- tömeges optimalizáció
- WebP képek
- WP-CLI
- CDN támogatás
WP Rocket
Az első olyan bővítmény, amelynek csak fizetős változata van, ám ennek ellenére is óriási népszerűségnek örvend.
Funciói:
- oldal gyorsítótárazás
- Gzip tömörítés
- gyorsítótár előtöltés
- e-kereskedelm optimalizáció
- böngésző gyorsítótárazása
- fájlok méretének csökentése
- médiafájlok lusta betöltése
- adatbázistisztítás
- CDN támogatás
Perfmatters
Az utolsó bővítményünk is fizetős, melynek alább olvashatjátok funckiós listáját:
- emojik beágyazások, dashiconok eltávolítása
- revíziók korlátozása, törlése
- Heartbeat funkció kikapcsolása
- XML-RPC kikapcsolása
- szkriptmenedzser
- adatbázisoptimalizáció
- lusta betöltés
- CDN rewrite
- Google Analytics, Google Fonts lokális hosztolása, kiszolgálása
- előtöltés
- JavaScript kódok betöltésének késleltetése
- nem használt CSS kódok eltávolítása
Weboldalgyorsítás bővítmények nélkül
Az előző bővítményeket azoknak ajánlottuk, akik gyors és egyszerű megoldást szeretnének. Azok, akik már jártasabbak a weboldalak, szerverek világában, azok elkerülhetik a bővítményeket, vagy helyezhetnek egy biztos alapot a bővítmények mellé.
Alább összeszedjük azokat a fontos információkat, amelyekre szükségünk van egy gyors weboldalhoz. Bár ezek megvalósíthatóak bővítmények nélkül is, azonban több esetben is inkább a bővítményes végrehajtást fogjuk javasolni, hiszen embertelen mennyiségű kódolásra van szükség némelyik funkció kiváltásához.
Szerver
A legfontosabb a biztos alap, amely jelen esetben a szerver, amelyen fut a weboldal. Ezt általában vagy bérelni szoktuk, vagy sajátot üzemeltetünk. Bérelt esetén két opcióból választhatunk, ha nem jó a szerverünk sebessége (ezt az TTFB-ben érdemes mérni): váltunk egy nagyobb csomagra, vagy szolgáltatót váltunk. Saját szerver esetében számos opciónk van, a körülmények javításától (például gyorsabb internet) a szerver kalibrálásáig, leváltásáig, azonban ha valaki saját szervert üzemeltet, akkor valószínűleg ez neki nem újdonság.
A szerver azért is fontos, mert hiába optimalizáljuk a weboldal minden egyes aspektusát, ha az alapok gyengék, akkor úgysem leszünk képesek egy bizonyos érték alá menni.
PHP verzió
A PHP egy olyan szerveroldali szkriptnyelv, melyet használva dinamikus, interaktív weboldalakat készíthetünk. A PHP fejlesztése folyamatos, így érdemes minél újabb verziót használnunk.
Az ábrán azt láthatjuk, hogy az egyes PHP verzióknak mekkora a válaszidejük. Természetesen a minél kisebb értékre kell törekedni, az ábra nagyon jól mutatja, hogy a PHP 8.0, majdnem háromszor gyorsabb, mint az 5.6-os verzió.
Ebből kiindulva próbáljuk mindig a lehető legfrissebb verzión tartani a szerverünket. Azonban azt mindenképp érdemes elmondani, hogy mind a WordPress rendszerének, mind a sablonoknak, bővítményeknek van egy PHP-kompatibilitási verziójuk, azaz, ha a bővítmények csak 7.4-es verzióval futnak, akkor nem frissíthetünk 8.0-ásra, mert akkor az oldal nem fog működni.
Ezért minden PHP verzió frissítés előtt le kell ellenőriznünk a weboldal minden alkotóelemét, hogy kompatibilis-e.
Adatbázisoptimalizáció
Ha bővítményeket, sablonokat telepítünk azok pakolgatnak adatokat az adatbázisba, ám törléskor az esetek nagy többségében ott hagynak maguk után mindent, így az adatbázis tele lesz olyan szeméttel, amelyre már semmi szükség nincs.
Az adatbázis tisztítását végezhetjük manuálisan, azaz megnézhetjük, hogy mely táblákra, rekordokra nincs már szükség és törölhetjük azokat, ám ez igen veszélyes játék, mert törölhetünk olyanokat is, amelyekre igazából szüksége van a weboldalunknak, csak mi nem tudtunk róla.
Ezért érdemes inkább bővítményt használni erre, ezeket letölthetjük, futtathatjuk az adatbázistisztítást, majd törölhetjük a bővítményt. Természetesen ez egy olyan lépés, amely előtt érdemes biztonsági mentéseket készítenünk. (Erre ajánljuk az UpdraftPlus-t.)
Képek optimalizálása
Erről már beszéltünk egy korábbi cikkben, illetve ebben a cikkben is mutattunk olyan bővítményeket, amelyek optimalizálják a képeinket.
Azonban ez egy olyan feladat, amelyet elvégezhetünk bővítmények nélkül is, csak figyeljünk oda a megfelelő képarányra és képméretre, ez általában 1920×1080. Illetve törekedjünk arra, hogy a képünk mérete megfelelően kicsi legyen, jellemzően 100 és 200 kB közötti. Ezentúl még érdemes olyan fájlformátumokat használnunk, amelyek megfelelő tömörítést alkalmaznak, például JPG, vagy WebP.
Lazy loading (lusta betöltés)
Ez az előző lépés továbbgondolása, hiszen nem elég, ha a képeink mérete kicsi. Ha van egy rendkívül hosszú cikkünk tele képekkel, akkor az alsó képek már akkor betöltésre kerülnek, amikor még nincsenek is képernyőn. Ez abból a szempontból rossz, hogy olyan dolgok betöltése viszik el az időt, amelyekig lehet a felhasználó el sem fog jutni.
Nem lenne jobb megoldás, ha minden csak akkor töltene be, ha már a felhasználó elérte azt? De, betöltési idő szempontjából mindenképp. Ezt a funkciót egyszerűbb bővítmény segítségével implementálni.
Kérések számának csökkentése
Ha nyomtok egy jobb klikket a vizsgált oldalon, majd rákattintottok a Vizsgálat gombra, majd felül a Network fülre, és frissítitek az oldalt, akkor kilistázásra kerül az összes kérés, alul látszik, hogy a vizsgált oldal betöltéséhez 33 kérésre (request) volt szükség.
Pontosan látjuk kilistázva, hogy mik kerültek meghívásra, így tudjuk, hogy mi micsoda és honnan ered. Ha látunk olyat, amelyre nincs szükség, akkor érdemes kiiktatni, például úgy, hogy kiszedjük az ezért felelős kódrészletet a megfelelő fájlból, vagy úgy, hogy használunk egy bővítményt, amelyben van lehetőségünk az egyes funkciók kikapcsolására.
Tömörítés (Gzip, Brotli)
A weboldal tartalmát általában tömöríteni szokták valamilyen eljárás mentén, jelenleg ezek közül igen népszerű a Gzip és a Brotli. Az utóbbit a CloudFlare segítségével aktiválhatjuk, amelynek emellett még rengeteg előnye van. A Speed fülön engedélyezzük a Brotli funkciót.
Mielőtt aktiválnánk bármelyiket is győződjünk meg róla, hogy ezek közül még egyik sem aktív a weboldalunkon. Kiváló megoldás egy PHP fájlba behelyezni az alábbi kódot:
<?php phpinfo(); ?>
Code language: HTML, XML (xml)A listában pedig megtekinteni, hogy aktív-e valamilyen tömörítő eljárás.
A Gzip aktiválását megtehetjük cPanelen keresztül is az Optimize Website segítségével, ahol a Compress all content-et kell választanunk, vagy a Compress the specified MIME types-t, ha kicsit jobban személyre szeretnénk szabni.
Ha nincs cPanel, akkor sem kell megijedni, csak nyissuk meg a weboldalunk tárhelyét egy FTP-kapcsolatot támogató program (például Total Commander) segítségével, majd a gyökérkönyvtárban a .htaccess fájlba másoljuk be az alábbiakat:
# BEGIN GZIP Compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
# END GZIP Compression
Code language: HTML, XML (xml)CloudFlare
Ha már az előző pontban említésre került a CloudFlare, akkor érdemes egy kis említést tenni még róla. A CF az egyik legnépszerűbb CDN, ami azt jelenti, hogy a statikus tartalmak a világ több pontján elhelyezett szervereken is jelen vannak, így ha a felhasználó felkeresi az oldalt, akkor a hozzá legközelebb lévő szerver fogja kiszolgálni a statikus tartalmakat.
A CloudFlare-nek van ingyenes változata is, amely rengeteg dolgot kínál a fent említett Brotlin túl, például automatikus HTML, CSS, JS tömörítést vagy tűzfal szabályokat. A fizetős változata még több segítséget nyújt a webfejlesztők, üzemeltetők számára.
Gyorsítótár (Cache)
Ez egy olyan dolog, amelyet körülbelül az összes weboldalgyorsító bővítmény magába foglalja. Segítségével amikor a felhasználó először keresi fel a weboldalunkat, akkor számára eltárolhatjuk az oldalunk információit a saját gépén, így amikor másodjára keresi fel az oldalunkat, akkor már nem kell mindent a szerverről beszereznie, hanem a felhasználó eszközéről szedi őket elő, így a második betöltés már jelentősen gyorsul.
Ezt megoldhatjuk a szerveren történő konfigurációval, illetve választhatunk bővítményt is a feladat ellátására.
Fájlok minimalizálása
A fájlok minimalizálás azt jelenti, hogy azokat a fájlokat, amelyeket a szerveren tárolunk, vagy a weboldalunk felhasznál, azoknak a méretét csökkentjük. Ezt legegyszerűbben azzal érhetjük el, ha töröljük a kommenteket és a szöveg tagoltságát.
Nézzünk erre egy példát:
Előtte
<!DOCTYPE html>
<html>
<body>
Elemek: <p id="szoveg"> </p>
Tömb hossza: <p id="szoveg2"> </p>
<button onclick="hossz()">Tömb hossza</button>
<script>
var nyelvek = ["HTML", "CSS", "JS"];
document.getElementById("szoveg").innerHTML = nyelvek;
function hossz() {
document.getElementById("szoveg2").innerHTML = nyelvek.length;
}
</script>
</body>
</html>
Code language: HTML, XML (xml)Utána
<!DOCTYPE html> <html> <body> Elemek: <p id="szoveg"> </p>Tömb hossza: <p id="szoveg2"> </p><button onclick="hossz()">Tömb hossza</button> <script>var nyelvek=["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML=nyelvek; function hossz(){document.getElementById("szoveg2").innerHTML=nyelvek.length;}</script> </body></html>
Code language: HTML, XML (xml)Az első program 435 byte, míg az utóbbi csak 337, még ilyen kisméretű fájl esetén is szembeötlő a különbség, képzeljük el, hogy mi van, ha az egész weboldalra alkalmazzuk ezt a technikát.
Ezt a feladatot is elvégezhetjük manuálisan is, de a sok fájl miatt egyáltalán nem hatékony, így érdemes ezt is egy bővítményre hagynunk.
Bővítmények, sablonok
Újra egy egyszerűbb művelet, ehhez még technikai tudásra sincs szükségünk. Csak annyi kell, hogy belássuk, hogy a sok bővítmény és sablon lassítja a weboldalt, így próbáljuk meg felmérni, hogy mely bővítményekre nincs szükségünk és töröljük azokat.
Ha vannak olyan bővítmények vagy sablonok, amelyek nem aktívak, akkor azokat mindenképp töröljük. Illetve próbáljuk mindig frissen tartani a bővítményeinket és sablonjainkat, hiszen egy újabb frissítés nem csak hibajavításokat, de optimalizációkat is tartalmazhat.
Ezt még kiegészíthetjük azzal is, hogy ha olyan bővítményeket, sablonokat használunk, amelyek megfelelően vannak megírva, illetve nem tartalmaznak olyan extra funkciókat, amelyeket nem használunk ki, akkor azok extra milliszekundumokat jelenthetnek a weboldal betöltődése során.
Tűzfal
Ahhoz, hogy a weboldalad támadás alatt álljon, nincs szükséged rosszakarókra, sajnos ma már számtalan olyan robot van, amelyek arra törekszenek, hogy bejussanak weboldalakra. Ha megpróbálnak bejutni, az erőforrásokba kerül, hisz olyan, mintha egy rendes felhasználó böngészné az oldaladat, csak sokkal aktívabban.
Ha megfelelő tűzfalat állítasz fel, akkor ezeket a robotokat megfoghatod, így nem tudják a szervert terhelni.
CDN
CDN ismét, ahogy a CloudFlare esetében is említettük, a CDN segítségével a statikus tartalmak a világ több pontján elhelyezett szervereken is jelen vannak, így ha a felhasználó felkeresi az oldalt, akkor a hozzá legközelebb lévő szerver fogja kiszolgálni a statikus tartalmakat, például képeket.
Ám a CDN-ek használata általában pénzbe kerül, és valószínűleg csak akkor lesz hasznos, ha a látogatóid több országból is látogatják az oldalad. Ha csak egy olyan nyelven publikálsz, amely nem világnyelv (például a magyar), akkor számodra valószínűleg elegendő annyi, ha egy magyarországi vagy Magyarországhoz közeli országban lévő szerver szolgálja ki a felhasználóid.
Külső szkriptek száma
Fentebb is említettük, hogy a Google Analytics, Facebook Pixel, Google AdSense és társaik iszonyatosan be tudják lassítani az oldalt, hiszen ezek külső szkripteket futtatnak.
Ennek a helyzetnek megoldására két megoldás létezik: csökkentsük a külső szkriptek számát, biztos, hogy szükségünk van minden szolgáltatásra? Másik megoldás: a külső szkriptek lokális futtatása, ám ez nem minden esetben megoldható, azonban, ha mégis, akkor lehet, hogy érdemes megfontolni.
Utóbbi megoldására is bátran ajánljuk a bővítmények használatát.
Betűtípusok
Törekedjünk olyan betűtípusok használatára, amelyek elérhetőek minden böngészőben és minden eszközön, így nem fog felesleges erőforrás arra elmenni, hogy a weboldalunk betöltse a külső betűtípusokat.
Biztonságos (web safe) betűtípusok:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Ha mégis mindenképp más betűtípust (font) szeretnénk használni, akkor törekedjünk a lokális kiszolgálásra, és próbáljuk kerülni a külső szerverekről való betöltést, például Google Fonts.
Átirányítások száma
Az átirányítások száma valószínűleg nagyon keveset nyom a latba, hiszen pár száz, sőt még pár ezer átirányítás is alig észrevehető a betöltési idő tekintetében, de 10.000 körül már elkezd egyre látványosabb lenni a változás.
Így érdemes az átirányítások számával is csínyján bánni, és kerülni a többszörös átirányításokat.
Videók hosztolása
Egy újabb olyan lehetőség, amelyhez nem nagyon van szükség technikai tudásra. A nagyobb méretű videókat mindenképp érdemes inkább külső videóplatformokon (például YouTube vagy Vimeo) tárolnunk, és ezeket beágyaznunk a saját oldalunkba.
Végszó
Ezzel a termetes cikkünk végére is értünk, a cikk számtalan olyan tanácsot tartalmaz, amelyeket alkalmazva drasztikus fejlődést eredményez. De ahogy a cikkben is említettük, hogy a legfontosabbak a biztos alapok, így a szerver minősége nyom a legtöbbet a latba, azonban ha csak pár megoldást valósítanátok meg, akkor a PHP verzió frissítését, az adatbázis tisztítását, a képek optimalizálását, a lazy loading implementálását és a tömörítést javasolnánk. Ezek együttes alkalmazása már látványos javulást eredményez, melyek elvégzéséhez (kivéve PHP frissítés) nyugodtan alkalmazhattok bővítményt is.
