Azt hiszem nem árulok el nagy titkot, ha azt mondom, hogy kiemelkedően fontos a weboldalunk betöltési ideje, hisz a látogatók nem szeretnek várni. Egy nemrégiben készült felmérés szerint 40 százalékuk elhagyja az aktuális lapot ha az nem töltődik be kevesebb, mint 3 másodperc alatt, és ha ez nem lenne elég, még a Google is elkezdte fentebb sorolni a gyorsan reagáló, kevesebb betöltési idővel rendelkező weboldalakat. Ezen okból kifolyólag vált a keresőoptimalizálás egyik fontos lépésévé az úgynevezett sebesség optimalizálás is. Az elmúlt években igen sok tapasztalatot szereztem ebben a témakörben, így nem volt kérdés, hogy miről is szóljon a következő részletes elemzésem.
A mély vízbe ugrás előtt érdemes átnézni a telepített bővítményeinket és törölni mindazt, amire már nincs szükségünk, ugyanis a weboldalunk betöltési idejét jelentősen befolyásolják. Ha kíváncsiak vagyunk, hogy a fennmaradók közül melyik az, amelyik a leginkább lassítja az oldalt, akkor telepítsük a P3 Profiler nevű plugint, melyet a GoDaddy csapata fejlesztett. Ez az eszköz egy szép kis kördiagramon jeleníti meg az eredményeket, ebből pedig könnyen leszűrhetjük, hogy mi az, amitől ajánlott megszabadulni.
A felesleges és időrabló bővítmények törlése után mindenképpen fel kell mérnünk az oldalunk jelenlegi optimalizáltsági szintjét. A betöltési időt rengeteg tényező befolyásolja, szerencsére létezik néhány webes eszköz amelyek segítségével átfogó képet kaphatunk arról, hogy milyen problémákat is kell kijavítanunk és hogy hol vesznek el az értékes másodpercek.
A legismertebbek:
Zárójelben jegyezném meg, hogy sajnos a közismeretben még mindig a Google PageSpeed Insights eredményei számítanak az etalonnak, azonban véleményem szerint ez az eszköz (és főleg a pontozása) hagy némi kívánnivalót maga után. Irányadónak tökéletes, a javaslatai is helytállóak, azonban a pontozási rendszere elég furán működik. A weboldal tulajdonosok értelemszerűen a 100/100-as (de legalább a 90 pluszos) eredményre hajtanak, ezt azonban egy pluginekkel telepakolt, komplex sablonnal rendelkező WordPress oldal esetében egyszerűen lehetetlen elérni a bővítmények módosítása nélkül, ennek pedig nem sok értelme van, mivel az első frissítéssel elveszítjük az egyéni módosításokat. Érdemes tehát lefuttatni a Google PageSpeed tesztet, észben tartani a javaslatait, majd átnyergelni mondjuk GTMetrixre, mert az egy ésszerűbben kidolgozott rendszer alapján pontoz és több szempontot is vesz figyelembe az értékelésnél.
Azért is ajánlott egyébként a GTMetrix, mert folyamatosan naplózza a statisztikákat, ezért végig tudjuk követni, hogy az egyes változtatásaink milyen hatással voltak az oldal betöltési idejére, méretére és a betöltendő fájlok számára.
Az biztos, hogy a futtatott teszttől függetlenül az eredményeink nem lesznek túl fényesek, de ettől nem kell megijedni, mert mire a cikk végére érünk már tudni fogjuk, hogy az egyes javaslatokra mi is a pontos megoldás.
Összességében elmondható, hogy a cél az, hogy az oldalunk méretét, a szerverünk irányába küldött kérések számát és a betöltési időt a minimálisra csökkentsük. Ezeket az értékeket egyébként a GTMetrix nagyon szépen ki is jelzi az elemzés futtatása után a jobb felső részben. Az oldal méretét leginkább a rajta található képek növelhetik meg, a kérések számát pedig a Javascript/CSS fájlok kombinálásával lehet csökkenteni, de ezeket lentebb részletesebben is kifejtem.
A tárhely
Valószínűleg ez sem lesz újdonság, de nem mindegy, hogy a weboldalunk milyen szerverről kerül kiszolgálásra. Az osztott tárhelyek általában jóval lassabbak, mint a dedikált szerverek vagy a VPS-ek, cserébe viszont jóval olcsóbbak is az előbb említetteknél. Ha fontos a gyors betöltési sebesség, akkor mindenképp érdemes kerülni az osztott tárhelyeket és beruházni legalább egy VPS-be. Ma már ezek is olcsón elérhetőek, sebességben pedig mérföldekkel lekörözik az osztott tárhelyek sokszor döcögős tempóját. Hátrány lehet, hogy a VPS felügyelete, telepítése és kezelése ránk hárul, ehhez pedig elengedhetetlen a Linux ismeret. A Google PageSpeed tesztje is jelzi egyébként, ha a szerver válaszideje lassabb, mint az általuk megjelölt ideális válaszidő (0.2 másodperc).
Könnyen kideríthető, hogy a szerver gondolkodik-e sokat az oldal betöltése előtt. Futtass egy tesztet, például ezt: [link] Ha a “time to first byte” értéke magas, akkor az osztott tárhely miatt lehet lassabb a betöltésed és a szerveredre kell várni a kiszolgálás megkezdése előtt.
Amennyiben a VPS vagy a dedikált szerver túl nagy falat lenne neked, akkor választhatsz direkte WordPress futtatására specializálódott szolgáltatót is, ilyen például a WPEngine vagy a Pressable (korábban ZippyKid). Mindkettő jó választás lehet, ha nem szeretnél rendszeresen a frissítésekkel vagy a biztonsági problémákkal bajlódni.
A tartalom
Kivétel nélkül mindegyik elemző alkalmazás figyeli a feltöltött képek méretét, ami teljesen érthető, hisz egy feleslegesen nagy méretű kép jelentős mértékben lassíthatja a weboldal megjelenítését. Érdemes már a feltöltéskor átméretezett JPG képeket használni PNG helyett és mindenképp futtassunk át a médiatáron egy WP Smush tömörítést is. A logikusan felépített honlap egyik ismérve, hogy csak kellő mennyiségű képet használ és azokat is csak a megfelelő helyen. Ha a főoldalon cikkek vagy blogbejegyzések jelennek meg, akkor csak a kivonatokat engedélyezzük, a teljes bejegyzést és a további képeket csak kattintásra töltődjenek be.
Érdemes ellenőrizni (majd javítani) a hibás linkeket a Broken Link Checker pluginnel és ha nincs rájuk szükségünk, akkor kapcsoljuk ki a visszajelzéseket és visszakövetéseket a “Beállítások/Interakció” alatt, mert ez is csökkenti a szerverre irányuló terhelést.
A Google Search Console is egy hasznos eszköz a weboldalunkkal kapcsolatos hibák és problémák felderítésében, érdemes ezeket is javítani és folyamatosan monitorozni.
Ha a sablonunknak nem lenne mobil verziója, akkor telepítsük a WPTouch bővítményt, hogy az oldalunk gyorsan működjön és megfelelően nézzen ki mobil eszközökön is.
Az adatbázis
A WordPress adatbázisa egy idő után telerakódik szeméttel. Ez ellen nem sokat tehetünk, viszont időszakosan futtathatunk egy tisztítást, ez pedig szintén jó hatással lehet a betöltési időre. Erre a feladatra a Plugins Garbage Detector az ajánlott bővítmény. Sok plugin hagy szemetet és felesleges táblákat maga után, ez a kis segédeszköz felkutatja és törli ezeket a szükségtelen táblákat. Természetesen készítsünk biztonsági mentést, mielőtt bármilyen változtatást is hajtanánk végre az adatbázisunkban.
Érdemes még törölni ez esetleges spam hozzáaszólásokat és regisztrációkat is, ezek mind le tudják lassítani az adatbázis műveleteket.
Nagyon hasznos beépített funkció még az automatikus vázlatok mentése, azonban egy idő után ez is teleszemeteli az adatbázist. Ha szeretnénk teljesen letiltani ezt a funkciót, akkor a következőt kell hozzáadni a wp-config.php fájlhoz:
define( 'WP_POST_REVISIONS', false );
A legpraktikusabb megoldás azonban az, ha korlátozzuk az egy bejegyzéshez tartozó maximálisan létrehozható mentések számát a következőképpen:
define( 'WP_POST_REVISIONS', 3 );
A fenti példa mindössze három automatikus mentés létrehozását engedélyezi.
Ha szeretnénk megkönnyíteni a dolgunkat, akkor használjuk az Optimize Database nevű bővítményt, ami segíthet az imént bemutatott adatbázis tisztító lépések végrehajtásában.
A titkos összetevők
Ezek a lépések lesznek azok, amik végrehajtásával a legtöbbet gyorsíthatunk a weboldalunkon. Szükségünk lesz egy bővítményre, ami statikus HTML fájlokat generál a dinamikus tartalomból (ezt hívják page cache-nek), kombinálnunk és tömörítenünk kell az oldalunk által használt Javascript és CSS fájlokat (esetlegesen a HTML kimenetet is tömöríthetjük), meg kell mondanunk a böngészőknek, hogy hogyan és miként gyorsítótárazzák a tartalmainkat (ez a browser cache) és ha nagyon ki akarunk tenni magunkért, akkor konfigurálhatunk még adatbázis és objektum gyorsítótárat is (database cache és object cache). Mindezeken felül aktiválnunk kell még a gzip/deflate tömörítést, hogy csökkentsük az átvitt adatok mennyiségét és egy CDN beállítása is javallott. Ez így elsőre elég tömény és összetett, azonban egy darab bővítmény kell mindössze ahhoz, hogy az összes felsorolt funkciót élesíthessük. Ez a plugin pedig nem más, mint a W3Total Cache. A beállítása sajnos hozzáértést és kitartást igényel, ezért úgy döntöttem, hogy ezt rövidesen egy különálló cikkben fogom taglalni, itt pedig a legfontosabb funkciók kézi beállításával folytatom.
A gzip tömörítés aktiválásához másoljuk a következő tartalmat a .htaccess fájlunk végére:
# Gzip tomorites AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE image/svg+xml
A böngészőket is rávehetjük, hogy gyorsítótárazzanak, ha ez is bekerül a .htaccess-be:
# Bongeszo gyorsitotar ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"
És ha már itt vagyunk érdemes megpróbálni engedélyezni a KeepAlive-ot is (már ha a tárhelyszolgáltatónk is úgy gondolja). Bekapcsolása esetén nyitva maradhat a böngésző és a szerver közötti kapcsolat, ezzel pedig csökken a letöltési idő, mert nem kell ismételt kérésekkel bombázni a kiszolgálót.
Header set Connection keep-alive
Sebesség és felhasználói élmény szempontjából logikus döntés lehet még a szkriptek láblécbe (footer) történő automatikus átmozgatása. Erre való a Scripts to footer bővítmény.
Ha a W3Total Cache túl komplex, akkor használhatjuk a WP Super Cache bővítményt arra, hogy statikus HTML fájlokat generáljunk, az Autoptimize plugin pedig népszerű megoldás a Javascript és CSS fájlok kombinálására valamint tömörítésére.
A CDN (content delivery network) lényege, hogy a weboldalad statikus tartalmait (CSS/JavaScript fájlok, képek, PDF fájlok) egy olyan szerver környezet szolgálja ki, mely statikus fájlok kiszolgálására lett optimalizálva. Ennek köszönhetően a webszerver mind pedig az adatbázis szerver kevesebb lekérést kap, így a valóban fontos lekéréseknek több erőforrás jut és ennek köszönhetően az oldalad is gyorsabbá válik. A legnépszerűbb ingyenes csomaggal is rendelkező megoldás a Cloudflare, aktiválásához mindössze egy regisztrációra van szükséged. A domained hozzáadása után ki kell cserélned a névszervereid a Cloudflare által megadottakra és már kész is vagy. Az oldalad az alapszintű támadások ellen is védve lesz és a szervered terhelése is csökken, mivel a statikus tartalmak az aktiválás után a Cloudflare szervereiről kerülnek letöltésre. Népszerű (fizetős) opciók még a MaxCDN és az Amazon Cloudfront. Mindhárom felsorolt alternatívát támogatja a W3Total Cache.
Mint a fentiekből is látszik nincs itt különösebb titok, a sebesség optimalizálással foglalkozó szakik is csak a következő fontos lépéseket hajtják végre a tartalom és az adatbázis rendszerezésén kívül:
- Feltöltött képek újratömörítése
- Page cache beállítása
- Böngésző cache beállítása
- Gzip tömörítés engedélyezése
- Javascript/CSS fájlok kombinálása és tömörítése
- HTML kód tömörítése
- CDN konfigurálása
- Opcionálisan adatbázis és object cache beállítása
