Wordpress weboldal gyorsítás - hogyan? ÍGY!!!!!

WordPress weboldal gyorsítás – hogyan? ÍGY!!!!!

A WordPress rendszer népszerűségéről talán elég annyi elárulnom bevezetésképpen, hogy 2013-ban mintegy 60.000.000 weboldal használta alaprendszerként. Ebből az egyik az én kis szemem fénye, a quartz.hu blog.

Minek gyorsítani egy weboldalt?

Ha sok látogatót szeretnél a weboldaladra, akik sok cikket el is olvasnak, akkor nem elég király posztokat kitenned, hiszen azokat olvashatóvá is kell tenni. Ehhez elengedhetetlen, hogy ne kelljen hosszú másodpercekig várni arra, hogy egy egy cikked betöltődjön.

Felhasználói szempontból tényleg ennyi a lényeg: minél gyorsabban töltődik be a weboldalad, annál használhatóbb.

Ha meg nem csak egyszerű blogod van WordPress alapon, hanem webáruházat is építettél rá (pl. Woocommerce-t), akkor a betöltődési sebesség a vásárlásokra is komolyan kihat.

Gyorsabb weboldal >>> több vevő. Ennyi.

Hogyan kell gyorsítani egy WordPress weboldalt?

A tudásszintedtől függően sokféle lehetőséged van.

  1. Ha totál nem értesz hozzá, akkor kell keresni valakit, aki ért hozzá (vagy elolvasod, amit írtam, és nekiállsz kísérletezni).
  2. Ha kicsikét már értesz hozzá, akkor feltelepítesz pár plugint, és bekapcsolod, majd bepipálgatod őket a megfelelő helyen.
  3. Ha jobban értesz hozzá, akkor kód szinten is át tudod hegesztgetni az oldaladat.

Alapvető dolgok weboldal gyorsításnál.

1. Tárhely

Az ingyenes tárhelyeket felejtsd el, ezekkel csak a gond lesz. Inkább bérelj egyet: a megacp.com-nál jó kis tárhelyeket találsz már évi pár ezer forintért, de ha biztosra akarsz menni, akkor a mikrovps.hu-nál már havi 4000 Ft-ért villámgyors vasat bérelhetsz (remek support-tal), ami több tízezer látogatót is kiszolgál napi szinten zökkenőmentesen.

2. Kinézet

Olyan sablont érdemes választanod, ami sebességre optimalizált (a Google-ben keress rá erre: “fastest WordPress themes“, vagy “speed optimized WordPress themes“). Ezekből van fizetős és ingyenes is sokféle kategóriában. Tőled függ, mit választasz. Erről amúgy lesz még később szó.

3. Tartalom

Nem mindegy, milyen tartalmakat teszel ki. Pl. ha sok képet használsz, akkor azok betöltődése erősen lassítani fogja a weboldaladat, vagyis ha a sebesség fontos, itt kell majd kompromisszumokat kötni (erről lesz még szó lentebb).

Ha viszont inkább a szöveges tartalmak állnak a fókuszban, akkor egy kis odafigyeléssel nagy bajod nem lehet sebesség szinten.

Hogy legyen egy gyakorlati példa, megmutatom, hogy a quartz.hu hogyan lett olyan gyors, mint a villám.

Gyakorlati példa: http://quartz.hu weboldal

Most itt tartok:

Betöltődési sebesség asztali gépeken (Google PageSpeed teszt)

desktop-97

Betöltődési sebesség mobilokon (Google PageSpeed teszt)

mobil-91-99

Ahonnan indultam (Tools.pingdom.com)

tools-pingdom-80-100

Sajnos a valódi kezdeti állapotot nem tudom visszaállítani (nem tudtam előre, hogy cikket fogok erről írni), mert már az eredeti képeket (bögrés képem, plusz az ikonok külön) sem tudom előszedni (erről később még esik szó), de valahol olyan 75/100-as értéken volt az oldal.

Most pedig ugyanaz az oldal 96/100:

tools-pingdom-96-100

Gyorsítás előtt és után:

  • Pontszám: 80 (inkább 75 volt) most 90.
  • Kérések (betöltődő elemek (pl. képek, js-ek, css-ek)): 19 volt (ez is több volt), 10 lett.
  • Oldalbetöltődés ideje: 3mp volt, és most 0,65mp.
  • Oldal méret: 180KB volt, 93 KB lett.

