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.
  

Vóór WordPress 3.0 multisite was een volledig apart systeem met de naam WPMU (WordPress MultiUser). Het was enorm lastig om het te gebruiken. Het was een enorme vooruitgang toen het opgenomen werd in de core van WordPress. De installatie is nu zo eenvoudig dat bijna iedereen een netwerk kan opstarten.

WordPress MultiSite niet de beste oplossing

Het delen van thema’s en plugins in een MultiSite is vaak geen voordeel meer voor ontwikkelaars. Met één klik kan een plugin van WordPress.org gedownload worden. Updates van plugins en thema’s is nog maar één klik werk. Daarbij gaat WordPress steeds verder met de automatische updates. Standaard kan WordPress zichzelf en de plugins automatisch updaten. Dit staat standaard aan voor beveiligings- en kleine release. Onderhoud aan verschillende sites is op deze manier veel eenvoudiger geworden.

Ontwikkelaars kunnen eenvoudig thema’s en plugins updaten vanuit een Git-repository. Met een script kan dit geïmplementeerd worden zodat automatisch een onbeperkt aantal sites de aangepaste code krijgt.

Is er dan nog wel toegevoegde waarde van het gebruik van een WordPress MultiSite t.o.v. losse sites?

WordPress Multisite User Management

De belangrijkste reden om voor een Multisite te kiezen is de voorwaarde dat gebruikers toegang moeten kunnen hebben tot de andere sites en dat de content zo verschillend is dat het niet logisch is om het in één website te ontwikkelen. Dit is ook op te lossen met user sync plugins. Ik gebruik liever de core functionaliteit van WordPress.

Wanneer een gebruiker zich registreert op een site, wordt deze geregistreerd voor alle sites binnen de Multisite. Dus wanneer gebruikers inloggen, kunnen ze ook naar de subsites navigeren terwijl ze ingelogd blijven.

Voor iedere site kunnen rollen aan andere gebruikers gekoppeld worden. Een gebruiker in de rol Author kan deze rol bijvoorbeeld alleen toegewezen krijgen voor één of meerdere sites. In WordPress MultiSite is een nieuwe rol Super Admin. Gebruikers met deze rol zijn admin voor alle sites. De bekende rol Administrator heeft deze rol voor een specifieke site binnen de MultiSite oplossing.

Meerdere themes of één theme voor meerdere sites

Een site als emerce.nl heeft een blog, vacatures en acedemy. Drie sites met verschillende layouts en functionaliteiten. Als het interessant is dat geregistreerde gebruikers toegang hebben tot alle drie de sites, is het mogelijk om met een WordPress MultiSite per site een andere theme te koppelen. Ook hier geldt dat er plugins zijn die per site meerdere themes mogelijk maken. Als multi user management niet van toepassing is en het niet noodzakelijk is om meer dan twee themes te gebruiken, kan een aanpassing in de bestaande theme of een plugin die multi themes aankan, een goede optie zijn. Bij aangeschafte themes is vaak wel per site een licentie nodig. Ook in een MultiSite omgeving.

Meertalige sites zonder multilanguage plugin

Een site die bijvoorbeeld op Nederland gericht is, maar wel meerdere talen nodig heeft, is een meertalige plugin zoals WPML of Polylang de eenvoudigste oplossing. De site bestaat uit een .nl domeinnaam en WPML, Polylang of enige andere multilanguage plugin regelt de meertaligheid. Per post, pagina en of Custom Post Type kan je per taal de inhoud invoeren.

Als een website een .nl domein gebruikt voor de Nederlandse taal en een .com voor de engelse taal, dan is het mogelijk om deze elk in hun eigen taal te maken. Het biedt pas voordeel om een WordPress Multisite te activeren ingelogde bezoekers bij beide sites moeten kunnen inloggen. Eventuele vertalingen kunnen met de gratis tool poedit aangemaakt worden.

WooCommerce en WordPress MultiSite

WooCommerce ondersteunt MultiSite. Dit betekent dit dat het mogelijk is een heel netwerk van individuele winkels te bouwen. Iedere webshop kan los van elkaar onderhouden worden.

Zo is het mogelijk om per branche een shop op te zetten, maar ook per land. Iedere shop heeft zijn eigen instellingen. Van valuta tot BTW en verzendopties.

Doordat alle shops totaal onafhankelijk zijn van elkaar moet voor elke shop de producten opnieuw worden ingevoerd. Ook voorraad is standaard zo dat je geen algemeen overzicht hebt als een product in verschillende shops wordt aangeboden.

Het grootste nadeel is dat klanten niet automatisch kunnen inloggen in de verschillende shops. Ook is er geen overzicht als klant waar je alle producten ziet die je in de verschillende shops hebt gekocht.

Aangezien alle data van de verschillende shops wel in één database zitten, zijn er WooCommerce plugins die de voorraad van de verschillende winkels op één plaats laat beheren. Ook zijn er plugins die het mogelijk maken om met één winkelwagen te werken binnen verschillende MultiSite WooCommerce winkels.

• Woo Multistore
• WooCommerce Global Cart
• WordPress Multi-site Reports

Het grootste voordeel van de database structuur van zowel WooCommerce als WordPress MultiSite is dat je met PHP zelf aanpassingen en uitbreidingen kunt maken om je eigen business concept te stroomlijnen.

WordPress MultiSite en plugins

Wanneer een ontwikkelaar een plugin ontwikkeld, zal de ontwikkelaar niet snel testen of de plugin werkt in een MultiSite omgeving. Het zijn voornamelijk de functies die kijken of de plugin voor de specifieke site wel of niet actief is die missen. Om een plugin in de WordPress.org store te plaatsen, is er geen controle vanuit WordPress die kijkt of de plugin deze controles heeft.

Als je met een WordPress MultiSite werkt, zorg altijd dat je in een staging omgeving test of een plugin geschikt is voor je MultiSite oplossing.

WordPress MultiSite maakt voor elke site eigen tabellen aan. Als de plugin zelf informatie in eigen tabellen opslaat, moeten deze extra tabellen per site worden aangemaakt. Dit is een kleine foreach lus . Als die niet aanwezig is, krijg je fouten zodra de plugin geactiveerd wordt.

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