Ook wanneer performance je aan het hart gaat of een WPO-er bent, is de kans aanwezig dat niet alleen jouw online concurrent, maar ook jij performance optimalisatie verkeerd doet. Twee handenvol kenmerken:
KISS voor performance
Meer plugins betekent veelal meer impact op performance, zowel beïnvloed vanuit server side (meer taken voor het CMS) als ook client side (meer JavaScript en CSS bestanden).
Performance optimalisatie hoeft in de basis dus niet moeilijk te zijn, ofwel Keep It Simple Stupid. Bijvoorbeeld:
- Heb je echt een handvol (Wordpress) plugins nodig?
Plugins geven je vrijheid, maar hebben ook impact op de Time to First Byte (TTFB); - Heb je echt die (Wordpress) plugin nodig, die een gelijkende tweede jQuery, FontAwesome of Bootstrap versie invoegt, bovenop de thema?
Probeer, ondanks dat Wordpress plugins niet samenwerken, toch al aanwezige Wordpress resources te hergebruiken; - Zijn er daadwerkelijk drie custom (Google) Fonts benodigd?
Overleg met de ontwerper en opdrachtgever een performance budget en optimaliseer je fonts; - Zijn er daadwerkelijk meerdere third party tracking snippets benodigd van bijvoorbeeld Hotjar, Salesfeed, LeadElephant, een losse Google Analytics èn Google Tag Manager snippet? Probeer ook met de marketeer een performance budget af te spreken en verwijder bijvoorbeeld Hotjar, zodra er voldoende meetgegevens zijn in geval van een nieuwe website;
Enkele tot de verbeelding sprekende voorbeelden dus. Maar zelfs wanneer je bovenstaande punten hebt getackeld, of nog gaat tackelen, is de kans groot dat performance optimalisatie nog steeds op onjuiste of ongelukkige wijze plaats vindt.
En nee, technieken als AMP, PWA of HTTP/2 zijn (hoezeer ik deze technieken ook aanhang) niet een out-of-the-box oplossing voor je performance problemen.
Meer conversie bij snellere laadtijd
De performance van een website of webshop kan op meerdere vlakken verbeterd worden. Hiervoor duiken we buiten bovenstaand om, iets meer onder de motorkap van websites. Grote kans dat elk punt niet op ideale wijze plaats vindt op je website, waardoor de ervaren websitesnelheid door je bezoekers slechter is dan nodig. Laadt de website of productpagina binnen twee seconden, dan zal je conversie 15% hoger liggen dan de gemiddeld mobiele website of webshop.
Hoe je performance optimalisatie toch nog fout doet
Voel je overigens niet per definitie onder-geoptimaliseerd na het doornemen van onderstaande lijst; van de Emerce 100 beste (top 14) analytics en optimalisatiebureau's, scoort exact de helft een onvoldoende, met een PageSpeed Insights score tussen 17 en 41 procent. Slechts één optimalisatie-bureau (en de enige zonder CMS) scoort met een percentage van 97 in de groene cijfers (90-100%).
Google's Lighthouse Analyse tool vormt een goede basis om de performance van je website of productpagina in kaart te brengen. Geen Lighthouse tot je beschikking, haal je website dan eens door PageSpeed Insights.
Buiten de meer logische performance optimalisaties om, is de kans groot dat je dit nog verkeerd doet:
- Een (Wordpres) plugin voor het minimaliseren van JS en CSS bestanden?
Een goed begin, maar combineer dit met degelijke server side caching, om impact op TTFB te voorkomen; - Een plugin voor het samenvoegen (mergen) van bronbestanden?
Binnen Wordpress gebeurt dit vaak halfslachtig, waarbij bronbestanden (op dezelfde server) van specifieke plugins soms niet worden meegenomen. Vertrouw dan bij voorkeur op HTTP/2 en de-installeer de plugin voor betere TTFB; - Gebruik je resource hints?
Grote kans dat in het geval van Wordpress, resource hints onzorgvuldig worden ingezet; - Via een plugin Critical CSS ge-embed?
Een best-practice om de weergave boven de vouw direct uit te tekenen. Vooral in het geval van Wordpress kom ik tegen dat de hele stijlsheet ge-embed wordt en zelfs fonts in de Critical CSS wordt opgenomen. Dit druist tegen het doel in en werkt juist averechts! - Op elke pagina Critical CSS embedden?
Klinkt logisch, maar is minstens zo pijnlijk als bovenstaand. Want: je benut niet meer het voordeel van client side caching, in het geval van DeOnlineDrogist.nl nam de content-download toe van elk individuele (product)pagina met 633% (inderdaad drie cijfers) door deze techniek; - Ontdaan van (third party) trackers tegen de hoeveel cookies?
Goed voor privacy, maar probeer de resterende cookies minimaal uit te sluiten voor requests naar statische bestanden, zoals scripts of afbeeldingen. Plaats de website op de www-omgeving, om brondbestanden over niet-www te serveren. Geen specifieke server instellingen benodigd en je reduceert network-latency; - JS animaties ingeruild voor CSS animaties?
Een goed begin, maar zorg dat je de animatie zoals kleiner worden van header en logo bij scrollen, plaats laat vinden over de GPU in plaats van CPU. Animaties zijn niet afhankelijk van andere JS taken en (daarmee) minder schrokkerig; - Gebruik je een CDN voor JS frameworks?
Sommige Wordpress plugins halen hun bestanden van Content Delivery Networks, maar gebruiken elk een andere CDN. Denk aan cdnjs.cloudflare.com voor FontAwesome, maxcdn.bootstrapcdn.com voor Bootstrap en code.google.com voor jQuery. Onnodige DNS look-ups en dus genereert het onnodig network latency. Probeer externe resources via dezelfde omgeving te serveren!
Doe je dit al, staat het op de planning voor je website of webshop of hulp benodigd bij verdere performance optimalisatie? Zie wat ik in praktijk voor je kan betekenen of informeer naar de automatische performance optimalisaties dat het LightBolt CMS uit handen kan nemen.
