WebP is één van de nieuwste afbeeldingsformaten. WebP valt onder de next-gen formats die door de nieuwste browsers wordt ondersteund. Als je een prestatie-audit hebt uitgevoerd op Google PageSpeed Insights of Google Lighthouse, krijg je vaak het advies om de afbeeldingen in next-gen formats te tonen. WordPress ondersteund dit formaat nog niet standaard. Ook ondersteunen de oudere browsers dit niet. De eenvoudigste en gratis oplossing is om de HTML 5 tag <picture> te gebruiken waarbij zowel de beste compressie voor de afbeelding kan worden aangegeven als een ander formaat als de browser dit niet ondersteund. Gelukkig zijn er gratis plugins die dit voor je oplossen zonder dat je zelf de code van je thema hoeft aan te passen.

Voor de laadsnelheid van een mobiele pagina is de grootte van de pagina belangrijk. Met mooie scherpe afbeeldingen is juist in de afbeeldingen snelheidswinst te behalen. De nieuwste browsers ondersteunen ingebedde compressie-informatie. Als hier gebruikt van wordt gemaakt, wordt de laadtijd korter en hoeven bezoekers minder lang te wachten.

Wat is next-gen en waarom zou je het moeten gebruiken?

Next-gen afbeeldingen bieden betere compressie dan bijvoorbeeld png en jpg en behouden ook een betere kwaliteit. Ze zijn perfect voor gebruik in internetpagina’s, omdat ze minder groot zijn terwijl ze dezelfde hoge beeldkwaliteit hebben.

Er zijn twee belangrijke next geneneration bestandsindelingen die voor WordPress afbeeldingen te gebruiken zijn:

• WebP
• AVIF
  

WebP is ontwikkeld door Google. WebP wordt door veel moderne browswers ondersteund. WebP is absoluut een uitstekende vervanging voor JPEG, PNG en Gif afbeeldingen, omdat de kwaliteit van de afbeelding behouden blijft en de afbeeldingen veel kleiner zijn. WordPress heeft plannen om WebP standaard te gaan ondersteunen.

AVIF is ontwikkeld door Alliance for Open Media. AVIF maakt de afbeelding nog kleiner dan WebP, maar wordt minder goed ondersteud door de nieuwste browsers.

WebP wordt op dit moment door de meeste moderne browsers ondersteund.

Gratis next-gen afbeeldingen in WordPress

De gemakkelijkste en snelste manier om afbeeldingen om te zetten in WebP is door een WordPress plugin te gebruiken. U kunt afbeeldingen ook handmatig optimaliseren en converteren. Ook zijn er plugins die een betaalde functie hebben om grote aantallen afbeeldingen om te zetten.

In deze handleiding wordt een gratis WordPress plugin gebruikt die ook nog eens gratis grote hoeveelheden afbeelding in bulk kan omzetten.

1. Download en installeer WebP Express

WebP Expresss is een gratis WordPress plugin. Ook het omzetten van grote aantallen afbeeldingen is gratis. Zeker bij WooCommerce gaat het al snel om veel afbeeldingen.

2. Standaard instellingen

Activeer de plugin en ga naar Instellingen -> WebP Express

• Zet Operation mode op Varied image responses.
  WebP Express maakt omleidingsregels aan voor afbeeldingen. Als voor dezelfde afebeelding een Webp afbeelding bestaat en de browser ondersteund WebP, dan wordt de WebP afbeelding naar de browser gestuurd. Als de afbeelding nog niet als WebP bestaat, dan wordt deze geconverteerd en dan naar de browser gestuurd.Let op niet alle CDN oplossingen ondersteunen deze realtime convertering.
• Zet de Cache-Control header.
  Het verschil tussen public en private cache control is dat bij public de afbeeldingen ook door een proxy gecached mogen worden.
• Controleer de conversie methoden.
  In dit overzicht staat welke mogelijkheden de server ondersteund. Wanneer de hosting geen enkele optie ondersteund, vraag dan of één van de PHP extensies enabled mogen worden.
  
• Aktiveer Convert on upload.
  Let op dat het uploaden van nieuwe afbeeldingen langzaam kan gaan. Vooral als het thema veel verschillende formaten aanmaakt zoals bijvoorbeeld bij WooCommerce.

