Het werkt niet meer. Herken jij het als webdesigner? Het zal iets met een WordPress website of WooCommerce webshop zijn. Hoe kom je erachter wat het probleem is? En hoe ga je op zoek naar de oplossing? Wij geven je graag een aantal standaard vragen die het probleem kunnen verduidelijken zodat jij op zoek kunt naar een oplossing.

Wat werkt er niet meer?

Beschrijf zo specifiek mogelijk wat er precies niet meer werkt. Is het een bepaalde pagina die niet meer wil laden? Is het een standaard functionaliteit die je altijd gebruikt maar die nu niet meer werkt? Met vragen stellen zul jij de oorzaak van het probleem moeten onderzoeken.

Wat is er aangepast?

Als het WordPress onderhoud extern of door jou zelf wordt uitgevoerd is het van belang om te weten wat er gebeurd is voordat ‘het’ niet meer werkte. Is het thema geüpdatet, zijn er plugins geüpdatet of nieuwe plugins geïnstalleerd of zijn er wijzigingen gemaakt in de hosting omgeving? Als voorbeeld kun je denken aan de wijziging van de PHP-versie op de server of een update van WordPress.

In welke browser speelt het probleem?

Er kunnen problemen zijn in de voorkant van een website die alleen bij een specifieke browser of zelfs specifieke browserversie optreden. Daarom is het van belang om te weten welke browser en welke versie er gebruikt wordt. Dit kan je heel veel tijd besparen bij het debuggen van een probleem.

Wat is al geprobeerd om het probleem op te lossen?

Veel klanten zullen echt niet direct jouw hulp inroepen als ze een probleem hebben. Maar wat hebben ze al geprobeerd? Hebben ze misschien al iemand anders laten kijken? Zijn er al wijzigingen gemaakt in de configuratie? Is er al in de errorlog gekeken om WordPress problemen op te onderzoeken?

Dit zijn allemaal zaken die jou tijd kunnen besparen bij het oplossen van het probleem. Vraag hier dus naar en is het onduidelijk wat er gebeurd is voordat jij gecontacteerd werd, zet dan een backup terug om zeker te zijn dat er geen wijzigingen zijn die het probleem verergeren.

Conclusie

Geen enkel probleem is hetzelfde. Het zal dus vaak tijd kosten om te onderzoeken hoe een probleem ontstaat en wanneer het optreedt. Hier zal het ook vanaf hangen wat de prioriteit is die je aan een probleem geeft. Als voorbeeld de storing die klanten vanaf bepaalde browsers hebben, zal bij ons meer prioriteit krijgen dan het probleem dat een klant een bepaalde functie niet kan benaderen zoals ze gewend waren. Dat laatste is uiteraard erg vervelend en moet ook zo snel mogelijk opgelost worden, maar de omzet van de klant hangt hier niet vanaf.

“Interaction to Next Paint” (INP) is een prestatiemetriek van Google die meet hoe lang het duurt voordat een webpagina in bijvoorbeeld WordPress reageert op een interactie van de gebruiker en de visuele feedback van die interactie toont. Dit omvat de tijd vanaf het moment dat de gebruiker een actie initieert (zoals klikken op een knop, tikken op een scherm, of een toets indrukken) tot het moment waarop de browser het resultaat van die interactie begint te renderen of schilderen op het scherm.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP)

INP is een belangrijke maatstaf voor het begrijpen van de gebruikerservaring op een website, omdat het rechtstreeks van invloed is op hoe “snappy” of responsief een website aanvoelt. Een lagere INP-waarde duidt op een snellere respons en een betere gebruikerservaring, terwijl een hogere INP-waarde kan wijzen op potentiële knelpunten in de prestaties die de gebruikerservaring kunnen schaden.

Deze waarde is bijzonder relevant in de context van interactieve webapplicaties, waar gebruikers verwachten dat acties onmiddellijke feedback krijgen. Het optimaliseren voor INP kan betekenen dat je de JavaScript-uitvoering in je WordPress website moet optimaliseren, overbodige re-rendering van afbeeldingen in je webshop moet verminderen of de algemene prestaties van de website moet verbeteren door technieken zoals code-splitting, lazy loading, en het optimaliseren van alles wat geladen wordt.

Core Web Vitals

