Wil je je e-commerce website herlanceren of een gloednieuwe lanceren? Het is een spannende uitdaging omdat e-commerce enorme groeikansen biedt voor bedrijven die zich met verkoop bezighouden. En een goede online aanwezigheid kan de sleutel tot succes zijn of een noodzakelijke keuze om de internationale concurrentie te overleven.

E-commerce kan je in staat stellen om uitstekende lokale producten wereldwijd op de markt te brengen zonder tussenkomst van distributie, gebruik te maken van geavanceerde marketingstrategieën, zoals gerichte reclame en social media-campagnes, en te profiteren van AI-tools om de operationele efficiëntie, klantervaring en marketingstrategieën te verbeteren.

Het lanceren van een e-commercesite vereist echter zorgvuldige strategische en organisatorische planning, een grondige analyse van kosten en baten, sterke en zwakke punten, bedreigingen en kansen.

En dat is nog niet alles. Om te slagen met je e-commerce heb je een moderne, snelle, veilige website nodig om je bedrijf te ondersteunen. Een succesvolle e-commerce website moet een soepele winkelervaring bieden, voldoen aan internationale privacyregels zoals GDPR, veilige transacties garanderen en je klanten door de sales funnel begeleiden tot het punt van aankoop.

Hij moet SEO geoptimaliseerd zijn, schaalbaar wanneer nodig, flexibel en eenvoudig te beheren, zodat je je kunt richten op je bedrijf zonder tijd en middelen te verspillen aan technische problemen.

Dat is geen gemakkelijke taak, maar een e-commerce website kan je geweldige mogelijkheden bieden om je bedrijf te laten groeien.

Samengevat zijn er drie gebieden waar je rekening mee moet houden bij het plannen van een e-commerce website: prestaties, beveiliging en functionaliteit.

Daarom hebben we onze beste aanbevelingen voor e-commerce optimalisatie verzameld in drie artikelen, elk gericht op een van deze drie gebieden.

Dit eerste artikel richt zich op de prestaties, met een checklist van 10 best practices om je e-commerce website te optimaliseren voor snelheid en prestaties.

In de volgende twee artikelen richten we ons op de beveiliging van de site en de functionaliteit van de hostingdienst, waarbij we stilstaan bij de voordelen die een voor e-commerce geoptimaliseerde hosting kan garanderen.

Ben je klaar om te weten wat je nodig hebt om een succesvolle e-commerce website te lanceren en internationale markten te veroveren? Lees dan snel verder!

Waar te beginnen om een moderne e-commerce website te lanceren

Een moderne e-commerce website heeft verschillende technische en functionele functies nodig om de interactie tussen de gebruiker en de site te verbeteren, zodat je een rijke en prettige browse- en winkelervaring biedt.

Technisch gezien moet een e-commerce website geoptimaliseerd zijn voor prestaties en veiligheid. Hij moet eenvoudig te beheren zijn voor je team en gemakkelijk schaalbaar.

Voor het bouwen van een website met deze kenmerken is een geavanceerde infrastructuur nodig, een Content Delivery Network van zakelijk niveau, geavanceerde features voor ontwikkelaars, een efficiënt en gebruiksvriendelijk backupsysteem en een snelle en vakkundige ondersteuningsdienst.

De eerste stap voordat je een e-commerce website kunt lanceren, is dus uitzoeken waar je de diensten en tools kunt krijgen die je nodig hebt. Deze beslissing gaat over het kiezen van de hostinginfrastructuurprovider. De opties zijn bijna eindeloos. Je kunt ervoor kiezen om je servers te beheren door een systeembeheerder in te huren of te kiezen voor een volledig beheerde oplossing, zoals Wix of Shopify.

De eerste optie, het zelf beheren van de server, biedt maximale flexibiliteit en maatwerk. Het vereist echter aanzienlijke middelen en bekwame systeembeheerders. Grote bedrijven kiezen meestal voor deze oplossing.

De tweede optie, volledig beheerde platforms, heeft het voordeel van groot gebruiksgemak, maar garandeert niet de technische en operationele flexibiliteit die je bedrijf nodig heeft. Als het bedrijf groeit, kunnen er bovendien onvoorspelbare kosten ontstaan.

