Kuidas saavutada 100/100 punkti Google Pagespeed oma WordPressi veebilehel

Google Pagespeed Insights on tuntud veebisaidi tööriist, mille abil saate kontrollida ja optimeerida kõiki otsingumootori jaoks olulisi parameetreid. Võite klõpsata ülaltoodud lingile või tavaliselt näha haldussüsteemis ka oma lehekülje igapäevaselt uuendatud väärtust.

Selles õpetuses näitame teile kord, kui lihtne see on Pagespeed skoor Alates 100/100 saavutada. Ka sina saad seda teha.

Meie näitena kasutasime igasuguse sisuga demo veebilehte ja tuntud teemat, mis sisaldab ka tavapäraseid pistikprogramme. Nii et see on täpselt see, mida te kasutate heade veebisaitide loomiseks.

super-food-homepage

Me oleme valinud siin teema The7 otsustati. Kuid tegelikult ei ole oluline, millist teemat te kasutate. Peamine on see, et see on ajakohane ja pakub mõningaid seadistusi veebisaidi loomiseks.

See on see, mida vajate kiire veebilehe jaoks.

  1. einen kiired veebihosterid kogemustega
  2. puhas ajakohane WordPress
  3. veebiserveri õiged seaded
  4. vahend optimeerimiseks ja vahemälu salvestamiseks

Selles näites kasutame WP Rocket. Need tööriistad teevad kõik sama asja. Nad tihendavad tekstifaile, võtavad koodi kokku ja loovad vajaduse korral staatilise lehe koopia.

See võimaldab külastajal lehte kiiresti üles kutsuda.

Staatilised leheküljed meenutavad kunagist html-koodi. Veebilehed, mis koosnevad lihtsast html-koodist ja piltidest, on endiselt kõige kiiremad. Aga mitte dünaamiline. Nende pistikprogrammidega luuakse vahemälu alati uuesti, kui lehel on midagi muutunud.

Vihje: Lülitage välja WordPress cronjob. See ei ole tegelikult cronjob tegelikus mõttes, kuid seda kutsutakse alati, kui külastaja tuleb lehele. Kuidas see toimib, näitame teile teises artiklis.

Google Pagespeed Insights

Kui sisestate oma praeguse veebisaidi Google'isse ja vaatate tulemuslikkust.

Tavaliselt saate esimesed väärtused kollase ala nii 85, kui veebimajutaja on hea server.

Meie vaikimisi paigaldamisel näitas PSI töölaua vaates 85/100.

 laius=

Mõnevõrra eksitav on aga väide, et server on aeglaselt vastanud. Siinkohal on mõeldud aega esimese baitini, mis kantakse üle.

Siin on väga palju tegureid, mis mõjutavad üksteist. Sageli vähendate nn TTFB (time to first byte), kui fikseerite kõik muud punktid.

 laius=

Google pakub mugavalt paljude punktide jaoks optimeeritud koodi allalaadimiseks. Soovitan siinkohal, kuid põhimõtteliselt ainult eelnevalt optimeeritud pilte integreerida veebilehele.

Seda saab isegi tasuta teha nt. Tinypng Panda teha.

tinypng pildi tihendamine
Tinypng.com Panda sööb üleliigsed baitid ära.

Kuid enamik teemasid loob ka oma eri suurusega pilte, seega on alati vaja optimeerida.

Seetõttu on soovitatav aeg-ajalt lihtsalt kõik veebiserveris olevad pildifailid uuesti optimeerida ja üle kirjutada.

Pingdom, GTMetrix ja Co.

Loomulikult on olemas ka teisi katsekohti. Siin on aga sageli probleemiks see, et päring toimub välismaalt ja ei ole seetõttu piisavalt sisukas, et simuleerida tavalist külastajat Saksamaalt. Samuti on oluline teada, et mõned kontrolliprogrammid ei saa hakkama http/2-ga ja ei arvesta http/s eeliseid, st andmete paralleelset edastamist ühe ühenduse kaudu, ning tõlgendavad seda negatiivselt.

gtmetrix
GTMetrixi tulemuslikkuse aruanne

TTFB või kogu laadimisaeg?

Põhimõtteliselt loeb kogu laadimisaja tulemus. Esimene bait sõltub paljudest teguritest, mida saab mõjutada ainult halvasti. Pakkimata lehel on tavaliselt väga madal TTFB-väärtus kui täiuslikult pakitud lehel. Kuid kogu laadimisaeg koos pakkimisega on muidugi kiirem, kui lehel on palju sisu. Kuidas google seda lõppkokkuvõttes hindab, on udune. Meil endal on leheküljed, mis laadivad aeglaselt, sest tarkvara on vananenud ja nende PSI väärtus on 68. 28K orgaanilised märksõnad toovad veebilehele umbes 1000 külastajat päevas. Kuid võrreldavate lehekülgede puhul on paremate väärtustega lehekülg kindlasti kõrgemal.