INP maakt deel uit van een bredere set van Core Web Vitals, die Google heeft geïntroduceerd om website-eigenaren en ontwikkelaars te helpen de kwaliteit van de gebruikerservaring te meten en te verbeteren. Deze vitals richten zich op verschillende aspecten van de webprestaties, inclusief laadtijden, interactiviteit, en visuele stabiliteit van content tijdens het laden. Je kunt zelf eenvoudig bekijken hoe jouw website scoort in de Google Pagespeed test.

High-Performance Order Storage (HPOS) biedt verbeterde databasestructuur voor WooCommerce webshops. Eenvoudig uitgelegd, de WordPress database tabellen plaatsen standaard alle berichten en orders in één tabel wp_posts in de database. De verbetering die de WooCommerce developers gemaakt hebben met HPOS is dat de orders niet meer in de WP_Post tabellen komen maar hun eigen tabellen krijgen. Het voordeel hiervan is dat jouw webshop hierdoor uiteindelijk sneller gaan worden en beter presteren!

HPOS maakt gebruik van Woo’s Create, Read, Update, Delete (CRUD) ontwerp om ordergegevens in aangepaste tabellen op te slaan die zijn geoptimaliseerd voor WooCommerce-query’s.

Wat is High-Performance Order Storage voor WooCommerce?

Sinds 2022 zijn de ontwikkelaars van WooCommerce al bezig met het ontwikkelen van HPOS en sinds WooCommerce versie 8.2 in oktober 2023 uitgebracht is, is HPOS standaard onderdeel van een nieuwe WooCommerce installatie. Bestaande webshops hebben nog de tijd om te migreren, dit kan nu nog handmatig gedaan worden als alle plugins die geïnstalleerd zijn compatible zijn met HPOS.

Waarom HPOS gebruiken?

HPOS voor WooCommerce verbetert de webshop op drie punten.

Schaalbaarheid: De toename van het aantal klanten en bestellingen verhoogt de belasting op de database van de webshop, waardoor het moeilijk wordt om klantbestellingsverzoeken te verwerken. Met High-Performance Order Storage krijgt de webshop speciale tabellen voor gegevens zoals bestellingen, besteladressen en speciale indexen, wat resulteert in minder lees-/schrijfbewerkingen en minder bezette tabellen.

Betrouwbaarheid: HPOS maakt het implementeren en herstellen van gerichte back-ups eenvoudiger. Geen zorgen meer over het verliezen van bestellingen, voorraadnummers of klantinformatie dankzij betrouwbare back-ups in deze aangepaste bestellingstabellen. Deze tabellen kunnen los van de andere databasetabellen hersteld worden. Een groot voordeel!

Eenvoud: Met HPOS kun je door de afzonderlijke tabellen bladeren, onafhankelijk van de _posts-tabel, om gegevens te vinden.

WooCommerce HPOS instellen

HPOS is standaard ingeschakeld voor nieuwe installaties vanaf WooCommerce versie 8.2 uitgebracht in oktober 2023. Bestaande webwinkels kunnen overschakelen van WordPress berichtenopslag naar High-Performance Order Opslag door de onderstaande stappen te volgen.

Om HPOS te activeren, moeten bestaande winkels eerst zowel de berichten als de bestellingen tabel synchroniseren.

HPOS Woocommerce

  1. In WP Admin, navigeer naar WooCommerce > Instellingen > Geavanceerd > Functies
  2. Vink het selectievakje Compatibiliteitsmodus inschakelen (synchroniseert orders naar de berichtentabel) aan.
  3. Zodra deze instelling is ingeschakeld, worden achtergrondacties gepland.
    • De actie wc_schedule_pending_batch_process controleert of er orders zijn die moeten worden teruggezet.
    • Als die er zijn, plant het een andere actie (wc_run_batch_process) om deze orders terug te zetten naar berichtenopslag.
    • Je kunt wachten tot deze acties vanzelf uitgevoerd worden (wat niet lang zou moeten duren), of je kunt naar WooCommerce > Status > Geplande Acties gaan, de acties vinden en op de Uitvoeren-knop klikken.
    • Deze actie zal 25 orders tegelijk terugvullen; als er meer orders gesynchroniseerd moeten worden, worden verdere acties gepland zodra de voorgaande acties voltooid zijn.
  4. Nadat beide tabellen succesvol gesynchroniseerd zijn, kun je de optie selecteren om helemaal over te schakelen naar HPOS.
    • Het is wel aan te raden om enige tijd de compatibiliteitsmodus te blijven gebruiken om een goede overgang te verzekeren. In geval van problemen kan direct teruggekeerd worden naar de _posts tabel.