A weboldal gyorsítása

1. Normális “vas” van a weboldal alatt

Ahogy már írtam, kell egy rendes tárhelyszolgáltató, én a mikrovps.hu-tól bérelek egy “SSD VPS – VZ-SSD-512M” nevű csomagot, bármit is jelentsen ez, mert annyira azért nem értek hozzá. Ez jó hír neked is, mert neked sem kell annyira érteni hozzá… legyen egy ilyen tárhely/szerver a weboldalad alatt, és kész.

2. Sablon választás

Hosszas kutakodás után a mostani full minimalista és ingyenes design tetszett meg (a korábbi design a fizetős “Patus” theme volt, a Themeforest-ről vettem), bár többen is írták, hogy ebben a sablonban vannak apró hibák: Frank Free WordPress Theme.

Kicsit féltem tőle, mert nem vagyok képzett programozó (alapvetően elemző alkat vagyok), leginkább a Google segítségével oldom meg, ha éppen valamilyen kódolási problémába ütközöm. Végül is nem nagyon találkoztam hibával, ennek kimondottan örültem.

Amit kellett, azt megcsináltam: theme magyarítás, illetve a design minimális szintű változtatása pár helyen, ahogy jónak éreztem.

3. Pluginok okosan

Aki használ WordPresst, az tudja, hogy a pluginok megkönnyítik, de egyben meg is nehezítik az online életet.

  1. Minél több plugin-t használsz, a weboldalad annál sebezhetőbbé válik, valamint a css-ek és javascript-ek növekvő száma egyre jobban belassítja az oldal betöltődését.
  2. Szerencsére vannak olyan pluginok, amik pont ezt hivatottak megoldani.

Pluginok, amiket használok a sebesség érdekében, és ahogyan használom őket

A javaslatom fizetős dolgok esetében az (párszor már megjártam és ezért téged is óvatosságra intelek), hogy szerezz be egy verziót tesztelni a kinézett pluginokból, és ha tetszik, vedd meg rendesen.

Ezt a saját káromon tanultam meg: jó pár tízezer forintom bánta, amikor tetszés alapon megvettem sablonokat/pluginokat, aztán kiderült, hogy egy fillért sem érnek, mert vagy nincs support, vagy nincs update, vagy éppen nem is tudja azt, amit beígértek a fejlesztők. Először tesztelj, csak aztán vásárolj.

A W3 Total Cache beállítása

A W3 Total Cache tömören összefoglalva annyit csinál, hogy a megtekintett dinamikusan betöltődő oldalakból/aloldalakból statikus oldalakat generál, ezért sokkal gyorsabban töltődnek be legközelebb (hiszen nem kell az adott tartalmakat adatbázisból újra legenerálni).

Készítettem pár képet arról, hogyan is van beállítva nálam, ezeket érdemes megnézned.

FIGYELEM! Ezek a beállítások tárhely szolgáltatónként eltérhetnek, ezért ne állj neki mindent össze vissza nyomogatni, hanem inkább kérdezz rá a rendszergazdánál, ha valamiben nem vagy biztos.

Az Autoptimize beállítása

Itt nincs túl sok feladat, némi tesztelgetés után ez a beállítás vált be:

autoptimize-beallitas

Scripts-To-Footer 

Ezt gyakorlatilag csak fel kell telepíteni és bekapcsolni, és kész is.

Ahogy a nevében is benne van, ez a plugin a scripteket a header-ből a footerbe teszi át.

Ez azért jó a felhasználói szemszögből, mert először a weboldal kinézete töltődik be, és csak az után a különböző elemekhez tartozó funkciók.

Ez persze nagyon gyorsan játszódik le, ám mégis jól érezhető az oldalbetöltődési sebességkülönbség, ha sok javascrip-et használsz (sok plugin, sliderek, meg mindenféle csilivili effektek).

Smart Cleanup Tools beállítása

Ennek a fizetős pluginnak nem kell mindig bekapcsolva lennie, elég néha lefuttatni: igazából a WordPress oldalad adatbázisát rakja rendbe. IDE KATTINTVA nézheted meg, miket tud.

Google Drive as CDN

