Bilder, PHP og andre hastighetsgevinster

Modul 6: Hastighet · Lesetid: 9 minutter

Læringsmål: Etter denne leksjonen kan du gjennomføre de største gjenværende hastighetsgevinstene og måle effekten av dem.

Nøkkelbegreper: bildeoptimalisering, WebP og AVIF, lazy loading, LCP-bildet, fetchpriority, PHP-versjon, rydde database (revisjoner, transients, autoload), WP-Cron, ekte cron, DISABLE_WP_CRON, eksterne skrifttyper, Heartbeat

Jobb i riktig rekkefølge

Etter en sidecache (leksjon 6.2) er dette gevinstene som gir mest, omtrent i rekkefølge etter innsats mot effekt:

1. bilder i orden;
2. en oppdatert PHP-versjon;
3. færre eksterne elementer og tunge utvidelser;
4. en ryddet database;
5. planlagte oppgaver på en ekte cron.

Mål før og etter hvert steg (leksjon 6.1), ellers vet du ikke hva som hjalp. Og gjør én ting om gangen.

Bilder: den største gevinsten i nettleseren

På de fleste sider utgjør bilder den største delen av det en besøkende laster ned. Det du lærte i leksjon 4.4, lønner seg her:

• Riktig størrelse: last ikke opp større enn nødvendig, og la WordPress tilby mindre formater via srcset.
• Komprimering og format: WebP er vanligvis betydelig mindre enn JPEG ved samme kvalitet; AVIF er ofte enda mindre. En utvidelse kan konvertere eksisterende bilder og gi den mindre versjonen til nettlesere som støtter det. Kontroller om konverteringen skjer på din egen server eller hos en ekstern tjeneste.
• Lazy loading, men ikke for alt. WordPress gir bilder automatisk loading="lazy", bortsett fra det første store bildet øverst. Det bildet er ofte LCP-elementet (leksjon 6.1): det største innholdet den besøkende ser først. Hvis det lastes lazy, venter nettleseren nettopp med det, og LCP-en din blir dårligere. WordPress gir derfor ofte LCP-kandidaten fetchpriority="high", slik at nettleseren henter det først.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Verksted med sykler på rad">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Teamet foran butikken">

En fallgruve: noen temaer, sidebyggere og optimaliseringsutvidelser setter lazy loading også på det første bildet, eller laster det store bildet som bakgrunn via CSS (det oppdages senere). I PageSpeed Insights ser du under LCP-delen hvilket element det er, og om det lastes lazy.

PHP: gratis hastighet

Hver ny hovedversjon av PHP er raskere enn den forrige, og WordPress-nettsteder drar nytte av det direkte, uten å endre noe på nettstedet ditt. I tillegg slutter gamle versjoner å få sikkerhetsoppdateringer (leksjon 8.4). Hvis du bytter versjon, kontroller at utvidelsene og temaet ditt støtter den nye versjonen, og gjør det helst først i et testmiljø (staging).

Se også på dette i PHP-innstillingene:

• OPcache: er slått på som standard hos de fleste webhotell. En konsekvens: en endret PHP-fil kan ta litt tid før PHP bruker den nye versjonen.
• memory_limit: for lav gir feil ved tunge sider; svært høy gjør ikke nettstedet raskere.

Eksterne elementer og tunge utvidelser

Hvert element fra en annen part er en ekstra tilkobling og en ekstra ventetid: skrifttyper fra en ekstern tjeneste, en innebygd video, en chat-widget, målekoder, sosiale medier-knapper, et kart. Spørsmål per element:

• Er det nødvendig? En video som nesten ingen spiller av, kan like gjerne være et bilde med en lenke.
• Kan det være lokalt? Skrifttyper kan du som regel legge på din egen server (med en utvidelse eller via theme.json ved et blokktema). Det sparer en tilkobling og er bedre for personvernet (leksjon 9.3).
• Kan det komme senere? En chat-widget eller video kan lastes først etter et klikk.

For utvidelser hjelper det å måle med X-Ray (ved webhotell med CloudLinux) eller med en utvidelse som Query Monitor (slå på midlertidig, kun synlig for administratorer). De viser hvilken utvidelse som koster mest databasespørringer eller tid.

Rydde i databasen

En database vokser med ting du ikke ser:

• Revisjoner (leksjon 4.1): hver lagrede versjon av hver side. Begrens dem med WP_POST_REVISIONS og rydd opp gamle.
• Spam- og papirkurv-kommentarer, og innlegg i papirkurven.
• Transients: midlertidige data fra utvidelser i wp_options, som noen ganger ikke blir ryddet opp.
• Autoload: innstillinger i wp_options med autoload på blir lastet i sin helhet ved hver forespørsel. Utvidelser du for lengst har fjernet, etterlater seg noen ganger store mengder data her. Nettstedshelse (leksjon 5.4) varsler hvis autoload-dataene er svært store.
• Loggtabeller fra utvidelser (statistikk, sikkerhetslogger, e-postlogger) som aldri blir tømt.