Ergens tussen deze twee uitersten in zijn er oplossingen die gebaseerd zijn op een open-source platform in combinatie met een hostingservice die de functies biedt die nodig zijn voor e-commerce.

Je kunt diep in de verschillen tussen enkele van de beschikbare opties duiken in onze vergelijkingsartikelen:

WooCommerce plugin pagina op WordPress.org
WooCommerce plugin pagina op WordPress.org

Bij Kinsta bieden we eersteklas hosting voor e-commerce websites. Onze infrastructuur is geoptimaliseerd voor prestaties, beveiliging en gebruiksgemak voor WordPress websites, in combinatie met de populairste e-commerce plugins, WooCommerce en Easy Digital Downloads. Onze geïsoleerde containertechnologie is gebouwd bovenop Google Cloud Platform en maakt gebruik van de kracht van het netwerk van Cloudflare om maximale prestaties en veiligheid te garanderen.

Dit is de technische oplossing die we aanraden aan iedereen die zich de vraag stelt: wat is de beste hostinginfrastructuur voor een moderne e-commerce website?

Laten we aan de slag gaan met e-commerce prestaties!

10 best practices om de prestaties van je e-commerce website te optimaliseren

Volgens recent onderzoek naar e-commerce conversiepercentages ligt de belangrijkste succesfactor van een e-commerce website in de laadsnelheid van de pagina. Een e-commercesite die in 1 seconde laadt, heeft een 2,5 keer zo hoog conversiepercentage als een site die in 5 seconden laadt.

Bovendien hebben pagina’s die in 1 seconde laden een gemiddeld conversiepercentage van ongeveer 40%. Als de laadtijd toeneemt tot 2 seconden, daalt het conversiepercentage tot 34%. Bij 3 seconden is het conversiepercentage 29% en bereikt het een minimum bij 6 seconden.

De analyse suggereert om je e-commerce te optimaliseren voor een laadsnelheid tussen één en twee seconden.

Hoe kan dit prestatieniveau worden bereikt? Prestatieoptimalisatie is een proces van voortdurende verbetering dat invloed heeft op verschillende onderdelen van een website. De strategische waarde ervan is vooral duidelijk voor e-commerce, dat over het algemeen grotere hoeveelheden resources verbruikt.

Om eigenaren van e-commerce te helpen hun websites te optimaliseren voor prestaties, hebben we een essentiële checklist gemaakt van de optimalisaties die nodig zijn om de prestaties en paginasnelheid te verbeteren.

Dus wat zijn de belangrijkste factoren om rekening mee te houden bij het optimaliseren van je e-commerce website voor prestaties? Laten we snel kijken!

1. Kies een geavanceerde hostinginfrastructuur en technische stack

Bij het kiezen van een hostingservice voor je e-commerce website is het essentieel om te weten welke technologie deze biedt.

De eerste beslissing gaat over het type hostingservice. Er zijn verschillende soorten webhosting, die aanzienlijk verschillen in infrastructuur en services:

  • Gedeelde hosting
  • Dedicated hosting
  • VPS hosting
  • Cloud hosting
  • Managed WordPress hosting

Omdat het noodzakelijk is om maximale prestaties voor je e-commerce te garanderen, moet de infrastructuur supersnel zijn. Dit sluit gedeelde hosting uit, die weliswaar goedkoop (of zelfs gratis) is, maar niet de minimumnormen voor prestaties en beveiliging garandeert waar een e-commercesite niet zonder kan om succesvol te zijn op de markt.

Een dedicated VPS-hostingservice kan in hoge mate worden aangepast en geoptimaliseerd voor prestaties. Het vereist echter wel SysAdmin-vaardigheden, wat te duur kan zijn voor een klein of middelgroot bedrijf. Een cloud hosting service kan prestaties en beveiliging bieden voor een moderne e-commerce website en vereist geen geavanceerde technische vaardigheden.

Het is gemakkelijk om managed WordPress en WooCommerce hosting serviceproviders te vinden als je met WordPress werkt. Dit betekent dat je niet verantwoordelijk bent voor serverconfiguratie en -optimalisatie, en dat je gespecialiseerde ondersteuningsservice en vereenvoudigde site-installatie en -onderhoud krijgt.