A CDN megoldás lényege, hogy a weboldalad megadott fájljait (pl. képeket, css-eket, javascript-eket) feltöltöd (vagy egy plugin feltölti automatikusan) egy külső szolgáltatóhoz, ezért a weboldalad gyorsabban töltődik be, mert a tárhelyednek/szerverednek kevesebb kérést (képet, stb.) kell kiszolgálnia.

Illetve szintén nagy előnye a CDN-nek, hogy a szolgáltató az oldaladra lépő látogatóhoz legközelebbi szerverről tölti be a feltöltött fájlokat, ezért az oldalbetöltődésed még gyorsabb lesz. A CDN szolgáltatók brutális mennyiségű szerverrel rendelkeznek a világ sok sok pontján, ezért nem gond nekik, hogy a látogatóhoz legközelebbi szerverről töltsék be, amit kell.

A “Google Drive as CDN” nagyon jópofa cuccnak tűnik, pár napja kezdtem el tesztelni. Gyakorlatilag a Google Drive-odat használhatod ingyenes CDN-ként, pl. a WordPress oldalak képeinek automatikus tárolására. A Google nem is szűkmarkú, havi 10.000.000 request-ig (lekérésig) ingyenes.

Ez azt jelenti, hogy ha mondjuk csak a képeidet tölti fel automatán a plugin a Google drive-ra, és egy cikkben van 4 db képed, akkor havi mintegy 2.500.000 (napi 80.000) oldalletöltésig nem kell CDN-ért fizetned, mert a Google ezt ingyen adja neked.

Egyszerűen telepíthető és beállítható, persze gyorsabban megy, ha angolul minimális szinten azért értesz (de ha nem tudsz angolul, akkor sem leszel bajban, hidd el).

ccdn-wordpress

Kód szintű weboldal gyorsítás

Aki igazán gyors weboldal betöltést szeretne, az nem áll meg a pluginoknál, hanem a WordPress sablonjába is belenyúl, én is ezt tettem. Mutatom mit, és miért csináltam.

Royal FLUSH

Amikor egy látogató megnézi a weboldaladat, akár 200-500 milliszekundum is eltelik, mire a szerver összerakja a weboldalad html verzióját. Ez idő alatt a böngésződ ásítozik, unatkozik.

Az alábbi kód abban segít, hogy a még csak részben elkészült html-t is be tudja már tölteni a böngésző, vagyis a felhasználó szeme előtt hamarabb kezdjen el összeállni a weboldal.

Ehhez azt kell tenned, hogy a flush () függvényt a WordPress sablonodba beilleszted:

Nyisd meg a header.php fájlodat (pl. az ingyenes Notepad++ programmal), keresd meg a </head> szöveget, és illeszd be a “<? php flush (); ?>”-t rögtön utána így:

</ head>
<? php flush (); ?>
<body>

CSS sprite

Ha megnézed a weboldalamat, láthatod hogy nem használok túl sok képet a design-ban: van a logó, van a bögrés képem, illetve az ikonok.

Ez összesen 6 külön kép volt, ami 6 lekérést jelentett a szerver felé oldalbetöltődéskor.

Ezért a különböző képeket fogtam, és rátettem egyetlen képre, és CSS segítségével jelenítem meg a kép adott részeit a dizájn adott helyein.

Íme a kép egyben:

motivator-css-sprite

Mivel pontosan meg van határozva, hogy egy egy kis képrész pixelben mettől meddig tart (szélesség, hosszúság, kezdőpontok), így CSS segítségével meg is tudom jeleníteni a megfelelő helyen.

Ezzel az online CSS sprite generátorral te is csinálhatsz ilyet 1 perc alatt.

Mivel a kép png lett és nagy volt a mérete KB-ban mérve, ezért veszteségmentesen a töredékére tömörítettem a Tinypng-vel (szintén ingyen).

Statikus oldalsáv

Ahogy már volt róla szó fentebb a W3 Total Cache pluginnál, a statikus tartalmat gyorsabban ki tudja szolgálni egy szerver, mint az adatbázis lekéréseket kérő dinamikus tartalmakat.

Ezért azt is megcsináltam, hogy a weboldalam forráskódjában megnéztem az oldalsávban legenerált html-t és beillesztettem direktbe a sidebar.php-ba.

Mutatom:

Eredetileg a sidebar.php-ban ez volt (lehet látni, hogy a megjelenített tartalom dinamikus van betéve):

