Query Filter Greenshift - Kadence - Filter Everything

Hoe presteren verschillende filter plug-ins

Als je een mooie presentatie hebt gemaakt van een serie opgevraagde pagina’s, posts of custom post, heb je vaak een filter nodig. Daarmee kan de gebruiker (bezoeker) zelf bepalen wat deze wil zien.
Het ene filter werkt aanzienlijk beter, efficiënter en sneller dan de ander en de weergave op mobiel is ook totaal verschillend. Hier gaan we in op de verschillen van drie Query Filters. De snelheden zijn getest met Google PageSpeed Insight. Alles is ‘puur’ getest, dus zonder enige vorm van cache of CDN.

De basis condities

Ik heb drie query’s gemaakt, of eigenlijk 3 query blocks voor dezelfde custom posts. Alle drie op dezelfde site, met een FSE thema, Greenshift FSE. Het filter wordt ingesteld om te filteren op (custom) categorie met een totaal van ongeveer 160 custom posts.

Query met native WordPress Query loop block
Query met Kadence Query Loop adv. block
Query met Greenshift blocks

De filters in de test

Kadence filter (standaard aanwezig in Kadence blocks Pro)
Greenshift filter block (standaard aanwezig in Greenshift Query Pro)
Filter Everything, een pro plug-in van Envato

De tests

Test 1) Kadence Query block en filter

Bij Kadence blocks pro is het filter verweven met het Kadence query block adv. Omdat het Kadence Query Loop adv. block bestaat uit meerdere sub-blocks in kolommen of containers, kun je de hele lay-out naar wens aanpassen.

Instellen Kadence filter

Het instellen van het Kadence Query Filter is heel eenvoudig; je kiest Taxonomie of post meta, en daarna waar je op wilt filteren; in deze situatie op categorie. Vervolgens kun je naar wens categorieën toevoegen of uitsluiten. Als je niets instelt, wordt gefilterd op alle. Verder kun je naar wens de labels, de kleuren, corps, etc, instellen.

Snelheid Kadence filter

We hebben het Kadence filter getest met de Kadence query. De snelheid was uitstekend.

Mobiel: 95
Desktop 98

Test 2) Greenshift Query block en filter

Bij Greenshift blocks pro is heeft de query een ingebakken filter, maar deze functioneert uiterst slecht. Ze hebben ook een apart filter block; die werkt goed en is gebruikt voor de test. Het block plaats je apart boven of naast de query, dus qua lay-out kun je ook hier veel aanpassen.

Instellen Greenshift filter

Het instellen van het Greenshift Query Filter is wat lastiger; Eerst moet je een index opbouwen van de posts. Je gaat bij de Admin naar Greenshift / Indexing, en kiest de juiste post. Het indexeren duurt, afhankelijk van de hoeveelheid posts, 10-20 minuten of meer. Vervolgens moet je de query en het filter aan elkaar koppelen. Dat klinkt lastig, maar dat is het niet. De code vind je bij de query vlak bij het class field, en plak je in het juiste veld van het filter. Daarna kies je, net als bij het Kadence filter voor de weergave, zoals dropdown, tags, etc..

Snelheid Greenshift filter

We hebben het Greenshift filter getest met de Greenshift query. De snelheid was uiterst matig, terwijl het maar om 160 pagina’s gaat.

Mobiel: 64
Desktop 70

Test 3) Greenshift Query block met Filter Everything plug-in

Bij deze 3e test hebben we gekozen voor een externe plug-in, Filter Everything, in combinatie met de query van Greenshift. Filter Everything stel je in naar wens, en plaats je op de pagina middels een shortcode.

Instellen Filter Everything

Het instellen van Filter Everything is heel eenvoudig; je maakt een ‘Filterset’ aan, en kiest de instellingen voor jouw query. De keuze qua dropdown, tags, etc. is ongeveer hetzelfde als het filter van Kadence en Greenshift. Je hebt meer mogelijkheden om de mobiele weergave te bepalen en de SEO-instellingen zijn uitgebreid. Indexeren is niet nodig; na het plaatsen van de shortcode werkt het perfect, ook op mobiel. Voordeel is ook dat, als je kiest voor tags, deze netjes in een dropdown staan op mobiel en niet je halve beeldscherm innemen.

Snelheid met Filter Everything

De snelheid was meer dan uitstekend; beter dan het Greenshift filter en zelfs een pietsje beter dan het Kadence filter, al scheelde dat weinig.

Mobiel: 97
Desktop 99

Conclusie Filter vergelijking

Als je kiest voor een ‘ingebouwde’ oplossing in een block builder die je al gebruikt, is Kadence een aanzienlijk betere keuze dan Greenshift. Als je het beste van het beste wilt, qua gebruiksgemak voor de bezoeker, maar ook qua snelheid, is Filter Everything de beste keuze. En Filter Everything werkt perfect met Kadence, met Greenshift, en ook met de native Query loop van Gutenberg zelf.