3. Test instellingen

WebP Express heeft hele mooie zelf test functionaliteiten. Controleer de resultaten van de drie tests.

4. Bulk convert afbeeldingen

Dit kan lang duren als het thema voor elke upload verschillende formaten aan heeft gemaakt en als de Woocommerce site veel producten heeft. Vooraf wordt aangegeven hoeveel afbeelding geconverteerd worden. Het proces kan elk moment gestopt en herstart worden.

Wanneer nodig is het ook mogelijk alle geconverteerde afbeeldingen te verwijderen.

4. Automatisch wijzigen van de HTML voor afbeeldingen

De HTML-code zal gewijzigd worden zodat webp-afbeeldingen  naar browsers worden gestuurd die webp ondersteunen. Door gebruik te maken van de HTML5 picture element, wordt de beste ondersteuning voor WebP bereikt. Zeker wanneer een proxy service afbeeldingen cachet.

• What to replace
  Selecteer de eerste optie. Dit geeft de HTML5 picture element. De browser kiest zelf welke afbeelding wordt getoond. De originele formaat afbeelding en de nieuwe WebP afbeelding staat in het picture element gedefinieerd.
• How to replace
  De eerste optie is het snelst qua performance als dit door het thema wordt ondersteund. Als dit niet zo is, kies voor de tweede optie.
• Sla de settings op en laat WebP Express de .htaccess aanpassen.
  

Total Blocking Time is een belangrijke prestatie statestiek die de laadtijd van de WordPress website meet. Het is de som van alle tijdsperioden tussen First Contentful Paint (FCP) en Time to Interactive (TTI). De score wordt altijd uitgedrukt in milliseconden. Het telt voor 30% van de totale prestatie (snelheoid) die door Lighthouse wordt gemeten.

Elke browser heeft een proces dat de code (HTML, CSS en JavaScript) omzet in een webpagina. Deze actie van het verwerken van alle code en stijlen moet effectief zijn. Uit onderzoek blijkt dat bezoekers van een site niet lang willen wachten totdat de pagina geladen is. Als dit te lang duurt, is de kans groot dat bezoekers hun tab sluiten. De bounce rate van de website gaat omhoog.

In het bovenstaande voorbeeld wordt de pagina in drie blokken (taken) ingelezen. Taak 1 en 2 duren langer dan 50ms. Dit blokkeert de uitvoer van andere belangrijke taken. Het is bijvoorbeeld nog niet mogelijk om door de pagina te scrollen.

De optelling van alle taken die langer dan 50 miliseconden duren worden bij elkaar opgeteld. Dit is Total Blocking Time.

Wat is een goede WordPress TBT-score?

Hoe wordt de totale prestatiescore bepaald?

In Lighthouse 8 wordt de score door de onderstaande weging bepaald. Met 30% is de Total Blocking time de belangrijkste statistiek om mee te beginnen.

Hoe is Total Blocking Time te meten?

FCP kan worden gemeten door middel van verschillende gratis tools. De tools meten de snelheid van zowel mobiel als desktop. Dit geeft een goed idee van de gebruikerservaring en rangschikking in de Google zoekmachine.

• Lighthouse
• WebPageTest
• Chrome DevTools
• PageSpeed Insights
• Chrome User Experience Report
• Firebase Performance Monitoring
  

Total Blocking Time (TBT)-tijd in WordPress te verbeteren

Zowel de gebruikte template als ook de gebruikte plugins zijn van invloed op de hoogte van de score van de Total Blocking Time in WordPress websites en WooCommmerce webshops.

Veel WordPress templates en plugins sturen grote bibliotheken met JavaScript en CSS naar de browser waar maar weinig op de pagina van wordt gebruikt. 

Met het ICTP Groei onderhouds abonnement wordt de TBT stapsgewijs verbeterd.

1. Vertraag (Defer) laden JavaScrcipt

Het vertragen of uitstellen van het laden van JavaScript heet Defer. Het doel is om de JavaScript bestanden te laden op het moment dat de browser de meest relevante inhoud heeft weergegeven.