Het is ook noodzakelijk om je website te voorzien van een state-of-the-art technische stack. De meeste webhosts leveren een stack gebaseerd op Apache webserver en MySQL. Je kunt echter een modernere, goed presterende technologiestack overwegen, zoals Nginx en MariaDB.

Kinsta hostinginfrastructuur en technische stack

Bij Kinsta geloven we dat we de beste en snelste managed WordPress hosting oplossing hebben gemaakt die vandaag de dag beschikbaar is. En deze is gebouwd bovenop het Google Cloud Platform.

Google Cloud regio's
Google Cloud regio’s (Bron: Google)

We bieden C3D en C2 compute optimimized VM’s voor alle pakketten, van Starter tot Enterprise en verder, in de regio’s waar ze beschikbaar zijn. We maken ook gebruik van Google’s Premium Tier-netwerk met lage latency, dat zonder extra kosten beschikbaar is voor al onze klanten.

Google Cloud-netwerk
Google Cloud-netwerk (Bron: Google)

Daarnaast hebben we een snelle en solide techstack gebouwd op basis van Nginx, MariaDB, PHP 8.3, LXD container en onze integratie van Cloudflare Enterprise. Deze stack is beschikbaar voor al onze klanten, ongeacht hun pakket.

Bekijk dit bericht om te leren waarom Kinsta de snelste managed WordPress host is.

2. Gebruik ondersteunde PHP versies

Volgens W3Techs (augustus 2024):

PHP wordt gebruikt door 76,1% van alle websites waarvan we de server-side programmeertaal kennen.

Versie 7 wordt gebruikt door 52,6% van alle websites die PHP gebruiken, versie 8 door 33,0% en versie 5 door 14,2%.

Als je een e-commerce website beheert, moet je weten welke PHP versie je site gebruikt en waarom je de voorkeur zou moeten geven aan een ondersteunde versie.

In het kort: PHP heeft een release-levenscyclus en elke grote release wordt meestal twee jaar ondersteund. Ondersteunde versies zijn de enige die prestatie- en beveiligingsupdates ontvangen, dus het gebruik van een niet-ondersteunde versie van PHP betekent verminderde prestaties en meer beveiligingslekken in vergelijking met ondersteunde versies.

In augustus 2024 zijn de officieel ondersteunde versies van PHP PHP 8.1, 8.2 en 8.3.

Ondersteunde PHP versies
Ondersteunde PHP versies (Bron: PHP.net)

We hebben onze eigen snelheidstests uitgevoerd met PHP 8.1, 8.2 en 8.3 en verschillende CMS’en en frameworks, en we ontdekten dat PHP 8.3 de snelste PHP versie bleek te zijn, met een prestatieverhoging tot 52,20% voor de geteste CMS’en en frameworks.

PHP versies op Kinsta

Bij Kinsta leveren we alleen ondersteunde PHP versies. Op dit moment ondersteunen we PHP 8.1, 8.2, 8.3.

Je kunt snel en eenvoudig de PHP versie van je WordPress website wijzigen in MyKinsta. Navigeer naar de configuratiesectie van je WordPress website en selecteer Tools in het linkermenu. Hier vind je verschillende tools die beschikbaar zijn voor onze klanten. Scroll naar beneden en vind PHP engine. Klik op de knop Wijzigen en selecteer de PHP versie die je nodig hebt voor je website.

PHP-engine wijzigen in MyKinsta
PHP-engine wijzigen in MyKinsta

3. Gebruik de cache voor betere prestaties

De cache is een deel van het geheugen dat wordt gebruikt om kopieën van bronnen op te slaan die bij toekomstige verzoeken kunnen worden geserveerd zonder de volledige pagina opnieuw te downloaden. Er zijn verschillende soorten caches, elk met een specifiek doel, maar de soorten caches waar we hier in geïnteresseerd zijn, zijn de browser cache en de WordPress cache.

Elk antwoord van de server moet de juiste HTTP headers bevatten, zodat de browser weet hoe lang een kopie van de opgevraagde bron in de cache moet worden opgeslagen. Dit wordt gedaan door ETag en Expires headers in te stellen in het HTTP verzoek.

