Hogyan érheti el a 100/100 pontot a Google Pagespeed-en a WordPress weboldalán?

Google Pagespeed Insights az a jól ismert weboldal-eszköz, amellyel ellenőrizheti és optimalizálhatja a keresőmotor számára releváns összes paramétert. A fenti linkre kattintva, vagy általában a kezelőrendszerben is láthatja az oldalának naponta frissített értékét.

Ebben a bemutatóban egyszer megmutatjuk, milyen egyszerű a pagespeed pontszám A címről 100/100 elérni. Te is megteheted.

Példánkhoz egy mindenféle tartalommal rendelkező demo weboldalt és egy jól ismert témát használtunk, amely a szokásos bővítményeket is tartalmazza. Tehát pontosan ezt használja a jó weboldalak létrehozásához.

super-food-homepage

Mi itt választottuk a téma The7 döntött. De nem igazán számít, hogy melyik témát használja. A lényeg, hogy naprakész, és néhány beállítást kínál a weboldal létrehozásához.

Erre van szüksége egy gyors weboldalhoz.

  1. egy gyors web hosterek tapasztalattal
  2. egy tiszta, naprakész WordPress
  3. a webkiszolgáló helyes beállításai
  4. optimalizáló és gyorsítótárazási eszköz

Ebben a példában a WP Rocket. Ezek az eszközök mind ugyanazt teszik. Szövegfájlokat tömörítenek, összefoglalják a kódot, és szükség esetén statikus oldalt készítenek másolatban.

Ez lehetővé teszi a látogató számára az oldal gyors előhívását.

A statikus oldalak a régi idők html kódjára emlékeztetnek. Az egyszerű html-kódból és képekből álló weboldalak még mindig a leggyorsabbak. De nem dinamikus. Ezekkel a bővítményekkel a gyorsítótár mindig újra létrejön, amint valami megváltozik az oldalon.

Tipp: Kapcsolja ki a WordPress cronjob. Ez nem igazán egy cronjob a szó szoros értelmében, de mindig akkor hívódik, amikor egy látogató az oldalra lép. Hogy ez hogyan működik, azt egy másik cikkben mutatjuk be.

Google Pagespeed Insights

Egyszer adja be a jelenlegi weboldalát a google-ba, és nézze meg a teljesítményt.

Normális esetben az első értékeket a sárga területen kapja, így 85, ha a webtárhelynek jó szervere van.

Alapértelmezett telepítésünknél a PSI 85/100-at mutatott az asztali nézetben.

 Szélesség...

Kissé félrevezető azonban az az állítás, hogy a szerver lassan válaszol. Itt az első bájtig tartó időt értjük, amely átadásra kerül.

Nagyon sok tényező van, amelyek itt kölcsönhatásba lépnek egymással. Gyakran csökkenti az úgynevezett TTFB-t (time to first byte), ha az összes többi pontot rögzíti.

 Szélesség...

A Google számos ponton kényelmesen kínálja az optimalizált kódot letöltésre. Azt javaslom, hogy ezen a ponton, de elvileg csak a korábban optimalizált képeket integráljuk a weboldalba.

Ezt akár ingyen is megteheti, pl. a Tinypng Panda csináld.

tinypng képtömörítés
A Tinypng.com Panda felfalja a felesleges bájtokat.

A legtöbb téma azonban különböző méretű saját képeket is készít, így mindig szükség van optimalizálásra.

Ezért ajánlatos időről időre egyszerűen újraoptimalizálni a webszerver összes képfájlját, és újra felülírni őket.

Pingdom, GTMetrix és társai.

Természetesen vannak más vizsgálati helyszínek is. Itt azonban gyakran felmerül az a probléma, hogy a keresés külföldről történik, és ezért nem elég értelmes ahhoz, hogy a szokásos németországi látogatót szimulálja. Fontos tudni azt is, hogy egyes ellenőrző programok nem tudják kezelni a http/2-t, és nem veszik figyelembe a http/s előnyét, azaz az adatok párhuzamos továbbítását egy kapcsolaton keresztül, és ezt negatívan értelmezik.

gtmetrix
GTMetrix teljesítményjelentés

TTFB vagy teljes töltési idő?

Alapvetően a teljes betöltési idő eredménye számít. Az első bájt sok olyan tényezőtől függ, amelyet csak rosszul lehet befolyásolni. Egy tömörítetlen oldal általában nagyon alacsony TTFB-értékkel rendelkezik, mint egy tökéletesen tömörített oldal. De a teljes betöltési idő tömörítéssel természetesen gyorsabb egy sok tartalommal rendelkező oldal esetében. Hogy a Google ezt végül hogyan értékeli, az ködös. Nekünk is vannak olyan oldalaink, amelyek lassan töltődnek be, mert a szoftver elavult, és a PSI-értékük 68. A 28 000 szerves kulcsszó naponta körülbelül 1000 látogatót hoz az oldalra. De összehasonlítható oldalak esetén a jobb értékekkel rendelkező oldal biztosan előrébb szerepel a listán.

