Kuvat, PHP ja muita nopeusvoittoja

Moduuli 6: Nopeus · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat toteuttaa suurimmat jäljellä olevat nopeusparannukset ja mitata niiden vaikutuksen.

Keskeiset käsitteet: kuvien optimointi, WebP ja AVIF, lazy loading, LCP-kuva, fetchpriority, PHP-versio, tietokannan siivous (versiot, transientit, autoload), WP-Cron, oikea cron, DISABLE_WP_CRON, ulkoiset fontit, Heartbeat

Etene oikeassa järjestyksessä

Sivuvälimuistin (oppitunti 6.2) jälkeen nämä parannukset tuottavat eniten hyötyä suhteessa vaivannäköön, suunnilleen tässä järjestyksessä:

1. kuvat kuntoon;
2. ajan tasalla oleva PHP-versio;
3. vähemmän ulkoisia osia ja raskaita lisäosia;
4. siivottu tietokanta;
5. ajastetut tehtävät oikealla cronilla.

Mittaa ennen ja jälkeen jokaista vaihetta (oppitunti 6.1), muuten et tiedä mikä auttoi. Ja tee yksi asia kerrallaan.

Kuvat: suurin voitto selaimessa

Useimmilla sivuilla kuvat muodostavat suurimman osan siitä, mitä kävijä lataa. Oppitunnissa 4.4 opitut asiat maksavat itsensä takaisin tässä:

• Oikea koko: älä lataa kuvaa suurempana kuin tarpeen ja anna WordPressin tarjota pienempiä kokoja srcset-attribuutin kautta.
• Pakkaus ja formaatti: WebP on yleensä selvästi pienempi kuin JPEG samalla laadulla; AVIF usein vielä pienempi. Lisäosa voi muuntaa olemassa olevat kuvat ja tarjota pienemmän version selaimille, jotka tukevat sitä. Tarkista, tapahtuuko muunnos omalla palvelimellasi vai ulkoisessa palvelussa.
• Lazy loading, mutta ei kaikkeen. WordPress antaa kuville automaattisesti loading="lazy"-määrityksen, paitsi ensimmäiselle suurelle kuvalle sivun yläosassa. Tämä kuva on usein LCP-elementti (oppitunti 6.1): suurin sisältöosa, jonka kävijä näkee ensimmäisenä. Jos se ladataan lazy-tavalla, selain odottaa sen kanssa turhaan ja LCP-arvo huononee. Siksi WordPress antaa LCP-ehdokkaalle usein fetchpriority="high"-määrityksen, jotta selain hakee sen ensimmäisenä.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Korjaamo, jossa polkupyörät rivissä">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Tiimi kaupan edessä">

Yksi sudenkuoppa: jotkin teemat, sivunrakentajat ja optimointilisäosat asettavat lazy loadingin myös ensimmäiselle kuvalle, tai lataavat suuren kuvan taustakuvana CSS:n kautta (joka havaitaan vasta myöhemmin). PageSpeed Insightsin LCP-osiosta näet, mikä elementti on kyseessä ja ladataanko se lazy-tavalla.

PHP: ilmaista nopeutta

Jokainen uusi PHP:n pääversio on edellistä nopeampi, ja WordPress-sivustot hyötyvät siitä suoraan, ilman mitään muutoksia sivustoon. Lisäksi vanhat versiot eivät enää saa tietoturvapäivityksiä (oppitunti 8.4). Kun vaihdat versiota, tarkista että lisäosat ja teema tukevat uutta versiota, ja tee se mieluiten ensin testiympäristössä.

Katso PHP-asetuksista myös:

• OPcache: on useimmilla webhotelleilla oletuksena päällä. Yksi seuraus: muutetun PHP-tiedoston uusi versio voi näkyä vasta hetken kuluttua.
• memory_limit: liian matala aiheuttaa virheitä raskailla sivuilla; hyvin korkea ei tee sivustosta nopeampaa.

Ulkoiset osat ja raskaat lisäosat

Jokainen toisen osapuolen osa on ylimääräinen yhteys ja ylimääräinen odotusaika: ulkoisen palvelun fontit, upotettu video, chat-widget, mittauskoodit, sosiaalisen median painikkeet, kartta. Kysymyksiä jokaista osaa kohden:

• Onko se tarpeen? Videon, jota lähes kukaan ei katso, voi korvata kuvalla ja linkillä.
• Voiko sen tehdä paikallisesti? Fontit voi yleensä laittaa omalle palvelimelle (lisäosalla tai theme.json-tiedoston kautta lohkoteemassa). Se säästää yhden yhteyden ja on parempi yksityisyyden kannalta (oppitunti 9.3).
• Voiko sen ladata myöhemmin? Chat-widget tai video voi latautua vasta klikkauksen jälkeen.

Lisäosien kohdalla auttaa mittaaminen X-Ray-työkalulla (webhotelleissa, joissa on CloudLinux) tai lisäosalla kuten Query Monitor (laita päälle tilapäisesti, näkyy vain ylläpitäjille). Ne näyttävät, mikä lisäosa vie eniten tietokantakyselyitä tai aikaa.

Tietokannan siivous

Tietokanta kasvaa asioista, joita et näe:

• Versiot (oppitunti 4.1): jokainen tallennettu versio jokaisesta sivusta. Rajoita niitä WP_POST_REVISIONS-vakiolla ja siivoa vanhat pois.
• Roskapostiksi merkityt ja roskakorissa olevat kommentit, sekä roskakorissa olevat artikkelit.
• Transientit: lisäosien väliaikaiset tiedot wp_options-taulussa, joita ei aina siivota pois.
• Autoload: asetukset wp_options-taulussa, joissa autoload on päällä, ladataan kerralla jokaisella pyynnöllä. Lisäosat, jotka olet jo kauan sitten poistanut, voivat jättää jälkeensä suuria määriä tällaisia tietoja. Sivuston eheys (oppitunti 5.4) varoittaa, jos autoload-tiedot ovat hyvin suuria.
• Lisäosien lokitaulut (tilastot, tietoturvalokit, sähköpostilokit), joita ei koskaan tyhjennetä.