WordPress heeft zijn eigen caching systeem. Het object WP_Object_Cache zorgt voor een vermindering van het aantal verzoeken aan de database: “De Object Cache slaat alle cachegegevens op in het geheugen en maakt de cache-inhoud beschikbaar door een sleutel te gebruiken, die wordt gebruikt om de cache-inhoud een naam te geven en later op te vragen.”

WordPress gebruikers kunnen een externe caching plugin van derden voor WordPress installeren. Met tools zoals W3 Total Cache en WP Super Cache kun je de WordPress cache beheren. Ze kunnen erg handig zijn als je kiest voor een gedeelde hostingoplossing of als de webhost geen efficiëntere oplossingen voor cachebeheer biedt.

Deze tools zijn ingewikkeld om te configureren en vereisen kennis die niet alle site-eigenaren hebben. Kortom, je hebt een eenvoudige manier nodig om je cache te beheren.

Caching plugins in de WordPress plugins bibliotheek
Caching plugins in de WordPress plugins bibliotheek

Wat e-commerce betreft, wil je misschien ook specifieke pagina’s, zoals mijn account en afrekenen, uitsluiten van de cache. Dit is cruciaal voor een vlekkeloze winkelervaring voor de klanten van je website. Maar hoe kun je dat doen?

Cachebeheer bij Kinsta

Cachebeheer kan ontmoedigend zijn, vooral als je geen technische vaardigheden hebt. Bij Kinsta is het beheren van de cache echter eenvoudig, en alle instellingen zijn handig verzameld in een enkele sectie van je MyKinsta dashboard.

Het belangrijkste verschil tussen Kinsta cache en externe WordPress plugins is dat Kinsta cache op serverniveau werkt.

Navigeer in MyKinsta naar WordPress sites en selecteer je website. Klik op de pagina met site-instellingen op het menu-item Caching aan de linkerkant en selecteer het tabblad Server caching. Hier kun je de cache wissen en de cachevervaltijd wijzigen.

Cache verloop wijzigen in MyKinsta
Cache verloop wijzigen in MyKinsta

Caching plugins zijn niet toegestaan op Kinsta, wat klinkt als een tegenstrijdigheid met wat we in de vorige sectie hebben gezegd. Toch is dit omdat Kinsta de cache op de server voor je regelt en dus betere prestaties en eenvoudiger beheer biedt.

Specifiek voor WooCommerce en EDD websites omzeilt Kinsta automatisch de cache wanneer woocommerce_items_in_cart of edd_items_in_cart cookies worden gedetecteerd. Dit zorgt voor een soepele winkelervaring voor al je klanten.

Kinsta-gebruikers kunnen de cache ook rechtstreeks vanuit hun WordPress-dashboard beheren dankzij de Kinsta MU-plugin, die automatisch wordt geïnstalleerd op alle nieuwe WordPress-websites die door Kinsta worden gehost.

Kinsta MU WordPress plugin instellingen
Kinsta MU WordPress plugin instellingen

In het Kinsta cache scherm kun je de volgende acties uitvoeren:

  • Alle caches wissen
  • Site cache wissen
  • Object cache wissen
  • CDN cache wissen
  • Je eigen URL’s toevoegen om te wissen
  • Automatisch wissen in-/uitschakelen

De Kinsta cache plugin heeft ook een Admin bar knop waarmee je kunt wissen:

  • Alle cache
  • Server cache (aka volledige-pagina cache)
  • Object cache
  • CDN cache

Een ander type cache is de CDN cache. Lees verder om hier meer over te leren.

4. Gebruik een Content Delivery Network

Een CDN is een netwerk van servers die statische bronnen zoals afbeeldingen, scripts en stylesheets opslaan, zodat ze vanaf de dichtstbijzijnde geografische locatie kunnen worden afgeleverd bij de bezoekers van de site.

