Billeder, PHP og andre hastighedsgevinster

Modul 6: Hastighed · Læsetid: 9 minutter

Læringsmål: Efter denne lektion kan du gennemføre de største resterende hastighedsgevinster og måle effekten af dem.

Nøglebegreber: billedoptimering, WebP og AVIF, lazy loading, LCP-billedet, fetchpriority, PHP-version, oprydning af database (ændringer, transients, autoload), WP-Cron, rigtig cron, DISABLE_WP_CRON, eksterne skrifttyper, Heartbeat

Arbejd i den rigtige rækkefølge

Efter en sidecache (lektion 6.2) er det her de gevinster, der giver mest, nogenlunde i rækkefølge efter indsats i forhold til effekt:

1. billeder i orden;
2. en opdateret PHP-version;
3. færre eksterne elementer og tunge plugins;
4. en oprenset database;
5. planlagte opgaver på en rigtig cron.

Mål før og efter hvert trin (lektion 6.1), ellers ved du ikke, hvad der hjalp. Og gør én ting ad gangen.

Billeder: den største gevinst i browseren

På de fleste sider udgør billeder den største del af det, en besøgende downloader. Det du lærte i lektion 4.4, betaler sig her:

• Korrekt størrelse: upload ikke større end nødvendigt, og lad WordPress tilbyde mindre formater via srcset.
• Komprimering og format: WebP er som regel betydeligt mindre end JPEG ved samme kvalitet; AVIF er ofte endnu mindre. Et plugin kan konvertere eksisterende billeder og give den mindre version til browsere, der understøtter det. Kontroller om konverteringen sker på din egen server eller hos en ekstern tjeneste.
• Lazy loading, men ikke for alt. WordPress giver automatisk billeder loading="lazy", undtagen det første store billede øverst. Det billede er ofte LCP-elementet (lektion 6.1): den største stykke indhold, den besøgende ser først. Hvis det indlæses lazy, venter browseren netop med det, og din LCP bliver dårligere. WordPress giver derfor ofte LCP-kandidaten fetchpriority="high", så browseren henter den først.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Værksted med cykler på række">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Teamet foran butikken">

En faldgrube: nogle temaer, sidebyggere og optimeringsplugins sætter lazy loading på selv det første billede, eller indlæser det store billede som baggrund via CSS (det bliver opdaget senere). I PageSpeed Insights kan du under punktet LCP se, hvilket element det er, og om det indlæses lazy.

PHP: gratis hastighed

Hver ny stor version af PHP er hurtigere end den forrige, og WordPress-websteder nyder direkte godt af det, uden at du skal ændre noget på dit websted. Derudover får gamle versioner ikke længere sikkerhedsopdateringer (lektion 8.4). Når du skifter, så kontroller om dine plugins og dit tema understøtter den nye version, og gør det helst først i et testmiljø (staging).

Kig også på følgende i PHP-indstillingerne:

• OPcache: er som regel slået til som standard hos de fleste hosts. En konsekvens: en ændret PHP-fil kan tage lidt tid, før PHP bruger den nye version.
• memory_limit: for lav giver fejl på tunge sider; meget høj gør ikke dit websted hurtigere.

Eksterne elementer og tunge plugins

Hvert element fra en anden part er en ekstra forbindelse og en ekstra ventetid: skrifttyper fra en ekstern tjeneste, en indlejret video, en chatwidget, målekoder, sociale medie-knapper, et kort. Spørgsmål til hvert element:

• Er det nødvendigt? En video, som næsten ingen afspiller, kan også være et billede med et link.
• Kan det ligge lokalt? Skrifttyper kan du som regel lægge på din egen server (med et plugin eller via theme.json ved et bloktema). Det sparer en forbindelse og er bedre for dit privatliv (lektion 9.3).
• Kan det vente? En chatwidget eller video kan først indlæses efter et klik.

Ved plugins hjælper det at måle med X-Ray (ved hosting med CloudLinux) eller med et plugin som Query Monitor (slå midlertidigt til, kun synligt for administratorer). De viser, hvilket plugin der koster flest databaseforespørgsler eller mest tid.

Oprydning af databasen

En database vokser med ting, du ikke ser:

