Bilder, PHP och annan hastighetsvinst

Modul 6: Hastighet · Lästid: 9 minuter

Lärandemål: Efter den här lektionen kan du genomföra de största återstående hastighetsvinsterna och mäta effekten av dem.

Nyckelbegrepp: bildoptimering, WebP och AVIF, lazy loading, LCP-bilden, fetchpriority, PHP-version, städa databasen (versioner, transients, autoload), WP-Cron, riktig cron, DISABLE_WP_CRON, externa teckensnitt, Heartbeat

Arbeta i rätt ordning

Efter en sidcache (lektion 6.2) är detta de vinster som ger mest, ungefär i ordning efter ansträngning i förhållande till effekt:

1. bilder i ordning,
2. en aktuell PHP-version,
3. färre externa komponenter och tunga tillägg,
4. en städad databas,
5. schemalagda uppgifter på en riktig cron.

Mät före och efter varje steg (lektion 6.1), annars vet du inte vad som hjälpte. Och gör en sak i taget.

Bilder: den största vinsten i webbläsaren

På de flesta sidor är bilder den största delen av det en besökare laddar ner. Det du lärde dig i lektion 4.4 lönar sig här:

• Rätt storlek: ladda inte upp större bilder än nödvändigt och låt WordPress erbjuda mindre format via srcset.
• Komprimering och format: WebP är oftast betydligt mindre än JPEG vid samma kvalitet; AVIF är ofta ännu mindre. Ett tillägg kan konvertera befintliga bilder och ge den mindre versionen till webbläsare som stöder det. Kontrollera om konverteringen sker på din egen server eller hos en extern tjänst.
• Lazy loading, men inte för allt. WordPress ger bilder automatiskt loading="lazy", utom den första stora bilden högst upp. Den bilden är ofta LCP-elementet (lektion 6.1): det största innehållsblocket som besökaren ser först. Om den laddas lazy väntar webbläsaren just då med den, och din LCP blir sämre. WordPress ger därför ofta LCP-kandidaten fetchpriority="high", så att webbläsaren hämtar den först.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Verkstad med cyklar på rad">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Teamet framför butiken">

En fallgrop: vissa teman, sidbyggare och optimeringstillägg sätter lazy loading även på den första bilden, eller laddar den stora bilden som bakgrund via CSS (den upptäcks då senare). I PageSpeed Insights ser du under avsnittet LCP vilket element det är och om det laddas lazy.

PHP: gratis hastighet

Varje ny större PHP-version är snabbare än den föregående, och WordPress-webbplatser drar direkt nytta av det, utan att du behöver ändra något på din webbplats. Dessutom får äldre versioner inte längre säkerhetsuppdateringar (lektion 8.4). Om du byter version, kontrollera att dina tillägg och ditt tema stöder den nya versionen, och gör det helst först i en testmiljö (staging).

Titta i PHP-inställningarna även på:

• OPcache: är påslaget som standard hos de flesta webbhotell. En följd: en ändrad PHP-fil kan ta en stund innan PHP använder den nya versionen.
• memory_limit: för lågt ger fel vid tunga sidor; väldigt högt gör inte din webbplats snabbare.

Externa komponenter och tunga tillägg

Varje komponent från en annan part är en extra anslutning och en extra väntetid: teckensnitt från en extern tjänst, en inbäddad video, en chattwidget, mätkoder, sociala medier-knappar, en karta. Frågor per komponent:

• Behövs den? En video som nästan ingen spelar upp kan lika gärna vara en bild med en länk.
• Kan den köras lokalt? Teckensnitt kan du oftast lägga på din egen server (med ett tillägg eller via theme.json i ett blocktema). Det sparar en anslutning och är bättre för din integritet (lektion 9.3).
• Kan den laddas senare? En chattwidget eller video kan laddas först efter ett klick.

För tillägg hjälper mätning med X-Ray (vid webbhotell med CloudLinux) eller med ett tillägg som Query Monitor (aktivera tillfälligt, synligt endast för administratörer). De visar vilket tillägg som kostar mest i databasfrågor eller tid.

Städa databasen

En databas växer med saker du inte ser:

• Versioner (lektion 4.1): varje sparad version av varje sida. Begränsa dem med WP_POST_REVISIONS och städa bort gamla.
• Skräppost- och papperskorgskommentarer, samt inlägg i papperskorgen.
• Transients: tillfälliga data från tillägg i wp_options, som ibland inte städas bort.
• Autoload: alternativ i wp_options med autoload påslaget laddas vid varje förfrågan på en gång. Tillägg du tog bort för länge sedan lämnar ibland stora mängder data kvar där. Hälsokontroll för webbplatser (lektion 5.4) varnar om autoload-data är väldigt stora.
• Loggtabeller från tillägg (statistik, säkerhetsloggar, e-postloggar) som aldrig töms.