<aside id=”sidebar” role=”complementary”>
<?php if ( ! dynamic_sidebar( ‘Post Right Aside’ ) ) : ?>
<h3><?php _e( ‘About This Site’, ‘frank_theme’ ); ?></h3>
<p><?php bloginfo( ‘description’ ); ?></p>
<h3><?php _e( ‘Search’, ‘frank_theme’ ); ?></h3>
<?php get_search_form(); ?>
<?php endif; ?>
</aside>

Én ezt egy az egyben lecseréltem erre (ez csak egy részlet):

<aside id=”sidebar” role=”complementary”><div id=”text-4″ class=”widget-1 widget-first widget widget_text”><div class=”textwidget”><div class=”aubox”><ul id=”motatis”><li id=”motatis”><a href=”http://quartz.hu/arajanlatkeres/”></a></li></ul></div><div class=”oldalt”><a rel=”nofollow” href=”http://quartz.hu/arajanlatkeres/”><strong>Rácz-Akácosi Attila</strong> vagyok, <strong>SEO és marketing tanácsadó, blogger</strong>.
A célom: jobb élethez, és több profithoz segíteni Téged és a vállalkozásodat.</a>

stb stb…

Mivel maga a WordPress úgyis ez utóbbit generálta volna le a látogatóknak az adatbázisból, így ezzel a megoldással az adatbázis lekérést egyszerűen kiiktattam.

Lejárati idő meghatározása

Ha valaki megnézi a weboldaladat, és a menüd dizájnja pl. képi elemeket is tartalmaz, akkor azzal is csökkentheted a következő aloldalad betöltődési sebességét, ha a menü képeit a látogató böngészőjével gyorsítótárazod (bár ezt a W3 total cache is tudja) és megadod azt, hogy ezeket a képeket meddig tárolja el a látogatód böngészője (persze ha a látogató közben nem törli a gyorsítótárat, előzményeket, webhelybeállításokat, stb.).

Egyszerűen másold be ezt a kódot a .htaccess fájlodba.

ExpiresActive On
ExpiresByType image / gif A604800
ExpiresByType image / png A604800
ExpiresByType image / jpg A604800
ExpiresByType image / jpeg A604800

De lehet videókat, doksikat, CSS-eket, scripteket, meg minden mást is gyorsítótárazni egyébként.

A képeid tömörítése: “WP Smush.it”

Amikor a WordPress weboldaladra képet töltesz fel, érdemes tömöríteni (mármint nem pixelben, hanem kilobájt-ban). Ebben segít a WP Smush.it ingyenes plugin.

Nincs vele más dolgod, minthogy feltelepíted és bekapcsolod. Ennyi, aztán rá sem kell nézned a továbbiakban, a képeidet feltöltéskor automatán tömöríti.

Ha viszont az eddig feltett képeidet is szeretnéd optimalizálni, ebben is segít a plugin “Bulk WP Smush.it” funkciója, mely a Médiatár menüpont alatt érhető el.

Pluginok kiiktatása, ahol nem kellenek

A WordPress pluginok közt több olyan is van, ami a saját CSS, és javascript fájljait akkor is betölti, amikor azokra az adott aloldalon nincs is szükség, ezzel feleslegesen lassítva a weboldalt.

Ilyen többek között a “Contact Form 7” vagy a “Facebook Comments” plugin.

Bár a Facebook hozzászólásokra nálam csak a cikkeknél van szükség, mégis minden egyes oldalon betöltődött a footer részben ez (eredeti kód):

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/<?php echo $options[‘language’]; ?>/all.js#xfbml=1&appId=<?php echo $options[‘appID’]; ?>”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Ezt egyszerűen lekezeltem magában a plugin class-frontend.php fájljában (tudom, tudom, plugint nem hekkelünk, de akkor is ez volt a legegyszerűbb megoldás) úgy, hogy megadtam, hogy csak a blogbejegyzéseknél töltődjön be (hozzáadtam 2 sort):