Een CDN biedt meestal diensten en features die de prestaties en beveiliging van een website aanzienlijk kunnen verbeteren. Op het gebied van prestaties kan een CDN je helpen met het volgende:

  • De netwerklatency en de algehele laadtijd van een website verminderen
  • De Time To First Byte (TTFB) verminderen
  • Geavanceerde cachingtechnologieën gebruiken
  • De paginagrootte verkleinen met een gegevenscompressieservice zoals GZIP of Brotli en automatische afbeeldingsoptimalisatie
  • Bandbreedtekosten verlagen
  • Schaalbaarheid verbeteren
  • SEO verbeteren

Kinsta CDN

Kinsta biedt een gratis Cloudflare CDN integratie bij al onze hostingpakketten. Dit betekent dat je volledig gratis kunt profiteren van zakelijke Cloudflare features, onafhankelijk van het pakket waarop je bent geabonneerd.

Cloudflare biedt een statische resource cachingservice die de prestaties van e-commerce websites aanzienlijk kan verhogen. Dit is vooral handig als je doelgroep verspreid is over een groot geografisch gebied.

Dankzij onze Cloudflare-integratie kunnen we al onze klanten, onafhankelijk van hun abonnement, de volgende zakelijke features bieden:

Met Kinsta kun je van al deze features profiteren door Cloudflare’s CDN in te schakelen in de Caching sectie van je MyKinsta dashboard, waar je Edge Caching en CDN caching kunt beheren.

Je kunt Mobiele cache, Cache wissen en URL-cache wissen inschakelen in het tabblad Edge Caching.

Edge caching opties in MyKinsta
Edge caching opties in MyKinsta

Op het tabblad CDN kun je CDN-cache wissen, afbeeldingen optimaliseren en specifieke bestanden uitsluiten van CDN-caching.

CDN cache opties in MyKinsta
CDN cache opties in MyKinsta

5. Optimaliseer afbeeldingen

Afbeeldingen optimaliseren is van vitaal belang voor de paginasnelheid. Afbeeldingen optimaliseren is niet ingewikkeld voor beginners, maar je hebt wel wat basiskennis nodig.

Je kunt afbeeldingen op verschillende manieren optimaliseren. Ten eerste moet je de afbeeldingsformat bepalen dat het beste past bij de eigenschappen van de afbeelding. Naast de traditionele JPEG, PNG en GIF formaten, bieden web-geoptimaliseerde afbeeldingsformats, zoals WebP en Avif, hoge compressieniveaus met superieure kwaliteit. WordPress ondersteunt beide formats out of the box, dus je bent vrij om ze te gebruiken op je e-commerce website.

Ondersteuning AVIF-format
Ondersteuning AVIF-format (Bron: caniuse)

Als je het juiste afbeeldingsformat hebt gekozen, kun je overgaan op compressie. Je hebt twee soorten afbeeldingscompressie: lossy en lossless. Lossy compressie is effectiever in het verkleinen van bestanden. Je moet echter wel rekening houden met het verlies van informatie en dus verminderde afbeeldingskwaliteit.

Als de afbeeldingskwaliteit van cruciaal belang is voor je website, dan kan lossless compressie de juiste keuze zijn, hoewel de besparing in grootte onbeduidend kan zijn. Om afbeeldingen te comprimeren zonder verlies van informatie, heb je tools nodig zoals FileOptimizer of ImageOptim voor WordPress of fotobewerkingssoftware zoals Photoshop. Een andere optie is Gzip compressie.

Afbeeldingen optimaliseren met Kinsta

Dankzij onze Cloudflare integratie biedt Kinsta gratis afbeeldingsoptimalisatie. Dit betekent dat je PNG, GIF en JPEG afbeeldingen automatisch worden geconverteerd naar het WebP format om de snelheid en prestaties van je website te verbeteren zonder een plugin van derden te gebruiken.

Je kunt automatische beeldoptimalisatie inschakelen in MyKinsta onder Caching > CDN > Afbeeldingsoptimalisatie.

Afbeeldingen optimaliseren in MyKinsta
Afbeeldingen optimaliseren in MyKinsta

Klik op de knop Instellingen in het vak Afbeeldingoptimalisatie en selecteer het type optimalisatie dat je nodig hebt.

Afbeelding optimaliseren in MyKinsta
Afbeelding optimaliseren in MyKinsta

6. Verklein de grootte van HTML-, CSS- en JavaScript bronnen