Opprydding kan gjøres med en opprydningsutvidelse, med WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), eller med optimaliseringsfunksjonen i phpMyAdmin for tabellene selv. Alltid en sikkerhetskopi først. Fjern ikke noe du ikke vet hva er.

Planlagte oppgaver: WP-Cron

WordPress har oppgaver som må kjøre på et tidspunkt: publisere et planlagt innlegg, sjekke etter oppdateringer, la en sikkerhetskopi-utvidelse jobbe. Dette kalles WP-Cron. Som standard kjører ikke WP-Cron på en klokke, men ved et besøk: ved hver sideforespørsel sjekker WordPress om en oppgave er klar. To ulemper:

• Ved få besøkende kjører oppgaver for sent (et planlagt innlegg vises først ved første besøk etterpå).
• Ved mange besøkende sjekkes det svært ofte, og en tung oppgave kan nettopp forsinke siden til en besøkende.

Bedre: slå av WP-Cron ved besøk og la en ekte cronjobb på serveren kjøre den hvert femte eller tiende minutt. I wp-config.php (over "det er nok, ikke rediger under dette"):

define( 'DISABLE_WP_CRON', true );

Og i cron-skjermen i kontrollpanelet ditt for hosting, en oppgave hvert 10. minutt:

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

Stien til PHP og til nettstedet ditt varierer fra webhotell til webhotell; se i veiledningen for kontrollpanelet ditt. Eller bruk WP-CLI: wp cron event run --due-now. Kontroller etterpå i Nettstedshelse at ingen planlagte oppgaver henger etter.

Heartbeat og administrasjonen

Kontrollpanelet i WordPress snakker, så lenge det er åpent, med serveren hvert 15. til 60. sekund (Heartbeat): for autolagring, for å melde at noen andre redigerer det samme innlegget, og for varsler. Lar du ti faner med administrasjonen stå åpne hele dagen, blir det tusenvis av forespørsler. Lukk faner du ikke bruker. Enkelte cache-utvidelser kan forsinke Heartbeat; å slå den helt av er ikke nødvendig og ødelegger autolagringen.

Oppsummering

• Etter sidecachen: bilder, PHP-versjon, eksterne elementer og utvidelser, database, cron. Mål før og etter, ett steg om gangen.
• Lazy loading for alt bortsett fra det store bildet øverst; det bør heller få fetchpriority="high".
• En nyere PHP-versjon er gratis hastighet, forutsatt at utvidelsene dine følger med.
• Rydd opp revisjoner, transients, spam og store autoload-data, alltid med en sikkerhetskopi.
• Sett WP-Cron på en ekte cronjobb med DISABLE_WP_CRON og en oppgave i kontrollpanelet ditt.

Quiz

Oppgave

Oppgave A6.3: Lazy loading og formater på forsiden din. Fyll inn adressen til nettstedet ditt. Programmet leser forsiden og ser på bildene: mangler det første store bildet loading="lazy" (og helst har fetchpriority="high"), har bildene lenger ned lazy loading, og hvor stor andel av bildene er WebP eller AVIF?

Oppgave D6.3: Før og etter. Mål en side på nettstedet ditt tre ganger i PageSpeed Insights (mobil) og noter den midterste LCP-en, INP-en (eller labverdien Total Blocking Time hvis det ikke finnes felt-data), CLS og TTFB-en fra oppgave A6.1. Gjennomfør deretter én forbedring fra denne leksjonen (bilder, PHP-versjon, fjern et eksternt element, rydd database eller en ekte cron). Mål på nytt tre ganger og noter de nye verdiene. Beskriv hva du gjorde, og om forskjellen er større enn den vanlige svingningen mellom målinger.

Les mer

Disse artiklene beskriver stegene i kontrollpanelene til WebOké; i andre kontrollpaneler fungerer de på lignende måte.

• DirectAdmin-veiledning 14.1: Velge PHP-versjon (Select PHP version)
• DirectAdmin-veiledning 12.7: En database kontrollere, reparere og optimalisere
• DirectAdmin-veiledning 15.1: Cron Jobs: la oppgaver kjøre automatisk
• Opprette cronjobb eller oppgave (og hva du skal gjøre hvis den ikke kjører)
• DirectAdmin-veiledning 17.4: X-Ray: finn trege sider
• Koble WP-Cron til systemets cron (developer.wordpress.org, engelsk): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading og LCP (web.dev, engelsk): https://web.dev/articles/lcp-lazy-loading