CDN és gyorsító modulok

Vannak olyan modulok is, amelyek statikus adatokat tárolnak más szervereken, és a látogató tartózkodási helyétől függően szolgáltatják azokat. Ez csökkenti a szerverhez való kapcsolódások számát, és ezáltal az úgynevezett TTFB-t is. Itt használhatja az akamai, a cloudflare vagy az incapsula gyorsítótárakat, amelyek a lefoglalt szolgáltatástól függően tömörítést és optimalizálást is kínálnak. Egy kis (D)Dos védelem is szerepel, feltéve, hogy a kapcsolat teljes egészében ezeken a szolgáltatókon keresztül történik.

cloudflare-web-traffic-overview
Cloudflare forgalmi elemzés

Speedkit for Plesk

Például van egy plugin a Pleskhez, amely néhány kattintással gyorsabbá teheti a weboldalt. Az én tesztemben azonban pont az ellenkezője történt. Az ilyen bővítményekkel az a fő probléma, hogy a gyorsítótár csak akkor indul el, amikor a látogató másodszor is megnézi az oldalt, vagy először létesít kapcsolatot a rendszerrel.

Előnye, hogy egyszerűen aktiválhatja az egészet anélkül, hogy bármilyen változtatást végezne a rendszerén. De a hátránya akkor, de inkább a sebesség hiánya 1 nézet látogatók. Emiatt a szokásos ellenőrző programokkal sem lát változást, mert mindig úgy látogatják az oldalt gyorsítótár nélkül, mint egy vadonatúj felhasználó.

speedkit-website-accelerator-plesk
A Speedkit for Plesk elvileg gyorsabbá teszi a weboldalakat. De ez nem mindig működik.

Mivel a legtöbb látogató gyakran csak egy keresőmotor linkjén keresztül érkezik az oldalra, ez nem hoz sebességbeli előnyt ezeknek a látogatóknak. A fedélzeti eszközökkel külső gyorsítótárak nélkül is elég jól boldogul. Az adatvédelem, különösen a DSGVO és a közelgő elektronikus hírközlési adatvédelmi rendelet szempontjából sem megfelelő az ilyen szolgáltatások használata. Már most is hiányzik a szerződés a rendelési adatok feldolgozására, amikor ezeket a szolgáltatásokat rendelik meg.

Így teszi gyorsabbá a weboldalt.

A legfontosabb pont: a megfelelő tárhelyszolgáltató.

Kívülről nézve mindannyian Web hosting szolgáltató ugyanaz. De a különbség oly gyakran rejtve marad.

Vannak webhostok, amelyek magokkal és dedikált erőforrásokkal hirdetik magjaikat, de aztán mindez csak nagyon gyenge hardveren fut. Egy 10 éves szerverből származó kis AMD mag nem ugyanaz, mint egy Intel Platinum Xeon legújabb verziójának magja.

vmware_cluster
Egy VMWare klaszter példa

A legtöbb szolgáltató ma már a teljes infrastruktúráját is virtualizálja. Gyakran olyan furcsa struktúrákban, mint a konténerrendszerek, ahol az ügyfél által lefoglalt magokat 20 másik ügyfél is lefoglalta. Jó és a szoftverlicencek költségei miatt drága szolgáltatók megfelelő virtualizációs rendszereket használnak, mint például a vmware vagy a KVM, általában felhőnek nevezik.

kvm_cluster
Egy kis KVM fürt

Gyakran elegendő a megosztott tárhely. Mi magunk is építettünk már olyan weboldalakat, amelyeknek havonta több tízezer látogatója van. Ezek egy kis tárhelyszámlán is futnak, mert a webtárhely gépeket általában már nagyon nagyra méretezi a szolgáltató, hogy több száz weboldalt tudjanak kiszolgálni.

virtuozzo_cluster
Egy Virtuozzo 7 csomópont nézete

A legtöbb weboldalnak azonban nincs szüksége a lefoglalt energiára, így mindig marad bőven energia.

A webtárhely kiválasztásakor egyszerűen győződjön meg róla, hogy van egy tesztfiókja, és töltse fel oda a weboldalát minden kötelezettség nélkül. Általában egy aldomainen keresztül érheti el őket, és tesztelheti a sebességet. Ha semmiség, csak váltson másik szolgáltatóra.

Ebben a példában a demo oldal egy SEO szerver a webhoster.de AG, ahol egy Plesk viszonteladói fiókot kap 10 IP-címmel a projektjeihez.

A használt hardver egy Dell R740 szerver MLC szerver SSD-kkel raid tömbként.

A kezelőfelület Plesk Onyx a jelenlegi verzióban.

Egy szabványos WordPress lett telepítve a következő aktív bővítményekkel:

  • Amazon Affiliate a WordPress számára
  • KövetkezőSkriptek: SNAP Pro Upgrade Helper
  • KövetkezőSkriptek: Társadalmi hálózatok automatikus poszter
  • SEO Smart Links Üzleti
  • Shortcodes Ultimate
  • Tartalomjegyzék Plusz
  • The7 Elements
  • Végső kiegészítők a WPBakery Page Builderhez
  • WPBakery oldalépítő
  • Yoast SEO Premium
  • WP Rocket