Je kunt de hoeveelheid gegevens die de browser downloadt om een pagina op het scherm weer te geven verminderen door HTML, CSS en JavaScript te minificeren, comprimeren en cachen.

Codeminificatie is het proces van het verwijderen van onnodige tekens uit de broncode. Commentaar en witruimte zijn nuttig bij het ontwikkelen, maar de browser heeft ze niet nodig om de pagina te renderen. Met codeminificatie kun je de grootte van HTML, CSS en JS bronnen met 50% of meer verminderen.

Het is echter de moeite waard om op te merken dat Cloudflare onlangs heeft aangekondigd de Auto Minify functie af te schrijven:

De redenen waarom we van plan zijn de feature te verwijderen zijn talrijk, maar komen neer op het feit dat het een prestatiegerichte feature is die wordt gebruikt om het gewicht van pagina’s te verminderen, en het is niet zo efficiënt in het doen van dit als andere projecten waar Cloudflare aan werkt, zoals het verbeteren van compressie.

Je kunt de grootte van verzonden bestanden verminderen om de paginasnelheid te verhogen en minder bandbreedte te gebruiken door middel van compressie. Met GZIP compressie kun je een ruwe gegevensset comprimeren zonder informatieverlies. Elk bestandstype kan worden gecomprimeerd, maar GZIP werkt het beste met op tekst gebaseerde bronnen zoals HTML, CSS en JS. Een ander type compressie is Brotli, dat nieuwer en effectiever is dan GZIP en wordt ondersteund door alle grote browsers.

Brotli ondersteuning in moderne browser
Brotli ondersteuning in moderne browsers (Bron: caniuse)

Compressie van bronnen op Kinsta

Terwijl er verschillende stappen zijn om Brotly compressie in WordPress in te schakelen, hoeven klanten van Kinsta helemaal niets te doen om de kracht van dit compressiealgoritme te benutten. Dankzij onze Cloudflare-integratie maakt elke Kinsta gehoste website standaard gebruik van Brotli.

Je kunt het compressietype controleren in de browser inspector. Selecteer een onderdeel in het Network > All scherm en zoek naar de content-encoding header. Dit geeft het type compressie aan dat is ingeschakeld op je website. br staat voor Brotli.

Brotli is standaard ingeschakeld voor alle door Kinsta gehoste websites
Brotli is standaard ingeschakeld voor alle door Kinsta gehoste websites

7. Elimeneer render-blocking bronnen

Je kunt render-blocking JavaScript elimineren door async en defer attributen toe te voegen aan <script> tags. Dit kan de zogenaamde First Contentful Paint verbeteren. Meer specifiek:

  • Scripts met het async attribuut worden asynchroon uitgevoerd zodra ze worden geladen. Zodra het script is geladen, pauzeert de browser, parset de HTML en voert het script uit.
  • Scripts met het defer attribuut worden pas uitgevoerd nadat het parsen van de pagina is voltooid.
Het bericht Render-blocking bronnen verwijderen in PageSpeed Insights
Het bericht Render-blocking bronnen verwijderen in PageSpeed Insights

Je kunt ook render-blocking CSS elimineren door prioriteit te geven aan above-the-fold bronnen, CSS inline toe te voegen, het media attribuut te gebruiken en JavaScript te gebruiken om asynchroon te laden of het laden van CSS uit te stellen.

Dit kan allemaal een beetje lastig zijn als je geen frontend ontwikkelaar bent, maar je kunt een WordPress plugin gebruiken die al het vuile werk voor je kan opknappen.

Bovendien kun je vanaf WordPress 6.3 async en defer attributen toevoegen tijdens de scriptregistratie en vanaf WordPress 6.4 zijn deze attributen geïmplementeerd voor frontend scripts in WordPress core en gebundelde thema’s.

8. Optimaliseer CSS

Een specifiek punt moet worden gemaakt over stylesheets, die een webpagina aanzienlijk zwaarder kunnen maken.

