Afbeeldingen, PHP en andere snelheidswinst

Module 6: Snelheid · Leestijd: 9 minuten

Leerdoel: Na deze les kun je de grootste overige snelheidswinsten toepassen en het effect ervan meten.

Kernbegrippen: beeldoptimalisatie, WebP en AVIF, lazy loading, de LCP-afbeelding, fetchpriority, PHP-versie, database opruimen (revisies, transients, autoload), WP-Cron, echte cron, DISABLE_WP_CRON, externe lettertypen, Heartbeat

Werk in de goede volgorde

Na een paginacache (les 6.2) zijn dit de winsten die het meest opleveren, ongeveer in volgorde van moeite tegenover effect:

1. afbeeldingen op orde;
2. een actuele PHP-versie;
3. minder externe onderdelen en zware plugins;
4. een opgeruimde database;
5. geplande taken op een echte cron.

Meet voor en na elke stap (les 6.1), anders weet je niet wat hielp. En doe één ding tegelijk.

Afbeeldingen: de grootste winst in de browser

Op de meeste pagina's zijn afbeeldingen het grootste deel van wat een bezoeker downloadt. Wat je in les 4.4 leerde, betaalt zich hier uit:

• Juiste afmeting: upload niet groter dan nodig en laat WordPress via srcset kleinere formaten aanbieden.
• Compressie en formaat: WebP is meestal flink kleiner dan JPEG bij gelijke kwaliteit; AVIF vaak nog kleiner. Een plugin kan bestaande afbeeldingen omzetten en de kleinere versie aan browsers geven die het ondersteunen. Controleer of de omzetting op je eigen server gebeurt of bij een externe dienst.
• Lazy loading, maar niet voor alles. WordPress geeft afbeeldingen vanzelf loading="lazy", behalve de eerste grote afbeelding bovenaan. Die afbeelding is vaak het LCP-element (les 6.1): het grootste stuk inhoud dat de bezoeker als eerste ziet. Wordt die lazy geladen, dan wacht de browser er juist mee en wordt je LCP slechter. WordPress geeft de LCP-kandidaat daarom vaak fetchpriority="high", zodat de browser hem als eerste ophaalt.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Werkplaats met fietsen op een rij">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Het team voor de winkel">

Een valkuil: sommige thema's, paginabouwers en optimalisatieplugins zetten lazy loading ook op de eerste afbeelding, of laden de grote afbeelding als achtergrond via CSS (die wordt later ontdekt). In PageSpeed Insights zie je bij het onderdeel LCP welk element het is en of het lazy wordt geladen.

PHP: gratis snelheid

Elke nieuwe grote versie van PHP is sneller dan de vorige, en WordPress-sites profiteren daar direct van, zonder iets aan je site te veranderen. Daarnaast krijgen oude versies geen beveiligingsupdates meer (les 8.4). Stap je over, controleer dan of je plugins en thema de nieuwe versie ondersteunen, en doe het liefst eerst in staging.

Kijk bij de PHP-instellingen ook naar:

• OPcache: staat bij de meeste hosters standaard aan. Een gevolg: een gewijzigd PHP-bestand kan even duren voordat PHP de nieuwe versie gebruikt.
• memory_limit: te laag geeft fouten bij zware pagina's; heel hoog maakt je site niet sneller.

Externe onderdelen en zware plugins

Elk onderdeel van een andere partij is een extra verbinding en een extra wachttijd: lettertypen van een externe dienst, een ingesloten video, een chatwidget, meetcodes, sociale-media-knoppen, een kaart. Vragen per onderdeel:

• Is het nodig? Een video die bijna niemand afspeelt, kan ook als afbeelding met een link.
• Kan het lokaal? Lettertypen kun je meestal op je eigen server zetten (met een plugin of via theme.json bij een blokthema). Dat scheelt een verbinding en het is beter voor je privacy (les 9.3).
• Kan het later? Een chatwidget of video kan pas laden na een klik.

Bij plugins helpt meten met X-Ray (bij hosting met CloudLinux) of met een plugin als Query Monitor (tijdelijk aanzetten, alleen voor beheerders zichtbaar). Die laten zien welke plugin de meeste databasevragen of tijd kost.

De database opruimen

Een database groeit met dingen die je niet ziet:

• Revisies (les 4.1): elke opgeslagen versie van elke pagina. Beperk ze met WP_POST_REVISIONS en ruim oude op.
• Spam- en prullenbakreacties, en berichten in de prullenbak.
• Transients: tijdelijke gegevens van plugins in wp_options, die soms niet worden opgeruimd.
• Autoload: opties in wp_options met autoload aan worden bij elk verzoek in één keer geladen. Plugins die je al lang hebt verwijderd, laten daar soms grote hoeveelheden gegevens achter. Sitediagnose (les 5.4) waarschuwt als de autoload-gegevens erg groot zijn.
• Logtabellen van plugins (statistieken, beveiligingslogs, e-maillogs) die nooit worden geleegd.