CDN ja kiirendusmoodulid

On ka mooduleid, mis salvestavad staatilisi andmeid teistes serverites ja edastavad neid sõltuvalt külastaja asukohast. See vähendab serveriühenduste arvu ja seega ka nn TTFB. Siin saate kasutada akamai, cloudflare'i või incapsula vahemälusid, mis pakuvad ka pakkimist ja optimeerimist sõltuvalt broneeritud teenusest. Väike (D)Dos kaitse on samuti lisatud, tingimusel et ühendus toimub täielikult nende teenusepakkujate kaudu.

cloudflare-web-traffic-overview
Cloudflare'i liiklusanalüüs

Speedkit Pleskile

Näiteks on olemas Pleski jaoks plugin, mis muudab veebilehe paari klikiga kiiremaks. Minu testis oli aga täpselt vastupidi. Peamine probleem selliste pluginate puhul on see, et vahemälu käivitub alles siis, kui külastaja vaatab lehte teist korda või loob süsteemiga esimest korda ühenduse.

Eeliseks on see, et saate kogu asja lihtsalt aktiveerida, tegemata mingeid muudatusi oma süsteemis. Aga puudus on siis vaid pigem kiiruse puudumine 1 vaate külastajatega. Sel põhjusel ei näe ka tavaliste kontrolliprogrammide puhul mingeid muutusi, sest nad külastavad lehte alati ilma vahemälu salvestamata nagu täiesti uus kasutaja.

speedkit-website-accelerator-plesk
Speedkit for Plesk peaks tegema veebilehed kiiremaks. Kuid see ei toimi alati.

Kuna enamik külastajaid jõuab lehele sageli ainult otsingumootori lingi kaudu, ei anna see neile külastajatele mingit kiiruse eelist. Pardal olevate tööriistadega saab üsna hästi hakkama ilma välise vahemäluta. Ka andmekaitse, eriti DSGVO ja eelseisva e-privaatsuse määruse seisukohast ei ole selliste teenuste kasutamine sobiv. Nende teenuste tellimisel puudub juba praegu leping tellimusandmete töötlemise kohta.

Nii muudad sa veebilehe kiiremaks.

Kõige olulisem punkt: õige veebihosteri valik.

Väljastpoolt vaadates teevad nad kõik Veebimajutuse pakkuja sama. Kuid erinevus on nii sageli varjatud.

On veebimajutusteenuseid, mis reklaamivad tuumade ja spetsiaalsete ressurssidega, kuid siis töötab see kõik ainult väga nõrgal riistvaral. Väike AMD tuum 10 aastat vanast serverist ei ole sama, mis uusima versiooni Intel Platinum Xeoni tuum.

vmware_cluster
VMWare klastri näide

Enamik teenusepakkujaid virtualiseerib tänapäeval ka kogu oma infrastruktuuri. Sageli kummaliste struktuuride, näiteks konteinersüsteemide puhul, kus kliendi poolt broneeritud südamikud olid broneeritud ka 20 teise kliendi poolt. Hea ja kuna tarkvara litsentsi kulud kallis pakkujad kasutavad korralikku virtualiseerimise süsteemid nagu vmware või KVM, tavaliselt nimetatakse pilve.

kvm_cluster
Väike KVM-klaster

Sageli piisab jagatud hostingust. Oleme ise ehitanud veebilehti, millel on kümneid tuhandeid külastajaid kuus. Need töötavad ka väikesel hostingukontol, sest veebimajutusmasinad on tavaliselt juba teenusepakkuja poolt väga suure suurusega, nii et nad suudavad teenindada sadu veebisaite.

virtuozzo_cluster
Virtuozzo 7 sõlme vaade

Enamik veebilehti ei vaja siiski broneeritud energiat, nii et energiat jääb alati palju üle.

Veebimajutuse valimisel veenduge lihtsalt, et teil on testkonto ja laadige oma veebisait sinna ilma kohustuseta üles. Tavaliselt saab neile ligi alamdomeeni kaudu ja testida kiirust. Kui see ei ole midagi, vahetage lihtsalt teise teenusepakkuja vastu.

Selles näites on demoleht SEO server webhoster.de AG, kus saate Plesk edasimüüja konto koos 10 IP-aadressiga oma projektide jaoks.

Kasutatav riistvara on Dell R740 server koos MLC serveri SSD-dega raid-massiivina.

Juhtimisliides on Plesk Onyx praeguses versioonis.

Installeeriti tavaline WordPress koos järgmiste aktiivsete pistikprogrammidega:

  • Amazon Affiliate WordPressi jaoks
  • JärgmineSkriptid: SNAP Pro uuendamise abimees
  • JärgmineSkriptid: Sotsiaalvõrgustike automaatne plakat
  • SEO Smart Links Business
  • Lühikoodid Ultimate
  • Sisukord pluss
  • The7 Elements
  • WPBakery Page Builderi lõplikud lisad
  • WPBakery lehekülje ehitaja
  • Yoast SEO Premium
  • WP Rocket