• Ændringer (lektion 4.1): hver gemte version af hver side. Begræns dem med WP_POST_REVISIONS og ryd gamle op.
• Spam- og papirkurvskommentarer, og indlæg i papirkurven.
• Transients: midlertidige data fra plugins i wp_options, som nogle gange ikke bliver ryddet op.
• Autoload: indstillinger i wp_options med autoload slået til bliver indlæst samlet ved hver forespørgsel. Plugins, du har fjernet for længe siden, efterlader nogle gange store mængder data her. Webstedshelbred (lektion 5.4) advarer, hvis autoload-data er meget store.
• Logtabeller fra plugins (statistik, sikkerhedslogs, e-maillogs), som aldrig bliver tømt.

Oprydning kan ske med et oprydningsplugin, med WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), eller med optimeringsfunktionen i phpMyAdmin til selve tabellerne. Altid en backup først. Fjern aldrig noget, du ikke ved, hvad er.

Planlagte opgaver: WP-Cron

WordPress har opgaver, der skal køre på et bestemt tidspunkt: at udgive et planlagt indlæg, tjekke for opdateringer, lade et backupplugin arbejde. Det kaldes WP-Cron. Som standard kører WP-Cron ikke på et klokkeslæt, men ved et besøg: ved hver sideanmodning kigger WordPress efter, om der er en opgave klar. To ulemper:

• Ved få besøgende kører opgaver for sent (et planlagt indlæg dukker først op ved det næste besøg).
• Ved mange besøgende bliver der kigget meget ofte, og en tung opgave kan netop forsinke siden for en besøgende.

Bedre: slå WP-Cron fra ved besøg og lad en rigtig cronjob på serveren køre det hvert femte eller tiende minut. I wp-config.php (over "det er nok, stop med at redigere"):

define( 'DISABLE_WP_CRON', true );

Og på cron-siden i dit hostingpanel en opgave, hvert 10. minut:

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

Stien til PHP og til dit websted varierer fra host til host; se i vejledningen til dit panel. Eller brug WP-CLI: wp cron event run --due-now. Kontroller bagefter i Webstedshelbred, at der ikke er forsinkede planlagte opgaver.

Heartbeat og kontrolpanelet

Kontrolpanelet i WordPress taler, så længe det er åbent, med serveren hvert 15. til 60. sekund (Heartbeat): til automatisk gemning, for at melde at en anden redigerer det samme indlæg, og til notifikationer. Lader du ti faneblade med kontrolpanelet stå åbne hele dagen, bliver det til tusindvis af forespørgsler. Luk faneblade, du ikke bruger. Nogle cacheplugins kan sænke farten på Heartbeat; at slå den helt fra er ikke nødvendigt og ødelægger den automatiske gemning.

Opsummering

• Efter sidecachen: billeder, PHP-version, eksterne elementer og plugins, database, cron. Mål før og efter, ét trin ad gangen.
• Lazy loading til alt undtagen det store billede øverst; det bør hellere have fetchpriority="high".
• En nyere PHP-version er gratis hastighed, forudsat at dine plugins kan følge med.
• Ryd op i ændringer, transients, spam og store autoload-data, altid med en backup.
• Sæt WP-Cron på en rigtig cronjob med DISABLE_WP_CRON og en opgave i dit panel.

Quiz

Opgave

Opgave A6.3: Lazy loading og formater på din forside. Indtast adressen på dit websted. Programmet læser forsiden og kigger på billederne: mangler det første store billede loading="lazy" (og helst har fetchpriority="high"), har billederne længere nede lazy loading, og hvor stor en del af billederne er WebP eller AVIF?

Opgave D6.3: Før og efter. Mål en side på dit websted tre gange i PageSpeed Insights (mobil) og noter den midterste LCP, INP (eller labværdien Total Blocking Time, hvis der ikke er feltdata), CLS og TTFB fra opgave A6.1. Gennemfør derefter én forbedring fra denne lektion (billeder, PHP-version, fjern et eksternt element, ryd databasen op eller en rigtig cron). Mål igen tre gange og noter de nye værdier. Beskriv hvad du har gjort, og om forskellen er større end den normale variation mellem målinger.

Læs mere

Disse artikler beskriver trinene i panelerne hos WebOké; i andre paneler fungerer det på lignende måde.

• DirectAdmin vejledning 14.1: Sådan vælger du PHP-version (Select PHP version)
• DirectAdmin vejledning 12.7: Kontrollere, reparere og optimere en database
• DirectAdmin vejledning 15.1: Cron-jobs: lad opgaver køre automatisk
• Opret en administrer cronjob (og hvad du skal gøre, hvis den ikke kører)
• DirectAdmin vejledning 17.4: X-Ray: find langsomme 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