Opruimen kan met een opruimplugin, met WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), of met de optimaliseerfunctie van phpMyAdmin voor de tabellen zelf. Altijd eerst een back-up. Haal niets weg waarvan je niet weet wat het is.

Geplande taken: WP-Cron

WordPress heeft taken die op een tijdstip moeten draaien: een ingepland bericht publiceren, op updates controleren, een back-upplugin laten werken. Dat heet WP-Cron. Standaard draait WP-Cron niet op een klok, maar bij een bezoek: bij elk paginaverzoek kijkt WordPress of er een taak klaarstaat. Twee nadelen:

• Bij weinig bezoekers draaien taken te laat (een ingepland bericht verschijnt pas bij het eerste bezoek erna).
• Bij veel bezoekers wordt er heel vaak gekeken, en een zware taak kan net de pagina van een bezoeker vertragen.

Beter: zet WP-Cron uit bij bezoeken en laat een echte cronjob van de server het elke vijf of tien minuten draaien. In wp-config.php (boven "stop met bewerken"):

define( 'DISABLE_WP_CRON', true );

En in het cronscherm van je hostingpaneel een taak, elke 10 minuten:

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

Het pad naar PHP en naar je site verschilt per hoster; kijk in de handleiding van je paneel. Of gebruik WP-CLI: wp cron event run --due-now. Controleer achteraf in Sitediagnose dat er geen geplande taken achterlopen.

Heartbeat en het beheer

Het beheerscherm van WordPress praat zolang het open staat elke 15 tot 60 seconden met de server (de Heartbeat): voor automatisch opslaan, om te melden dat iemand anders hetzelfde bericht bewerkt, en voor meldingen. Laat je tien tabbladen met het beheer de hele dag open staan, dan zijn dat duizenden verzoeken. Sluit tabbladen die je niet gebruikt. Sommige cacheplugins kunnen de Heartbeat vertragen; helemaal uitzetten is niet nodig en breekt het automatisch opslaan.

Samenvatting

• Na de paginacache: afbeeldingen, PHP-versie, externe onderdelen en plugins, database, cron. Meet voor en na, één stap tegelijk.
• Lazy loading voor alles behalve de grote afbeelding bovenaan; die krijgt liever fetchpriority="high".
• Een nieuwere PHP-versie is gratis snelheid, mits je plugins meekunnen.
• Ruim revisies, transients, spam en grote autoload-gegevens op, altijd met een back-up.
• Zet WP-Cron op een echte cronjob met DISABLE_WP_CRON en een taak in je paneel.

Quiz

Opdracht

Opdracht A6.3: Lazy loading en formaten op je homepage. Vul het adres van je site in. Het programma leest de homepage en kijkt naar de afbeeldingen: heeft de eerste grote afbeelding géén loading="lazy" (en liefst fetchpriority="high"), hebben de afbeeldingen verderop wel lazy loading, en welk deel van de afbeeldingen is WebP of AVIF?

Opdracht D6.3: Voor en na. Meet een pagina van je site drie keer in PageSpeed Insights (mobiel) en noteer de middelste LCP, INP (of de labwaarde Total Blocking Time als er geen velddata zijn), CLS en de TTFB uit opdracht A6.1. Voer daarna één verbetering uit deze les door (afbeeldingen, PHP-versie, een extern onderdeel weg, database opruimen of een echte cron). Meet opnieuw drie keer en noteer de nieuwe waarden. Beschrijf wat je hebt gedaan en of het verschil groter is dan de normale schommeling tussen metingen.

Verder lezen

Deze artikelen beschrijven de stappen in de panelen van WebOké; in andere panelen werken ze vergelijkbaar.

• DirectAdmin handleiding 14.1: De PHP-versie kiezen (Select PHP version)
• DirectAdmin handleiding 12.7: Een database controleren, repareren en optimaliseren
• DirectAdmin handleiding 15.1: Cron Taken: taken automatisch laten draaien
• Cronjob of taak aanmaken (en wat te doen als hij niet draait)
• DirectAdmin handleiding 17.4: X-Ray: trage pagina's opsporen
• WP-Cron aan de systeemcron koppelen (developer.wordpress.org, Engels): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading en LCP (web.dev, Engels): https://web.dev/articles/lcp-lazy-loading