Incompatible plugins HPOS

Je kunt niet standaard HPOS activeren. Het kan zijn dat je deze optie nog niet kunt activeren omdat niet alle plugins hiervoor geschikt zijn. Vooral verouderde WordPress plugins die niet recent bijgewerkt zijn kunnen problemen geven.

Als je klikt op ‘bekijk en beheer’ onder de melding incompatible plugins gedetecteerd bij de HPOS instellingen in WooCommerce krijg je een overzicht van de plugins die nog niet compatible zijn. Je kunt dan kijken of er misschien toch een update beschikbaar is of deze plugins vervangen of verwijderen.

HPOS WooCommerce uitschakelen

Mocht je toch problemen hebben met HPOS ingeschakeld dan kun je als eerste de compatibiliteitsmodus inschakelen. Dit is een vinkje wat je vind in WooCommerce > Instellingen > Geavanceerd > Functies. Als je dit inschakelt gebruikt WooCommerce zowel de standaard Post tabellen als de nieuwe Order tabellen.

HPOS Feature

Dit is uiteraard wel een tijdelijke oplossing voor je probleem. Beter is om helemaal om te schakelen naar HPOS.

Mocht de compatibiliteitsmodus niet voldoende zijn om je problemen op te lossen dan kun je weer terugschakelen naar de Posts instellingen. Dit is de bovenste optie in het screenshot hierboven.

De complete uitleg over HPOS van WooCommerce vind je hier.

Content Layout Shift (CLS) is een term die gebruikt wordt in de wereld van webdesign en website-optimalisatie. Het is iets waar website-eigenaren zich zeker bewust van moeten zijn.

Wat is Content Layout Shift (CLS)?

CLS verwijst naar het onverwachte verschuiven van webpagina-elementen terwijl de pagina nog aan het laden is of wanneer de gebruiker al door de pagina bladert. Dit kan erg vervelend zijn voor bezoekers.

Core Web Vitals

Stel je voor dat je op een knop probeert te klikken maar net op dat moment verschuift de pagina en klik je per ongeluk ergens anders op. Dit kan leiden tot een frustrerende ervaring voor de gebruiker waardoor deze afhaakt.

Een hoge CLS-score kan zoals gezegd direct negatieve gevolgen hebben voor de gebruikerservaring. Bezoekers kunnen geïrriteerd raken en de site verlaten als ze moeite hebben met navigeren of lezen vanwege verschuivende content. Bovendien heeft Google CLS opgenomen als een van de factoren voor zijn “Core Web Vitals,” wat betekent dat het ook invloed kan hebben op je zoekmachineoptimalisatie (SEO) en hoe hoog je website scoort in zoekresultaten.

De eisen voor de CLS score zijn door Google als volgt bepaald: Om een goede gebruikerservaring te bieden moet de waarde van de CLS 0.1 of minder zijn.

CLS redenen

CLS kan om verschillende redenen gebeuren, zoals hieronder een paar voorbeelden. Dit zijn de meest voorkomende oorzaken van een layout shift.

  • Afbeeldingen of video’s zonder vooraf gedefinieerde afmetingen in de CSS (breedte en hoogte) die plotseling laden en de rest van de content naar beneden duwen.
  • Dynamisch geladen inhoud zoals advertenties of widgets die ineens in de pagina verschijnen en andere inhoud verschuiven. Zoals bijvoorbeeld ads van Mediavine.
  • Webfonts die laden en de tekstgrootte of -stijl veranderen, waardoor de lay-out verschuift.
  • Interactieve elementen die later dan de rest van de pagina laden en de pagina-indeling aanpassen als ze verschijnen door de grootte.

CLS voorbeeld

Content Layout Shift visueel maken

Naast de hierboven beschreven tools zijn er nog diverse andere tools waarmee je iets gemakkelijker de Content Layout Shift van je website of webshop zichtbaar kunt maken. Een aantal hebben we voor je op een rijtje gezet.

Met de Google Chrome Extensie met de naam CLS Checker kun je vanuit je browser direct bekijken wat de CLS van een willekeurige website is.

Via de gratis tool van Web.vitals kun je online bekijken wat de CLS van een url is. Het voordeel van deze tool is dat er niet alleen gekeken wordt naar de test via jouw browser op jouw apparaat maar dat er ook gekeken wordt naar Real User Monitoring data via de Google API waardoor gekeken wordt naar het gemiddelde van alle bezoekers over de afgelopen 28 dagen op de url. Hiermee krijg je dus een beter beeld dan via de meeste tools.