Städning kan göras med ett städtillägg, med WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), eller med optimeringsfunktionen i phpMyAdmin för själva tabellerna. Ta alltid en säkerhetskopia först. Ta inte bort något du inte vet vad det är.

Schemalagda uppgifter: WP-Cron

WordPress har uppgifter som ska köras vid en viss tidpunkt: publicera ett schemalagt inlägg, kontrollera uppdateringar, låta ett säkerhetskopieringstillägg köra. Detta kallas WP-Cron. Som standard körs WP-Cron inte på en klocka, utan vid ett besök: vid varje sidförfrågan kollar WordPress om en uppgift väntar. Två nackdelar:

• Vid få besökare körs uppgifter för sent (ett schemalagt inlägg visas först vid första besöket efteråt).
• Vid många besökare kollas det väldigt ofta, och en tung uppgift kan just fördröja sidan för en besökare.

Bättre: stäng av WP-Cron vid besök och låt en riktig cronjob på servern köra den var femte eller tionde minut. I wp-config.php (ovanför "sluta redigera"):

define( 'DISABLE_WP_CRON', true );

Och i cronskärmen i din administrationspanel för webbhotellet en uppgift, var 10:e minut:

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

Sökvägen till PHP och till din webbplats skiljer sig mellan olika webbhotell; titta i manualen för din panel. Eller använd WP-CLI: wp cron event run --due-now. Kontrollera efteråt i Hälsokontroll för webbplatser att inga schemalagda uppgifter ligger efter.

Heartbeat och administrationen

Adminpanelen i WordPress pratar så länge den är öppen var 15:e till 60:e sekund med servern (Heartbeat): för automatisk sparning, för att meddela att någon annan redigerar samma inlägg, och för notiser. Har du tio flikar med administrationen öppna hela dagen blir det tusentals förfrågningar. Stäng flikar du inte använder. Vissa cachetillägg kan sakta ner Heartbeat; att stänga av den helt är inte nödvändigt och det stör den automatiska sparningen.

Sammanfattning

• Efter sidcachen: bilder, PHP-version, externa komponenter och tillägg, databas, cron. Mät före och efter, ett steg i taget.
• Lazy loading för allt utom den stora bilden högst upp; den får hellre fetchpriority="high".
• En nyare PHP-version är gratis hastighet, förutsatt att dina tillägg hänger med.
• Städa versioner, transients, skräppost och stora autoload-data, alltid med en säkerhetskopia.
• Ställ in WP-Cron på en riktig cronjob med DISABLE_WP_CRON och en uppgift i din panel.

Quiz

Uppgift

Uppgift A6.3: Lazy loading och formaten på din startsida. Ange adressen till din webbplats. Programmet läser startsidan och tittar på bilderna: saknar den första stora bilden loading="lazy" (och helst fetchpriority="high"), har bilderna längre ner lazy loading, och hur stor andel av bilderna är WebP eller AVIF?

Uppgift D6.3: Före och efter. Mät en sida på din webbplats tre gånger i PageSpeed Insights (mobil) och anteckna den mittersta LCP, INP (eller labvärdet Total Blocking Time om det saknas fältdata), CLS och TTFB från uppgift A6.1. Genomför därefter en förbättring från den här lektionen (bilder, PHP-version, ta bort en extern komponent, städa databasen eller en riktig cron). Mät igen tre gånger och anteckna de nya värdena. Beskriv vad du gjort och om skillnaden är större än den normala variationen mellan mätningar.

Läs mer

Dessa artiklar beskriver stegen i panelerna hos WebOké; i andra paneler fungerar de på liknande sätt.

• DirectAdmin-guide 14.1: PHP-versionen välja (Select PHP version)
• DirectAdmin-guide 12.7: Kontrollera, reparera och optimera en databas
• DirectAdmin-guide 15.1: Cron-jobb: låt uppgifter köras automatiskt
• Skapa cronjob eller uppgift (och vad du ska göra om den inte körs)
• DirectAdmin-guide 17.4: X-Ray: hitta långsamma sidor
• Koppla WP-Cron till systemets cron (developer.wordpress.org, Engelska): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading och LCP (web.dev, Engelska): https://web.dev/articles/lcp-lazy-loading