WebP

Samenvatting: WordPress-afbeeldingen comprimeren en WebP omzetten

WordPress zet geuploade JPEG's en PNG's niet automatisch om naar WebP, ook al ondersteunt het CMS WebP-uploads al sinds versie 5.8. Met het native filter image_editor_output_format (core sinds WordPress 6.4/6.5) laat je nieuwe uploads zonder plugin als WebP-bestanden opslaan, gemiddeld 25 tot 34% kleiner dan een vergelijkbare JPEG.^[2] Bestaande afbeeldingen converteer je apart via WP-CLI.

Het verschil met Early Hints: bij preload moet de browser eerst de HTML-pagina zelf binnenhalen voordat hij de preload-hint ziet, dus je wint iets minder tijd dan met Early Hints. Het voordeel is dat het de hoofdresource niet blokkeert en dat je er geen serverversie voor nodig hebt.

In WordPress voeg je dit toe via een wp_head-hook in het functions.php-bestand van je (child-)theme, zonder plugin:

function keurigonline_preload_kritieke_resources() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/hoofdfont.woff2" as="font" type="font/woff2" crossorigin>' . "\n";
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/images/hero.webp" as="image">' . "\n";
}
add_action( 'wp_head', 'keurigonline_preload_kritieke_resources', 1 );

Let op het verschil met preconnect: rel=preload haalt een specifiek bestand alvast op, terwijl rel=preconnect alleen de DNS-lookup en TCP/TLS-verbinding met een externe host alvast opzet (handig voor bijvoorbeeld een lettertypen-CDN), zonder het bestand zelf te downloaden. Gebruik ze samen wanneer je kritieke resources van een extern domein laadt.

LCP is de metric die de meeste impact heeft: hij meet hoe snel het grootste zichtbare element op je pagina laadt. Een LCP boven 2,5 seconden op mobiel vertelt Google dat jouw mobiele gebruikerservaring onvoldoende is. Met meer dan de helft van alle zoekopdrachten afkomstig van mobiele apparaten is dit geen randgeval.

Drie directe maatregelen voor een betere LCP

1. Afbeeldingen optimaliseren en laadstrategie scheiden. De hero-afbeelding is op de meeste pagina's het LCP-element. Zet de hero in WebP-formaat, comprimeer tot onder 100 KB en voeg loading="eager" toe aan dit element (juist geen lazy-load). Voeg loading="lazy" toe aan alle afbeeldingen lager op de pagina.
2. Kritische CSS inlinen. Externe stylesheets blokkeren de render. Extraheer de CSS die nodig is voor de bovenste viewport en zet die inline in de <head>. Laad de rest asynchroon. Dit verlaagt de Time to First Paint direct.