Wanneer de browser een <link> tag aanraakt, stopt hij met het downloaden van andere bronnen en het parsen van de pagina om het CSS bestand te downloaden en te parsen. Ook moet je aandacht besteden aan enkele eigenaardigheden van style sheets:

  • Er kunnen meerdere externe stylesheets worden gekoppeld aan dezelfde pagina.
  • De link naar andere stylesheets kan afkomstig zijn van een ander stylesheet, waardoor deze niet zichtbaar is in de HTML-code.
  • Een stylesheet die niet goed ontworpen is, kan uitspraken bevatten die niet op alle pagina’s van de site nodig zijn. Dit kan leiden tot grotere bestanden en langere verwerkingstijden.
  • Het is waar dat stylesheets vanuit de cache worden geladen, maar desalniettemin ze blokkeren het renderen voor een kort moment.

Dit leidt tot de noodzaak om stylesheets te optimaliseren en een grondige analyse uit te voeren met behulp van browser dev tools, zoals Lighthouse van Chrome en Pagespeed Insights.

Zodra je de analyse hebt uitgevoerd, moet je de meest geschikte oplossingen identificeren om de invloed van stylesheets op de prestaties te verminderen. Minificatie en compressie zijn slechts twee van de beschikbare opties. Andere maatregelen zijn het cachen van bestanden door Expires en ETag headers in te stellen, de beste keuze te maken voor thema’s en plugins voor de site, onnodige CSS-code te verwijderen, webfonts te optimaliseren en andere maatregelen om de prestaties te optimaliseren.

De beste optie voor een ontwikkelaar is echter altijd om zijn stijlen te ontwerpen door vanaf het begin de CSS best practices te volgen.

9. Verminder het aantal HTTP-verzoeken

Afbeeldingen, scripts en stylesheets zijn allemaal essentiële bronnen voor een website. Er zijn echter ook andere, minder essentiële maar soms cruciale bronnen voor het specifieke doel van de site, zoals video, multimedia-inhoud en webfonts. Elke bron genereert een HTTP-verzoek aan de webserver die deze host, en elk verzoek vereist verwerking en responstijden die bij elkaar optellen, waardoor de totale laadtijd van de pagina toeneemt.

Daarom is het minimaliseren van het aantal HTTP-verzoeken aan de server cruciaal.

Ook hier kunnen verschillende hulpmiddelen voor prestatieanalyse je helpen bij het bepalen van het aantal HTTP-verzoeken. Browser dev tools en online tools zoals Pingdom en GTMetrix kunnen waardevolle bondgenoten zijn als het gaat om prestatieproblemen.

Van de vele oplossingen die een ontwikkelaar kan implementeren om het aantal HTTP-verzoeken te verminderen, is de meest effectieve het verwijderen van onnodige bronnen van de pagina.

WordPress gebruikers zouden alle plugins die niet strikt noodzakelijk zijn moeten verwijderen of op zijn minst selectief plugins laden die niet nodig zijn op de hele website. Ze moeten ook de meest betrouwbare en lichtgewicht plugins kiezen die beschikbaar zijn en de zogenaamde nulled plugins vermijden.

Een andere optie is om alle CSS-bestanden samen te voegen in één stylesheet.

Andere maatregelen die je kunt nemen om het aantal HTTP-verzoeken te verminderen zijn het lazyloaden van bronnen, het gebruik van systeemlettertypen waar mogelijk, het minimaliseren van HTTP-verzoeken van derden, zoals YouTube video’s, en het gebruik van CSS sprites voor iconen en logo’s.

Een voorbeeld van CSS Sprites van Amazon. CSS wordt gebruikt om alleen een specifiek deel van de gecombineerde afbeelding te "targeten".
Een voorbeeld van CSS Sprites van Amazon. CSS wordt gebruikt om alleen een specifiek deel van de gecombineerde afbeelding te “targeten”.

10. Controleer de prestaties van je e-commerce website met een APM-tool

Heb je ooit een tool voor prestatiemonitoring voor je e-commerce website gebruikt? Zo niet, dan zou je dat moeten doen. Met een tool voor prestatiemonitoring, of APM, kun je de uitvoeringstijd van elk afzonderlijk proces op je website meten, zoals PHP-processen, databasequery’s, AJAX-callsen nog veel meer.

Weten welk proces of welke plugin je e-commerce website vertraagt of kapot maakt is cruciaal, want voor elke seconde vertraging bij het laden van de pagina verlies je omzet, om nog maar te zwijgen van het feit dat dit je imago kan ruïneren.