A tervezési sablon

A7 a téma.

Az oldal kialakítása a téma vagy az oldalépítő sablonjaiból áll. Az aloldalak általában 2500-3000 szót, valamint sok képet és táblázatot tartalmaznak.

Ezért mindig fontos, hogy ne csak a kezdőlapot, hanem az aloldalakat is ellenőrizzük.

A demó oldalunk neve www.super-food.de és szintén ezen a tartományon belül érhető el. Így az összes tesztet maga is ellenőrizheti. Egy másik cikkünkben éppen azt mutatjuk be, hogyan lehet kevés erőforrással, rövid idő alatt nagyméretű weboldalt építeni. Talán ez is valami neked való. A weboldal időről időre tesztelési céllal más rendszerekre kerül átmásolásra.

A webkiszolgáló beállítása a Plesk segítségével

Először is, a webszerver beállítását a Plesk segítségével kell elvégezni. Mindig vannak ajánlások az nginx használatára, mint tiszta webszerver. De ezt nem tesszük, mert lényegében nem támogatott .htaccess fájlokat, és a pluginok legtöbb WordPress funkcióját csak nagyobb erőfeszítéssel lehet átalakítani, különben hatástalanok. Ebből sem származik sebességelőny.

plesk-dashboard-domain
A tartomány Plesk Dashboardja

PHP beállítások a Pleskben

A jelenlegi 7.2.9-es php verziót használjuk az alapértelmezett beállításokkal. A PHP beállítások menüpont alatt általában maga állíthatja be az opciókat. Ha nem, akkor a tárhelyszolgáltatónak kell ezt megtennie.

plesk-php-version-set-with-apache
PHP beállítások a Plesk menüben. PHP FPM Apache webszerverrel.

Apache és nginx beállításai

Az nginx vagy az Apache beállításaiban csak a szolgáltató által már előre megadott értékeket állítjuk be. Tehát semmi különös. Itt csak biztonsági okokból a szimbolikus hivatkozások le vannak tiltva, és az alapértelmezett tömörítés be van kapcsolva.

 Szélesség...

nginx mi lesz csak, mint egy proxy szerver az intelligens feldolgozása statikus fájlok. Alapvetően az nginx nélkül is meg lehet csinálni teljesen. De aztán a http/2 már nem működik, és más problémák is jelentkeznek. Tehát az egészet hagyjuk az alapértelmezett értékekkel.

WordPress műszerfal

A demóoldalunk valójában már elég jól működik. De a 100/100 eléréséhez szükségünk van néhány módosításra, mint például a minifikáció, tehát a CSS és a Javascript összefoglalása, ahogyan azt a Google ajánlja.

Mindezt általában nem tudod magadnak összemásolni, de vannak hasznos segédprogramok, amelyek elvégzik a munkát.

Ebben a tesztben a WP-Rocket plugint használjuk. De a legtöbben mások is képesek erre.

wp-rocket-dashboard
A WP-Rocket műszerfal

A beállítások között a Fájloptimalizálás szakaszban egyszerűen kattintsunk az összes elemre, kivéve a http/2 számára káros beállításokat. Ezek a CSS fájlokhoz a "Minimalizálja a CSS-t" és "CSS megjelenítés optimalizálása„.

css-minify
WP Rocket CSS Minifikáció

A Javascript beállításoknál meg kell változtatnia a beállításokat "Minimalizálja a Javascriptet" és "Javascript késleltetett betöltése", valamint a "Biztonságos mód a jQuery számára (ajánlott)".

javascript-minify
WP Rocket Javascript beállítások

Ez már majdnem ennyi volt. A pluginnal az oldal PSI értéke 94/100-ra emelkedik. Most már csak a képfájlok vagy a CSS kód néhány kisebb optimalizálása hiányzik, amelyek valahogy nem voltak tömörítve az úgynevezett gyermektémában. Kényelmesen, a Google biztosítja ezeket a fájlokat, de optimalizálva, így egyszerűen kicserélheti őket a fájlkezelőn keresztül.

Ebben az esetben még mindig képesek voltunk kicserélni a témában módosított képeket, és elhelyezni egy CSS és Javascript fájlt a gyermektémában.
Ezután már csak egy kis újratöltés hiányzott a remélt 100/100-hoz, miután minden optimalizálás megtörtént.

pagespeed-insights

page-speed-100-100-100
A Google Pagespeed Insights 100/100-ra vizsgázott.

Reméljük, hogy a kis bemutató segített az optimalizálásban. Tehát bármi lehetséges. De a dolgok is naponta változnak. Ezért kell mindig naprakészen tartani a WordPress-t, különben az új funkciókat már nem támogatják.

Hamarosan egy teljes videót talál a Youtube-csatornánkon.

 

 

Aktuális cikkek