Webvitals.dev CLS

Als je inzichtelijk wilt maken voor bijvoorbeeld een klant of de marketingafdeling wat de Content Layout Shift veroorzaakt en wat de impact van bepaalde onderdelen van de website is dan kun je dit snel en eenvoudig inzichtelijk maken met de Layout Shift GIF Generator. Deze vind je hier.

Google tools om Content Layout Shift te meten

Er verschillende tools beschikbaar om de CLS van je website inzichtelijk te maken en te helpen identificeren wat aangepast moet worden. Enkele van deze tools zijn hieronder beschreven.

Google PageSpeed Insights

Deze tool van Google PageSpeed Insights analyseert de content van een webpagina, rapporteert over de CLS en geeft suggesties om de pagina te verbeteren.

Lighthouse

Lighthouse is een open-source, geautomatiseerde tool van Google die kwaliteitscontroles uitvoert op webpagina’s, inclusief performance, toegankelijkheid, en meer. Lighthouse biedt gedetailleerde rapporten over CLS.

Web Vitals Chrome Extension

Deze extensie voor de Chrome browser biedt een real-time weergave van de Core Web Vitals (inclusief CLS) tijdens het browsen.

Chrome DevTools

Voor ontwikkelaars bieden de Chrome DevTools mogelijkheden om layout shifts visueel te inspecteren en te identificeren welke elementen voor verschuivingen zorgen.

Als de categorie niet wordt getoond in de breadcrumbs van RankMath bij een bericht, kun je de volgende stappen ondernemen om het probleem op te lossen:

Controleer RankMath breadcrumb-instellingen

Zorg ervoor dat de breadcrumbs functie van Rank Math correct is ingesteld en geactiveerd. Ga naar de RankMath-instellingen in je WordPress dashboard en controleer of de breadcrumb-instellingen correct zijn geconfigureerd.

Categorie correct toegewezen aan bericht?

Ga naar de bewerkingspagina van het bericht en controleer of de categorie correct is toegewezen. Als een bericht niet correct is toegewezen aan een categorie, zal deze categorie niet verschijnen in de breadcrumbs.

Staat primaire categorie in RankMath goed ingesteld voor berichten?

In RankMath bij berichten heb je de optie om aan te geven wat de primaire categorie is van een bericht. Vaak staan deze instellingen niet goed waardoor de categorie niet getoond zal worden.

Primaire categorie RankMath

Check je thema instellingen

Sommige thema’s, zoals bijvoorbeeld het Avada thema, hebben hun eigen breadcrumb-functionaliteit of kunnen op een bepaalde manier zijn gestructureerd die conflicteert met de breadcrumb-generator van RankMath. Controleer de documentatie van je thema of neem contact op met de ondersteuning van het thema om te zien of er specifieke compatibiliteitsproblemen zijn met RankMath’s breadcrumbs.

Neem contact op met RankMath support

Als geen van de bovenstaande oplossingen werkt, is het een goed idee om contact op te nemen met de ondersteuning van RankMath. Ze kunnen specifieke begeleiding bieden op basis van jouw situatie en eventuele bekende problemen of bugs.

Microsoft Clarity is een gratis analysetool die website-eigenaren en online marketeers inzicht geeft in hoe bezoekers met hun website omgaan.

Microsoft Clarity LogoHet stelt je in staat om het gedrag van gebruikers op je website te begrijpen door middel van functies zoals heatmaps, sessie-opnames en rapporten over gebruikersinteracties. Hierdoor kun je knelpunten identificeren, de gebruikerservaring verbeteren en uiteindelijk je conversieratio’s verhogen.

Microsoft Clarity is een directe concurrent van bijvoorbeeld Hotjar of Mouseflow. Goed om te weten dat is dat uit testen van Rumvision blijkt dat Clarity veruit de minste impact heeft op de snelheid van je website. Uiteraard ook goed om mee te nemen in een overweging qua tools.