<?php if ( is_single() ) { ?>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/<?php echo $options[‘language’]; ?>/all.js#xfbml=1&appId=<?php echo $options[‘appID’]; ?>”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<?php }?>

A fenti kis parancs azt csinálja, hogy “if is single”, vagyis csak ha blogbejegyzés oldalról (single.php) van szó, akkor töltődik be a szükséges kód, ha meg nem, akkor nem.

A Contact Form 7 alig egy-két aloldalamon (pl. “arajanlatkeres”) van használatban, mégis mindenhol betöltődött ez a két file:

 <script type=”text/javascript” src=”http://quartz.hu/wp content/plugins/contact-form-7/includes/js/jquery.form.min.js”>

</script>és a<script type=”text/javascript” src=”http://quartz.hu/wp-content/plugins/contact-form-7/includes/js/scripts.js”></script>

Ezt a “deregister” funkcióval sikerült megoldani a sablonom functions.php-jába téve:

add_action( ‘wp_print_scripts’, ‘deregister_cf7_javascript’, 100 );
function deregister_cf7_javascript() {
if ( !is_page(100) ) {
wp_deregister_script( ‘contact-form-7’ );
}
}

és kész is. Ez azt csinálja, hogy ha “!is_page” vagyis “nem page” (page.php) oldal töltödik be, akkor a “contact-form-7” javascript-jei sem töltődnek be. Ezzel megint csak egy csomó betöltődési időt spóroltam…

Igazából mindegy milyen tesztelőn vizsgálom most a quartz.hu weboldalt, mindenhol jó értékek jönnek ki:

Gtmetrix.com

gtmetrix

Webpagetest.org

webpagetest-org

Összefoglalás

Úgy gondolom, hogy némi előre gondolkodással, és kutakodással nagyon gyors weboldalakat lehet építeni WordPress-ben, legyen szó egyszerű blogról, híroldalakról, vagy akár egy fotós weboldaláról.

Az biztos, hogy kicsit dolgozni kell vele, és mivel minden weboldal más, így a kísérletezés is elkerülhetetlen. Ami az egyik szerveren beválik, lehet, hogy egy másikon nem.

De hidd el nekem, hogy megéri azt a néhány órát (vagy kezdőknek néhány napot) böngészéssel és kísérletezgetéssel letölteni, mert azt a kész weboldal több látogatóval, jobb konverzióval fogja meghálálni.

Sok sikert!

Ha pedig kérdésed van, tedd fel majd kommentben, ha pedig nálam sokkal jobban értesz hozzá, szívesen fogadok még egyéb hasznos tanácsokat is.

Üdv, Attila

3 hozzászólás a(z) “WordPress weboldal gyorsítás – hogyan? ÍGY!!!!!” bejegyzéshez

  1. Szia
    Kis gondom támadt a W3 Total Cache-el, telepítettem egy WP Mobile Detector Mobile Plugin nevű alkalmazást, hogy mobilon is jól jelenjen meg a honlapon. Ez addig működik, amíg egyszer meg nem nézem mobilon az oldalt, azután visszaáll az asztali verzióra. Ha a Performance-n belül Empty all cashes-ra megyek, akkor egy megnézés erejéig újra jó lesz. Gondolom csak egy pipát kéne betenni valahová vagy kivenni, de nincs ötletem.

  2. Kedves Attila!

    Elakadtam a Google Drive As WordPress CDN bővítménynél, csak fizetős verziót találtam a leírásban található bővítéményhez kérhetek egy linket?

    Köszönettel:

    V. Pál

  3. Szia Attila,

    Most nem mondom azt, hogy ezekkel az ismeretekkel és trükkökkel nem rendelkeztem már, de ettől függetlenül nagyon informatívnak és átfogónak találom cikkedet.

    Viszont azért a WordPress védelmében el kell, hogy mondjam, alapból sem lassú rendszer. Én úgy tapasztaltam, hogy a kedves bloggerek leginkább azzal tudják belassítani a blogjaikat ha orrba szájba töltik fel a pluginokat. Ilyen belassulásos jelenségek érdekes módon a WP szerveren levő oldalaknál nem nagyon vannak, inkább a saját tárhelyen levőket érinti ez a jelenség. Persze utóbbi nagyobb szabadság az is igaz ;)

    Viszont ezzel a WP Smush-al nincs még gyakorlati tapasztalatom. Oké, hogy automatikusan redukálja a fájlméretet, amely ügye kihat a betöltődési idejére, de mennyire nyesi meg a minőséget?! Csakúgy érdekelne, az én blogjaimon inkább grafikák vannak, mintsem fotót, így túl nagy helyet nem igényelnek.

Minden vélemény számít!