Tippek a szupergyors WordPress honlapokhoz

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!

 

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Ne maradj le semmiről, iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Tippek a szupergyors WordPress honlapokhoz” bejegyzéshez 16 hozzászólás

    • Nekem 4.47-et, de tudom, igen, hogy faragni kellene rajta. Sajnos a sablon shortcode-jai meg a bővítmények is lassítják, de már nem tudok mit kivenni belőle 🙁

    • Egyébként ami vicces, az az, hogy a 4.47-es értéket a wp-suli.hu adja. Ha úgy írod be, hogy www. wp-suli.hu, akkor csak 3.53 sec. Írta is az ajánlások között (mindkét sebességtesztelő oldal), hogy próbáljam kivenni a wp-suli.hu -> www. wp-suli.hu átirányítást. Muhaha.

    • A “Browser Cache”-t mindenképpen, mert az hat a böngészőre. De úgy vettem észre, hogy ha csak azt pipálod be, az gyakorlatilag nem hoz javulást. A többit meg tesztelni kell.

    • Attól függ, mennyi rajta a tartalom és a külső hivatkozás. Ha sok, akkor elfogadható, ha kevés, akkor nem 🙂 De mivel a sok és a kevés nem mérnöki fogalmak, innentől kezdve szerintem megnyugodhatsz, éppen elég gyors az oldalad.

  1. Mi számít sok bővítménynek? Azt írod töröljek ki néhányat, ami nem feltétlenül szükséges, közben pedig az ajánlások között újra találkozom 2 másik bővítménnyel, ami hasznosnak tűnik.
    W3 total cash
    WP Smush.it

    • Én nem telepítek mindent, amit ajánlanak 🙂 Nézd, ez egyéni döntés. Én csak néhányat használok, amit mindenképpen muszáj. Egy cache bővítmény hasznos, amint azt írtam is, de a WP Smush.it helyett én eleve kisebb méretben töltöm fel a képeket. Amire van egyszerű megoldás, ott én nem alkalmaznék plugint.

      • Persze, hogy nem mindent… Ez sok?
        add-to-any
        akismet
        all-in-one-seo-pack
        broken-link-checker
        captcha
        contact-form-7
        google-sitemap-generator
        image-xml-sitemap-generator
        really-simple-captcha
        recent-google-searches-widget
        testimonials-solution

      • Kevés van közte, amibe bele tudnék kötni, de azért akad.
        A broken link checkert én csak feltenném, lefuttatnám, aztán törölném, felesleges, hogy folyton ott ketyegjen.
        Viszont nem értem a kétféle google sitemap generatort. Igazából egy sem kell, ha az all-in-one-seo-packet használod, mert abban van beépített xml sitemap generator, amely a Google és a Bing/Yahoo felé is kommunikál.
        A recent-google-searches-widget-et nem ismerem.
        A többi teljesen rendben van.
        És szám szerint sem sok, ennyi simán belefér.
        Szerintem 🙂

  2. Ezer hála a tippekért, nagyjából 3 másodpercet sikerült lefaragnom a sebességből. Már másnap látszott, hogy a Google is örül neki 🙂

    Viszon van egy kérdésem: mióta a Smush.it-et hasznalom, a képfeltöltés nem mindig működik, sokszor kapok hibát. FTP-n megnézem, a kép felkerült, aztán megjelenik a Médiatárban is (de thumbnail nélkül), de a posztba beszúrva nagy üresség. És csak a sokadik feltöltéskor sikerül normálisan. Ti is tapasztaltatok hasonlót?

    • Ez akkor fordul elő, ha a kép fájlnevében ékezet, szóköz vagy más speciális karakter van. Nevezd át a fájlokat feltöltés előtt, és csak az angol ábécé kisbetűit használd, maximum számokat, kötőjelet, alávonást még, más karaktert ne.

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..