Handmatig kan per script het Defer attribute worden toegevoegd:

<script src=”code.js” defer></script>

De JavaScripts worden nu gestart nadat de pagina is geladen.

Het is ook mogelijk WordPress plugins te gebruiken:

• Asset CleanUp
• WP Rocket
  

2. Prefetch DNS-verzoeken

Wanneer een browser een een extern bestand (JavaScript of bijvoorbeeld CSS bestanden) opvraagt bij een server (van derden), moet de domeinnaam worden omgezet in een IP-adres voordat de browser het verzoek kan doen. Hoewel DNS-caching kan helpen om deze vertraging te verminderen, kan DNS-prefetch het ophalen van externe bestanden aanzienlijke versnelling. Voor websites Google of Awesome fonts worden ingeladen, maar ook bijvoorbeeld Google  Tag manager wordt gebruikt, kan deze DNS prefetch de laadprestaties aanzienlijk verbeteren.

Handmatig kan per aanroep de eigenschap dns-prefetch worden toegevoegd:

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" >

Overweeg dns-prefetch te koppelen met de preconnect-eigenschap. Terwijl dns-prefetch alleen een DNS-lookup uitvoert, brengt preconnect een verbinding met een server tot stand. Dit proces omvat DNS-omzetting, evenals het tot stand brengen van de TCP-verbinding en het uitvoeren van de TLS-handshake, als de site wordt gebruik maakt van HTTPS. De combinatie van de twee biedt de mogelijkheid om de vertraging van cross-origin-verzoeken verder te verminderen. Je kunt ze als volgt samen gebruiken:

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">

Het is ook mogelijk WordPress plugins te gebruiken:

• Perfmatters plugin
• WP Rocket
  

3. Minify JavaScript

Minify betekent het verkleinen van js bestanden. Door het verwijderen van lege regels, spaties, enz. worden de bestanden veel kleiner. Als nu ook alleen de JavaScript functies in het bestand staan die werkelijk worden gebruikt, dan is dit optimaal voor een goede performance.

Het is mogelijk om WordPress plugins te gebruiken zodat het verkleinen automatisch gaat.

• Closure Compiler
• WP Rocket
• Autoptimize plugin
  

4. Gebruik GZIP of Brotli compressie

Met GZIP en Brotli compressie wordt de code gecomprimeerd, zodat de bestanden die van de server naar de browser worden verzonden, kleiner zijn. Hierdoor is de website dus sneller.

Brotli comprimeert JavaScript bestanden 14 procent kleiner dan Gzip. HTML en CSS compressiesnelheden zijn 21 en 17 procent beter dan Gzip.

5. Minify CSS

Tijdens het verkleinen van de CSS bestanden worden opmerkingen, witruimte en spaties verwijderd. Dit verkleint de bestandsgrootte. Wanneer de eigenschappen die niet nodig zijn voor de pagina ook uit de CSS bestanden worden gehaald, wordt de meeste snelheidswinst behaald.

Het is mogelijk om WordPress plugins te gebruiken zodat het verkleinen automatisch gaat.

• WP Super Minify
• WP Rocket
• Autoptimize plugin
  

6. Verlaag de Server Response Time en de Time to First Byte (TTFB)

De server moet snel zijn en de Time to First Byte (TTFB) moet worden geoptimaliseerd om de Total Blocking Time-score te verbeteren.

Caching is een goede manier om de Time to First Byte te verkleinen. Caching kan met behulp van browser, WordPress plugins, maar ook door server zelf. Wanneer WordPress cache plugins niet meer helpen, kan de server zelf nog veel nieuwe mogelijkheden geven. Bij 20 gelijktijdige bezoekers wordt het interessant om de server cache te gebruiken.

Mogelijke WordPress cache plugins:

• WP Super Cache
• WP Rocket
• W3 Total Cache
  

First Contentful Paint (FCP) is één van de zes statistieken die worden bijgehouden in het gedeelte Prestaties van het Lighthouse-rapport en bij Google PageSpeed Insights.

FCP meet hoe lang het duurt voordat de browser het eerste stuk DOM-inhoud weergeeft nadat een gebruiker de pagina opvraagt.Dit is het moment dat de gebruikter ziet dat iets op het scherm gebeurd.