Hoe werkt Microsoft Clarity?

  1. Heatmaps: Deze tonen visueel waar bezoekers het meest klikken, scrollen en hun aandacht aan besteden op een pagina. Met deze inzichten kun je begrijpen welke delen van je website de meeste aandacht trekken en welke genegeerd worden. En de pagina’s van je website of webshop verder optimaliseren voor meer conversie.
  2. Sessie-opnames: Clarity neemt daadwerkelijke gebruikerssessies op, waardoor je kunt zien hoe bezoekers door je website navigeren, waar ze op klikken, en waar ze mogelijk vastlopen. Dit is alsof je over de schouder van je bezoekers meekijkt, zonder hun privacy te schenden.
  3. Gebruikersinzichten: Het biedt gedetailleerde rapporten over problemen zoals snelle back-klikken (wanneer bezoekers snel terugkeren naar de zoekresultaten), dode klikken (klikken op elementen die niet reageren), en overmatig scrollen, wat wijst op mogelijke verwarring of een slechte gebruikerservaring.

Microsoft Clarity

Waarom Microsoft Clarity gebruiken?

  • Gebruikerservaring verbeteren: Door te begrijpen hoe bezoekers met je site omgaan, kun je aanpassingen maken om hun ervaring te verbeteren. Dit kan leiden tot een hogere betrokkenheid en meer conversies.
  • Identificeer probleemgebieden: Clarity helpt bij het identificeren van gebieden op je website die niet goed presteren of waar gebruikers vastlopen. Dit stelt je in staat om specifieke problemen aan te pakken en oplossingen te implementeren.
  • Verbeter de Conversieratio: Door de navigatie te stroomlijnen en obstakels voor gebruikers te verwijderen, kun je de weg vrijmaken voor een hogere conversieratio.
  • Kostenefficiënt: Aangezien Microsoft Clarity gratis is, biedt het een kosteneffectieve manier voor bedrijven van elke grootte om diepgaande inzichten in gebruikersgedrag te krijgen zonder te investeren in dure software.

Microsoft Clarity een krachtige tool voor website-analyse die je waardevolle inzichten kan bieden in hoe bezoekers je website gebruiken. Door deze inzichten te gebruiken, kun je gerichte verbeteringen doorvoeren om de prestaties van je website te optimaliseren, wat uiteindelijk kan leiden tot een betere gebruikerservaring en meer succes voor je bedrijf.

FacetWP is een geavanceerde filter plugin voor WordPress, waarmee gebruikers krachtige filters kunnen toepassen op lijsten met berichten, producten, of andere aangepaste posttypes. Elementor is een populaire page builder voor WordPress die het mogelijk maakt om visueel aantrekkelijke pagina’s te ontwerpen met een eenvoudige drag-and-drop interface.

FacetWP ElementorFacetWP integreren in Elementor template

Het integreren van FacetWP binnen een Elementor template kan de gebruikerservaring aanzienlijk verbeteren door dynamische filteringsopties toe te voegen aan je pagina’s. Als je FacetWP Elementor widgets actief hebt in een specifiek template moet je in de template zelf ook nog aangeven dat er FacetWP gebruikt kan worden. Dit doe je door de schuif in de template om te zetten, hierna zullen de Facets direct zichtbaar en actief zijn.

Meer informatie over de Elementor add-on vind je op de FacetWP website.

Als je FacetWP wilt gebruiken in de Elementor pagebuilder heb je een extra add-on nodig van FacetWP. Na installatie en activatie is er geen verdere configuratie nodig voor de add-on plugin van FacetWP in Elementor.

FacetWP Elementor

FacetWP Elementor add-on

Als de plugin actief is heb je binnen Elementor de optie voor drie verschillende soorten FacetWP widgets. De eigen ingebouwde widgets van FacetWP kunnen worden gebruikt om facetten, lijsten en FacetWP-gerelateerde knoppen toe te voegen.

Als je deze toevoegt kun je een eerder aangemaakte Facet selecteren en eventueel een titel meegeven. Je kunt er ook voor kiezen om de FacetWP titels automatisch te laten tonen of verbergen.

Meer informatie over de Elementor add-on vind je op de FacetWP website.

Als je werkt met het Flatsome thema dan kun je WordPress pagina’s en berichten bewerken door middel van de UX builder. Standaard opent deze in de desktop modus van je website en kun je hier blokken bijvoegen of verwijderen. Uiteraard wil je ook graag weten hoe je website eruit ziet op een mobiel apparaat.

Mogelijk wil je ook aanpassingen maken specifiek op een mobiele telefoon of tablet. Dit is mogelijk om dit direct in de UX builder aan te passen.

Mobiele versie in UX builder

Bewerk een pagina in de UX builder en klik zoals je in de onderstaande afbeelding ziet helemaal rechts in beeld op het tablet of mobiele telefoon icoon.

Flatsome UX

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.