Siivous onnistuu siivouslisäosalla, WP-CLI:llä (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), tai phpMyAdminin taulujen optimointitoiminnolla. Ota aina ensin varmuuskopio. Älä poista mitään, jonka tarkoitusta et tunne.

Ajastetut tehtävät: WP-Cron

WordPressissä on tehtäviä, joiden täytyy käynnistyä tiettynä ajankohtana: ajastetun artikkelin julkaiseminen, päivitysten tarkistus, varmuuskopiointilisäosan toiminta. Tätä kutsutaan nimellä WP-Cron. Oletuksena WP-Cron ei toimi kellon mukaan, vaan kävijän vierailun yhteydessä: jokaisella sivupyynnöllä WordPress tarkistaa, onko jokin tehtävä valmiina suoritettavaksi. Kaksi haittaa:

• Vähäisellä kävijämäärällä tehtävät käynnistyvät liian myöhään (ajastettu artikkeli ilmestyy vasta ensimmäisen sen jälkeisen vierailun yhteydessä).
• Suurella kävijämäärällä tarkistus tehdään hyvin usein, ja raskas tehtävä voi juuri silloin hidastaa kävijän sivulatausta.

Parempi vaihtoehto: poista WP-Cron käytöstä vierailujen yhteydessä ja anna palvelimen oikean cronjobin ajaa se viiden tai kymmenen minuutin välein. Lisää wp-config.php-tiedostoon (ennen tekstiä "stop met bewerken"):

define( 'DISABLE_WP_CRON', true );

Ja webhotellipaneelisi cron-näkymään tehtävä, 10 minuutin välein:

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

PHP:n ja sivustosi polku vaihtelevat webhotellin mukaan; katso paneelisi ohjeista. Tai käytä WP-CLI:tä: wp cron event run --due-now. Tarkista jälkikäteen Sivuston eheydestä, ettei ajastettuja tehtäviä ole jäänyt jälkeen.

Heartbeat ja hallinta

WordPressin ohjausnäkymä keskustelee palvelimen kanssa 15 60 sekunnin välein niin kauan kuin se on auki (Heartbeat): automaattista tallennusta varten, ilmoittaakseen että joku muu muokkaa samaa artikkelia, ja ilmoituksia varten. Jos pidät kymmentä hallinnan välilehteä auki koko päivän, se tarkoittaa tuhansia pyyntöjä. Sulje välilehdet, joita et käytä. Jotkin välimuistilisäosat voivat hidastaa Heartbeatia; sen kokonaan sammuttaminen ei ole tarpeen ja rikkoo automaattisen tallennuksen.

Yhteenveto

• Sivuvälimuistin jälkeen: kuvat, PHP-versio, ulkoiset osat ja lisäosat, tietokanta, cron. Mittaa ennen ja jälkeen, yksi vaihe kerrallaan.
• Lazy loading kaikkeen paitsi suureen kuvaan yläosassa; se saa mieluummin fetchpriority="high"-määrityksen.
• Uudempi PHP-versio on ilmaista nopeutta, kunhan lisäosat tukevat sitä.
• Siivoa versiot, transientit, roskaposti ja suuret autoload-tiedot, aina varmuuskopion kanssa.
• Aseta WP-Cron toimimaan oikealla cronjobilla käyttäen DISABLE_WP_CRON-vakiota ja paneelisi tehtävää.

Tietovisa

Tehtävä

Tehtävä A6.3: Lazy loading ja kuvakoot etusivullasi. Syötä sivustosi osoite. Ohjelma lukee etusivun ja tarkastelee kuvia: puuttuuko ensimmäisestä suuresta kuvasta loading="lazy" (ja onko siinä mieluiten fetchpriority="high"), onko muilla kuvilla lazy loading käytössä, ja kuinka suuri osa kuvista on WebP- tai AVIF-muodossa?

Tehtävä D6.3: Ennen ja jälkeen. Mittaa sivustosi yksi sivu kolme kertaa PageSpeed Insightsillä (mobiili) ja kirjaa ylös keskimmäinen LCP, INP (tai laboratorioarvo Total Blocking Time, jos kenttädataa ei ole), CLS ja tehtävässä A6.1 saatu TTFB. Toteuta sen jälkeen yksi tämän oppitunnin parannuksista (kuvat, PHP-versio, ulkoisen osan poisto, tietokannan siivous tai oikea cron). Mittaa uudelleen kolme kertaa ja kirjaa uudet arvot. Kuvaile, mitä teit ja onko ero suurempi kuin mittausten välinen tavanomainen vaihtelu.

Lue lisää

Nämä artikkelit kuvaavat vaiheet WebOkén paneeleissa; muissa paneeleissa toiminta on vastaavaa.

• DirectAdmin-ohje 14.1: PHP-version valinta (Select PHP version)
• DirectAdmin-ohje 12.7: Tietokannan tarkistaminen, korjaaminen ja optimointi
• DirectAdmin-ohje 15.1: Cron Jobs: tehtävien automaattinen ajaminen
• Cronjobin tai ajastetun tehtävän luominen (ja mitä tehdä, jos se ei toimi)
• DirectAdmin-ohje 17.4: X-Ray: hitaiden sivujen jäljittäminen
• WP-Cronin yhdistäminen järjestelmän croniin (developer.wordpress.org, englanniksi): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading ja LCP (web.dev, englanniksi): https://web.dev/articles/lcp-lazy-loading