Snelheid is een bijzonder belangrijke factor voor de rangschikking van websites in de Google-zoekmachine.

WEB.DEV

Wat is een goede WordPress FCP-score?

Volgens Google Core Web Vitals report leidt een langzame website tot een hogere bounce rate.De bounce rate is een belangrijke indicator hoe belangrijk de bezoekers je pagina vinden. Hoe hoger de bounce rate, hoe minder interessant de website of webshop voor de bezoeker is. Dit wordt gebruikt door Google om sites te indexeren.

Hoe wordt de totale prestatiescore bepaald?

In Lighthouse 8 wordt de score door de onderstaande weging bepaald. Met 10% is de First Contentful Paint dus niet het belangrijkste statistiek om mee te beginnen.

Hoe is First Contentful Paint te meten?

FCP kan worden gemeten door middel van verschillende gratis tools. De tools meten de snelheid van zowel mobiel als desktop. Dit geeft een goed idee van de gebruikerservaring en rangschikking in de Google zoekmachine.

• Lighthouse
• WebPageTest
• Chrome DevTools
• PageSpeed Insights
• Chrome User Experience Report
• Firebase Performance Monitoring
  

First Contentful Paint (FCP) in WordPress verbeteren

Zowel de gebruikte template als ook de gebruikte plugins zijn van invloed op de hoogte van de score van de First Contentful Paint in WordPress websites en WooCommmerce webshops.

Met het ICTP Groei onderhouds abonnement wordt de FCP stapsgewijs verbeterd.

ICTP WordPress Onderhoud

1. Zorg dat tekst zichtbaar blijft tijdens het laden van webfonts

Lettertypen zijn vaak grote bestanden die enige tijd nodig hebben om te laden. Sommige browsers verbergen tekst totdat het lettertype is geladen

De eenvoudigste manier om dit te voorkomen is door tijdelijk een systeemlettertype weer te geven. Door font-display: swap in @font-face-stijl op te nemen wordt flash of invisible text (FOIT) voorkomen.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

2. Vooraf laden van webfonts in WordPress

Gebruik <link rel=”preload” as=”font”> om de lettertypebestanden eerder op te halen. In WordPress kan in de functions.php de volgende code geplaatst worden:

add_action('wp_head' , function(){
    echo'
    <link rel="preload" href="font Url" as="font" type="font/woff2" crossorgin>
    ';
});

Het is ook mogelijk een WordPress plugin hier voor te gebruiken:

• Perfmatters.io
• WP Rocket
• Autoptimize
  

3. Website caching inschakelen

Wanneer caching is inschakelt, wordt een kopie van de website gegenereerd en aan de volgende gebruikers aangeboden. De server hoeft niet voor elke gebruiker opnieuw de pagina te gegenereerd,  Over het algemeen is dit een snelle en gemakkelijke manier om de snelheid van de website of shop direct een boost te geven.

• W3 Total Cache
• WP Fastest Cache
• Andere WordPress cache plugins
  

4. Eliminate render-blocking resources

In het gedeelte ‘Mogelijkheden’ van het Lighthouse-rapport worden alle URL’s weergegeven die de eerste de weergave van de pagina blokkeren. Het doel is om de impact van deze blokkerende URL’s te verminderen.

• Gebruik media-attribuut voor voorwaardelijke CSS
• Gebruik de attributen defer en async JavaScript blocking te voorkomen
• Verklein en bundel CSS en JavaScript
• Aangepaste lettertypen lokaal laden

Voor Eliminate render-blocking resources zijn verschillende WordPress plugins:

• Autoptimize
• Hummingbird
• WP-Optimize
  

5. Geef afbeeldingen weer in next-gen formaat

Afbeeldingsformaten zoals JPEG 2000, JPEG XR en WebP bieden vaak een betere compressie dan PNG of JPEG. Dit betekent snellere downloads en minder dataverbruik. Vooral voor de mobiele performance score geeft dit een beter resultaat.

WordPress heeft verschillende gratis plugins die afbeeldingen automatisch converteren.

• Smush
• EWWW Image Optimizer
• Image optimization & Lazy Load by Optimole