Disaini mall

Teemana kasutatakse teemat 7.

Lehe kujundus koosneb teema või leheehitaja mallidest. Alamlehtedel on tavaliselt 2500-3000 sõna ning palju pilte ja tabeleid.

Seetõttu on alati oluline kontrollida mitte ainult kodulehte, vaid ka alamlehti.

Meie demo saidi nimi on www.super-food.de ja on samuti kättesaadav selle domeeni all. Nii et saate kõiki teste ise kontrollida. Teises artiklis näitame lihtsalt, kuidas ehitada lühikese ajaga ja väheste ressurssidega suur veebileht. Võib-olla on see ka midagi teie jaoks. Veebilehte kopeeritakse aeg-ajalt testimise eesmärgil teistesse süsteemidesse.

Veebiserveri seadistamine Pleski kaudu

Kõigepealt tuleb veebiserver seadistada Pleski kaudu. Alati soovitatakse kasutada nginx'i kui puhast veebiserverit. Aga me ei tee seda, sest sisuliselt ei toetata .htaccess-faile ja enamikku WordPressi pistikprogrammide funktsioone saab teisendada ainult suurema vaevaga, muidu on need ebaefektiivsed. Ka sellest ei tulene mingit kiiruse eelist.

plesk-dashboard-domain
Plesk Dashboard domeeni jaoks

PHP seaded Pleskis

Me kasutame praegust php versiooni 7.2.9 vaikimisi seadistustega. Menüüpunktis PHP-seaded saate tavaliselt ise määrata valikuid. Kui mitte, peab seda tegema veebimajutuse pakkuja.

plesk-php-version-set-with-apache
PHP seaded Pleski menüüs. PHP FPM koos Apache veebiserveriga.

Apache & nginx'i seaded

Nginxi või Apache'i seadetes seame ainult teenusepakkuja poolt juba etteantud väärtused. Seega ei ole midagi erilist. Siin on sümboolsed lingid ainult turvalisuse kaalutlustel välja lülitatud ja vaikimisi kompressioon on lubatud.

 laius=

nginx me ainult kui proxy server Intelligent töötlemine staatiliste failide. Põhimõtteliselt saab ka täiesti ilma nginxita hakkama. Kuid siis ei tööta http/2 enam ja tekivad muud probleemid. Seega jätame kogu asja vaikimisi väärtustega.

WordPressi armatuurlaud

Meie demoleht töötab tegelikult juba üsna hästi. Aga jõuda 100/100 me peame mõned muudatused nagu minification, nii kokkuvõte CSS ja Javascript nagu Google meeldib soovitada.

Tavaliselt ei saa seda kõike ise kokku kopeerida, kuid on olemas kasulikud abivahendid, mis teevad seda tööd.

Selles testis kasutame pluginat WP-Rocket. Kuid seda saavad teha ka enamik teisi.

wp-rocket-dashboard
WP-Rocket armatuurlaud

Seadistustes, jaotises File Optimization, klõpsame lihtsalt kõikidel elementidel, välja arvatud http/2 jaoks kahjulikud seaded. Need on CSS-failide jaoks "Minifitseeri CSS" ja "Optimeeri CSS kuvamist„.

css-minify
WP Rocket CSS minimeerimine

Javascript'i seadetes tuleb muuta seaded "Minify Javascript" ja "Javascripti hilinenud laadimine", samuti "Turvaline režiim jQuery jaoks (soovitatav)".

javascript-minify
WP Rocket Javascript seaded

See oli see juba peaaegu. Koos pluginaga tõuseb lehekülg PSI väärtuses 94/100. Nüüd puuduvad vaid mõned väiksemad pildifailide või CSS-koodi optimeerimised, mis olid kuidagi nn lapsteemas mitte kokku surutud. Mugavalt pakub google neid faile, kuid optimeeritud, nii et saate neid lihtsalt failihalduri kaudu asendada.

Sellisel juhul suutsime siiski vahetada teema muudetud pilte ja paigutada CSS- ja Javascript-faili lapse teemasse.
Siis puudus ainult väike ümberlaadimine, et loodetud 100/100 pärast kõiki optimeerimisi oli tehtud.

pagespeed-insights

lehekülje kiirus-100-100-100
Google Pagespeed Insights läbis 100/100.

Loodame, et meie väike õpetus aitas teid optimeerimisel. Nii et kõik on võimalik. Kuid asjad muutuvad ka iga päev. Seepärast peate oma WordPressi alati ajakohasena hoidma, sest muidu ei toetata enam uusi funktsioone.

Täieliku video leiate peagi meie Youtube'i kanalilt.

 

 

Praegused artiklid