A WordPress már önmagában is egy hatékony és gyors weblapmotor, de ha megfogadsz néhány egyszerű tanácsot, és bevezetsz néhány trükköt, akkor még gyorsabbá teheted. Pári Balázs ezúttal arról írt nekünk, hogy hogyan tehetjük még gyorsabbá WordPress alapú weboldalunkat.

Milyen előnyökkel jár, ha gyors a weboldalad?

  • jobb látogatói élményt nyújt (ki szeret várni egy weboldal betöltődésére?);
  • segít, hogy jobb helyezést érj el a keresőkben (mert a Google bizony ezt is figyelembe veszi);
  • növeli az oldal eredményességét (például több feliratkozód lesz);
  • csökkenti a visszapattanó látogatók számát (kevesebben zárják be az oldaladat körülnézés nélkül);
  • sőt, a kisebb mérete csökkenti az adatforgalmi költséget (mobileszközökön).

 

Mielőtt bárminek is nekifognál, nem árt tudnod, hogy mennyire gyors az oldalad.

Egy weboldal sebessége elég relatív. Függ a földrajzi elhelyezkedéstől, az internetkapcsolat sebességétől, a számítógép vagy a használt egyéb eszköz sebességétől, sőt, még a használt böngészőtől is.

Nekem két kedvenc eszközöm van a sebességmérésre:

Pingdom Tools

Pingdom ToolsEgy nagyon hasznos kis eszköz. Az oldal tesztelése előtt be lehet állítani, hogy honnan (melyik városból) végezze el az analizálást. Az elemzés elvégzése után információkat kaphatsz a weboldalad és a fájlok betöltési idejéről, méretéről, helyéről, megtudhatod a lekérések számát és még számos hasznos információt.

Google Page Speed Insights

Google Page Speed InsightsEz is egy rendkívül könnyen használható elemző oldal. Két hordozható eszközön teszteli a weboldaladat: mobiltelefonon és laptopon. A tesztelt oldalt 100-as skálán pontozza, jelöli a hibáit, illetve azt, amiben jó.

Mi számít jó időnek?

Ez egy elég relatív dolog, és fogós kérdés, de vannak bizonyos értékek, amelyekhez viszonyíthatsz:

1 mp – ambíciózus cél, amely felé törekedhetsz, de elérni ritkán sikerül;
2 mp – jónak számít;
3 mp – elfogadható, ha indokolt a lassulás, például képgaléria vagy beágyazott videó miatt;
4 mp és felette – ebből mindenképpen illik faragni.

 

Most, hogy tisztában vagy weboldalad gyenge pontjaival, nézzük, hogyan lehet gyorsabbá tenni.

1. Válassz megfelelő tárhelyszolgáltatót!

Manapság elég sok szolgáltató ajánlata közül választhatsz. Keress olyat, aki SSD szervereken tárolja fájljaidat és nagy sávszélességgel kapcsolódik az internetre. (Ilyen szolgáltatást nyújt a PagonyMédia is: saját tárhely-díjcsomagjaink vannak, de a Profitárhely Kft szervereit használjuk, mint viszonteladójuk.)

2. Használd ki a Cache lehetőségeit!

Egy cache-bővítmény, mint például a WP Super Cache vagy a W3 Total Cache telepítése azáltal gyorsítja a honlapot, hogy statikus oldalakat készít, és elmenti őket a szerverre. Ezután, ha a felhasználó bármikor lekéri az adott oldalt, a mentett verzió jelenik meg, csökkentve ezzel a szerver felé irányuló lekérések számát. Meg fogsz lepődni, hogy egy ilyen kis bővítmény mennyivel gyorsíthatja oldalad betöltését.

3. Ritkítsd a bővítményeid!

A bővítmények felemésztik a szerver erőforrásit, mivel folyamatosan ki kell szolgálni a tőlük érkező kéréseket. Nézd át a telepített bővítmények listáját! Biztosan szükséged van mindre? Ha valamelyikre nincs, akkor töröld! Ezzel csökkenni fog a szerver leterheltsége, és ezáltal nő az oldalad sebessége is.

4. Optimalizáld a képeidet!

Használj képszerkesztő programot (Photoshop, GIMP, Caesium) a webre kerülő képeid optimalizálásához. Biztosan szükséged van nagyfelbontású képekre? Ha nincs, akkor méretezd át és tömörítsd! Nem szükséges a képeket mindig 100 %-os minőségben elmenteni. Ha 85-90 %-on tartod a minőséget, nem fogsz észrevenni a képen minőségromlást, de a fájl mérete drasztikusan lecsökken.

A fényképek méretére is figyelj oda! Ma már a legegyszerűbb mobiltelefonok is 5 Mpixeles képeket készítenek, háromezerakárhányszor kétezerakárhány pixeles méretben – a weboldalad pedig, ha WordPress sablont használsz, még teljes szélességben sem lesz nagyobb, mint 960 px széles, sőt, a tartalmi részben (ha van oldalsávod az adott oldalon) semmi szükség 610 px-nél szélesebb képekre.

5. Szabd testre az oldalad!

Ne terheld túl a főoldalt túl sok bejegyzéssel. Alakítsd úgy a WordPress honlapodat, hogy az oldalak könnyedén töltődjenek. Ha a főoldalra túl sok bejegyzést íratsz ki, az lassítja az oldal betöltődését és bosszantja az amúgy is türelmetlen olvasókat.

6. Csökkentsd a HTTP- és PHP-hívások számát!

FIGYELEM! Haladó módszer! Mielőtt bármit megváltoztatsz, készíts biztonsági mentést a fáljról!

Használj hardcode HTML kódolásokat a sablonodban, hogy csökkentsd a szerver által kezelt php-lekérdezések számát. A php címkék azok az elemek, amelyek “megszerzik” a WordPress verziószámot, az oldal nevét, a karakterkódolást, a html verziószámot és még sok mást az adatbázisból. Az ilyen php-kódokat érdemes helyettesíteni statikus html-kódokkal, és máris csökkenni fog a szerver terheltsége, és nő az oldal sebessége.

Amit a következő kódok tudnak, az mindössze annyi, hogy megmutatják a nevet, a leírást, és a blog url-jét, de php-t használnak az értékek “megszerzésére” az adatbázisból.

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<p><?php bloginfo( 'description' ); ?></p>

Ha ezt statikus html-lé alakítod, megszabadulsz négy php lekéréstől:

<a href="http://wp-suli.hu" title="WordPress Suli" rel="home">WordPress Suli</a>

Hasonló a következő kód a header.php fájlban:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="Feliratkozás a <?php bloginfo('name'); ?> RSS 2.0 csatornára" href="<?php echo get_bloginfo_rss('rss2_url'); ?>" />
<?php wp_head(); ?>
</head>

A statikus HTML itt is könnyedén használható arra, hogy megszabadulj jó néhány php lekéréstől:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title>WordPress Suli</title>
<link rel="stylesheet" type="text/css" media="all" href="http://wp-suli.hu/link-to-theme-stylesheet.css" />
<link rel="alternate" type="application/rss+xml" title="Feliratkozás a WordPress Suli RSS 2.0 csatornára" href="http://feeds.wp-suli.hu/rss" />
<?php wp_head(); ?>
</head>

 

Sok sikert az oldalad gyorsításához!