Pildid, PHP ja muud kiirusevõidud

Moodul 6: Kiirus · Lugemisaeg: 9 minutit

Õpieesmärk: Pärast seda õppetundi oskad rakendada suurimaid järelejäänud kiirusevõite ja mõõta nende mõju.

Põhimõisted: pildioptimeerimine, WebP ja AVIF, lazy loading, LCP-pilt, fetchpriority, PHP versioon, andmebaasi korrastamine (versioonid, transients, autoload), WP-Cron, tõeline cron, DISABLE_WP_CRON, välised fondid, Heartbeat

Tööta õiges järjekorras

Pärast leheküljecache'i (õppetund 6.2) on need võidud, mis annavad kõige rohkem tulemust, umbes vaeva ja mõju suhte järjekorras:

1. pildid korda;
2. ajakohane PHP versioon;
3. vähem väliseid komponente ja raskeid pluginaid;
4. korrastatud andmebaas;
5. plaanitud ülesanded tõelisel cronil.

Mõõda enne ja pärast iga sammu (õppetund 6.1), muidu ei tea sa, mis aitas. Ja tee üks asi korraga.

Pildid: suurim võit brauseris

Enamikul lehtedel moodustavad pildid suurima osa sellest, mida külastaja alla laadib. See, mida sa õppisid õppetunnis 4.4, tasub end siin ära:

• Õige suurus: ära lae üles suuremat kui vaja ja lase WordPressil srcset'i kaudu pakkuda väiksemaid formaate.
• Tihendus ja formaat: WebP on sama kvaliteedi juures tavaliselt palju väiksem kui JPEG; AVIF sageli veelgi väiksem. Plugin võib olemasolevad pildid ümber teisendada ja anda väiksema versiooni brauseritele, mis seda toetavad. Kontrolli, kas teisendamine toimub sinu enda serveris või välises teenuses.
• Lazy loading, aga mitte kõige jaoks. WordPress annab piltidele automaatselt loading="lazy", välja arvatud esimesele suurele pildile lehe ülaosas. See pilt on sageli LCP element (õppetund 6.1): suurim sisuosa, mille külastaja esimesena näeb. Kui seda laaditakse laisalt, ootab brauser just sellega ja su LCP muutub halvemaks. Seetõttu annab WordPress LCP-kandidaadile sageli fetchpriority="high", et brauser tooks selle esimesena.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Töökoda, kus rattad on reas">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Meeskond poe ees">

Üks lõks: mõned teemad, lehekoostajad ja optimeerimispluginad panevad lazy loading'u ka esimesele pildile või laadivad suure pildi taustana CSS kaudu (seda avastatakse hiljem). PageSpeed Insightsis näed LCP osas, milline element see on ja kas seda laaditakse laisalt.

PHP: tasuta kiirus

Iga uus PHP suurversioon on eelmisest kiirem ja WordPressi saidid saavad sellest otsekohe kasu, ilma et peaksid oma saidil midagi muutma. Lisaks ei saa vanad versioonid enam turvauuendusi (õppetund 8.4). Kui lähed üle, kontrolli, kas su pluginad ja teema toetavad uut versiooni, ja tee seda kõigepealt eelistatavalt testkeskkonnas (staging).

Vaata PHP seadete juures ka järgmist:

• OPcache: on enamikul majutajatel vaikimisi sees. Üks tagajärg: muudetud PHP-fail võib natuke aega võtta, enne kui PHP kasutab uut versiooni.
• memory_limit: liiga madal annab raskete lehtede puhul vigu; väga kõrge ei tee su saiti kiiremaks.

Välised komponendid ja rasked pluginad

Iga teise osapoole komponent on lisaühendus ja lisaooteaeg: fondid väliselt teenuselt, sisseehitatud video, vestlusvidin, mõõtmiskoodid, sotsiaalmeedia nupud, kaart. Küsimused iga komponendi kohta:

• Kas see on vajalik? Video, mida peaaegu keegi ei vaata, võib olla ka pilt koos lingiga.
• Kas see saab olla lokaalne? Fonte saab enamasti panna oma serverisse (pluginaga või plokiteema puhul theme.json kaudu). See hoiab kokku ühe ühenduse ja on parem sinu privaatsusele (õppetund 9.3).
• Kas see saab laaditud olla hiljem? Vestlusvidin või video saab laadida alles pärast klikki.

Pluginate puhul aitab mõõtmine X-Ray abil (CloudLinuxiga majutuse puhul) või pluginaga nagu Query Monitor (lülita ajutiselt sisse, nähtav ainult haldajatele). Need näitavad, milline plugin kulutab kõige rohkem andmebaasipäringuid või aega.

Andmebaasi korrastamine

Andmebaas kasvab asjadega, mida sa ei näe:

• Versioonid (õppetund 4.1): iga salvestatud versioon igast lehest. Piira neid WP_POST_REVISIONS abil ja korista vanad ära.
• Rämps- ja prügikasti kommentaarid ning prügikastis olevad postitused.
• Transients: pluginate ajutised andmed wp_options tabelis, mida mõnikord ei korrastata.
• Autoload: valikud wp_options tabelis, millel on autoload sees, laaditakse igal päringul korraga. Pluginad, mille oled ammu eemaldanud, jätavad sinna mõnikord suuri andmehulki. Saidi tervis (õppetund 5.4) hoiatab, kui autoload-andmed on väga suured.
• Logitabelid pluginatelt (statistika, turvalogid, e-posti logid), mida kunagi ei tühjendata.

Korrastada saab korrastusplugina, WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force) või phpMyAdmini tabelite optimeerimisfunktsiooniga. Alati enne varukoopia. Ära eemalda midagi, millest sa ei tea, mis see on.

Plaanitud ülesanded: WP-Cron

WordPressil on ülesanded, mis peavad käivituma kindlal ajal: plaanitud postituse avaldamine, uuenduste kontrollimine, varukoopiaplugina töölepanemine. Seda nimetatakse WP-Croniks. Vaikimisi ei tööta WP-Cron kella järgi, vaid külastuse peale: iga lehepäringu juures vaatab WordPress, kas mõni ülesanne on valmis. Kaks puudust:

• Vähese külastajate arvu korral käivituvad ülesanded liiga hilja (plaanitud postitus ilmub alles järgmisel külastusel).
• Suure külastajate arvu korral vaadatakse väga sageli ja raske ülesanne võib just külastaja lehte aeglustada.

Parem: lülita WP-Cron külastuste peal välja ja lase serveri tõelisel cronjob'il seda iga viie või kümne minuti tagant käivitada. Failis wp-config.php (enne „lõpeta redigeerimine"):

define( 'DISABLE_WP_CRON', true );

Ja oma majutuspaneeli cron-aknas ülesanne, iga 10 minuti tagant:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Tee PHP-ni ja sinu saidini erineb majutaja lõikes; vaata oma paneeli juhendist. Või kasuta WP-CLI-d: wp cron event run --due-now. Kontrolli hiljem Saidi tervise alt, et plaanitud ülesanded ei jääks maha.

Heartbeat ja haldus

WordPressi Töölaud räägib, kuni see on avatud, iga 15 kuni 60 sekundi tagant serveriga (Heartbeat): automaatseks salvestamiseks, et teatada, kui keegi teine muudab sama postitust, ja teavituste jaoks. Kui hoiad terve päeva avatuna kümme vahekaarti halduspaneeliga, on see tuhandeid päringuid. Sulge vahekaardid, mida sa ei kasuta. Mõned cache-pluginad saavad Heartbeati aeglustada; täielikult väljalülitamine ei ole vajalik ja see rikub automaatse salvestamise.

Kokkuvõte

• Pärast leheküljecache'i: pildid, PHP versioon, välised komponendid ja pluginad, andmebaas, cron. Mõõda enne ja pärast, üks samm korraga.
• Lazy loading kõigele peale suure pildi lehe ülaosas; see saab pigem fetchpriority="high".
• Uuem PHP versioon on tasuta kiirus, kui su pluginad seda toetavad.
• Korista versioonid, transients, rämps ja suured autoload-andmed, alati varukoopiaga.
• Pane WP-Cron tõelisele cronjob'ile koos DISABLE_WP_CRON ja ülesandega oma paneelis.

Test (quiz)

Ülesanne

Ülesanne A6.3: Lazy loading ja pildiformaadid sinu avalehel. Sisesta oma saidi aadress. Programm loeb avalehe ja vaatab pilte: kas esimesel suurel pildil puudub loading="lazy" (ja eelistatavalt on fetchpriority="high"), kas allpool olevatel piltidel on lazy loading ja milline osa piltidest on WebP või AVIF?

Ülesanne D6.3: Enne ja pärast. Mõõda ühte oma saidi lehte kolm korda PageSpeed Insightsis (mobiil) ja kirjuta üles keskmine LCP, INP (või labori väärtus Total Blocking Time, kui väljaandmeid pole), CLS ja TTFB ülesandest A6.1. Seejärel rakenda üks parendus sellest õppetunnist (pildid, PHP versioon, välise komponendi eemaldamine, andmebaasi korrastamine või tõeline cron). Mõõda uuesti kolm korda ja kirjuta üles uued väärtused. Kirjelda, mida tegid ja kas erinevus on suurem kui mõõtmiste tavapärane kõikumine.

Lisalugemist

Need artiklid kirjeldavad samme WebOké paneelides; teistes paneelides toimivad need sarnaselt.

• DirectAdmin juhend 14.1: PHP-versiooni valimine (Select PHP version)
• DirectAdmin juhend 12.7: Andmebaasi kontrollimine, parandamine ja optimeerimine
• DirectAdmin juhend 15.1: Cron Jobs: lase ülesannetel automaatselt käia
• Cronjobi ehk ülesande loomine (ja mida teha, kui see ei tööta)
• DirectAdmin juhend 17.4: X-Ray: aeglaste lehtede tuvastamine
• WP-Croni ühendamine süsteemi croniga (developer.wordpress.org, inglise keeles): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading ja LCP (web.dev, inglise keeles): https://web.dev/articles/lcp-lazy-loading