Niemand wil zijn creditcardgegevens toevertrouwen aan een website die niet werkt zoals verwacht. Daarom is het gebruik van een APM-tool cruciaal.

Er zijn verschillende APM-tools op de markt, waaronder New Relic, LogRocket, Dynatrace en vele andere. Je wil de populairste bekijken en degene kiezen die qua kosten en functies het beste werkt voor jouw bedrijf.

Kinsta APM is gratis voor alle WordPress pakketten

Kinsta APM tool helpt je bij het identificeren van PHP prestatie knelpunten op je WordPress site zonder je te abonneren op monitoring diensten van derden zoals New Relic. Het is gratis voor alle WordPress pakketten en is geïntegreerd in MyKinsta.

Om toegang te krijgen tot de prestatiemonitoring tool van Kinsta, selecteer je je WordPress site in MyKinsta en zoek je het APM item in het linker menu.

Kinsta APM tool inschakelen in MyKinsta
Kinsta APM tool inschakelen in MyKinsta

Schakel APM in en selecteer monitoringstijd. De APM tool verbruikt systeembronnen en kan de prestaties van je website beïnvloeden, dus je wilt het misschien voor een beperkte tijd inschakelen.

Selecteer monitoringstijd
Selecteer monitoringstijd

Eenmaal ingeschakeld, bewaakt de APM tool de processen van je website en geeft het een enorme hoeveelheid gegevens weer, verdeeld over vier tabbladen:

Transacties: Dit scherm toont een diagram met de totale transactietijd voor PHP, MySQL, Redis en Externe processen en een tabel met de langzaamste transacties op je website. Je kunt een specifiek item selecteren om transactiedetails te bekijken.

Kinsta APM transacties
Kinsta APM transacties

WordPress: Dit scherm toont twee tabellen: Langzaamste WordPress plugins en Langzaamste WordPress hooks. Ook hier geldt dat als je op een specifieke vermelding klikt, je wordt gevraagd naar een tabel met transactiedetails.

Langzaamste WordPress plugins en hooks
Langzaamste WordPress plugins en hooks

Database: In dit scherm kun je de langzaamste database queries vinden, gesorteerd op duur. Als je de Kinsta Redis add-on gebruikt, vind je een lijst met de traagste geregistreerde Redis cache.

Langzaamste database queries in MyKinsta
Langzaamste database queries in MyKinsta

Extern: Dit scherm toont een lijst met de traagste externe verzoeken.

Traagste externe verzoeken
Traagste externe verzoeken

Je kunt in elk verzoek duiken met Span details en Stack trace.

Span details en stack trace voor een extern verzoek
Span details en stack trace voor een extern verzoek

Dat zijn een heleboel gegevens om elk prestatieprobleem op te lossen en je e-commerce website te optimaliseren voor snelheid en prestaties.

Als je dieper in de Kinsta APM tool wilt duiken, bekijk dan de volgende bronnen:

Samenvatting

Dit artikel geeft een checklist van de essentiële optimalisaties die je kunt doorvoeren om de prestaties van je e-commerce website te verbeteren. Als managed WordPress host die is gebouwd bovenop het Google Cloud Platform, zijn onze aanbevelingen vooral bedoeld voor eigenaren van e-commerce websites op basis van WordPress en WooCommerce. Ze kunnen echter nuttig zijn ongeacht het platform achter je e-commerce website.

Sommige optimalisaties hebben direct betrekking op de hostingservice; andere kunnen worden geïmplementeerd via WordPress plugins of diensten van derden.

Kinsta biedt configuratieopties voor cachebeheer, afbeeldingoptimalisatie, resourcecompressie, prestatiemonitoring en nog veel meer, zodat je je WordPress + WooCommerce website kunt optimaliseren voor de beste prestaties.

Als je dieper wilt duiken, bekijk dan de volgende gidsen en tutorials:

Nu is het jouw beurt. Hebben we iets gemist? Heb je nog meer tips die je met onze lezers wilt delen om de prestaties van een e-commerce website te verbeteren? Laat hieronder een reactie achter en praat mee.

Carlo Daniele Kinsta

Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.