8.000 bezoekers per minuut in WordPress

Op Loten.nl publiceren we trekkingsuitslagen van de Staatsloterij, Postcode Loterij, Lotto en nog een aantal andere loterijen. De Oudejaarstrekking is de trekking met de meeste bezoekers. Net na de jaarwisseling, zo rond 5 over 12, zien we pieken van 8.000 bezoekers per minuut. Overdag komen daar de bezoekers voor de PostcodeKanjer uitslag nog bij. In de eerste 24 uur van het nieuwe jaar zijn er zo’n 650.000 pageviews getoond. Om deze hoeveelheden bezoekers in goede banen te leiden hebben we dit jaar de site volledig opnieuw opgebouwd, ook nu weer in WordPress. Verder is de hosting geoptimaliseerd en gebruiken we nieuwe technieken zoals Redis. Hieronder de meest belangrijke zaken om tot een zo efficiënt mogelijke WordPress site te komen.

Een minimaal thema met code in delen

Je kunt zelf een thema maken, je kunt een mooi thema kopen, of je kunt beginnen met een zogenaamd ‘barebone theme’. Dit is een thema waarbij alleen de basis van de site staat en nog niets grafisch is vormgegeven. Voor Loten.nl gebruiken we een aangepaste versie van zo’n thema, Monsieurpress, en hebben we hierop de site verder gebouwd.

Hoe uitgebreider het thema en hoe meer mogelijkheden een thema biedt des te meer bestanden er worden ingeladen. Vaak gebruik je daar niet eens de helft van. Als je 100 bezoekers op je site hebt lijkt dat niet zo’n probleem, bij 8.000 bezoekers telt elk bestand en moet er alleen het hoognodige geladen worden.

Voor Loten.nl hebben we de PHP-code zodanig ingedeeld dat voor vrijwel elke pagina alleen code wordt geladen die nodig is. Dat klinkt logisch, maar in de meeste kant-en-klaar thema’s voor WordPress is dit niet het geval. En als laadtijd geen issue voor je is, kom je daar vaak nog mee weg ook. Normaliter zou je veel functionaliteit in een plugin of functions.php van je thema stoppen. Dit betekent dan wel dat al deze code op elke pagina moet worden ingelezen. Door alles in stukjes op te knippen en alleen te laden waar nodig kom je tot een veel efficiënter resultaat.

Tip: Sluit per pagina onnodige bestanden uit. Bijna alle plugins laden hun CSS en JavaScript bestanden op elke pagina. Dat is helemaal niet nodig. Zo kun je bijvoorbeeld op veel pagina’s Gravity Forms script en CSS bestanden uitsluiten omdat die daar niet nodig zijn. Je gebruikt immers niet op elke pagina een contactformulier.

Zo min mogelijk plugins

Een schot voor open doel maar ik noem ‘m toch, gebruik zo min mogelijk plugins. De meeste functionaliteit op Loten.nl hebben we zelf geprogrammeerd. Daarnaast gebruiken we een handjevol plugins zoals Advanced Custom Fields (ACF), Yoast SEO en Gravity Forms. Van die plugins weten we dat ze goed werken en dat we het wiel niet opnieuw gaan uitvinden. Alhoewel er altijd wel iets voor verbetering vatbaar is (zie hieronder).

Gebruik Query monitor bij de ontwikkeling

Query monitor is een goede plugin om te gebruiken bij de ontwikkeling van een WordPress site. Hiermee kun je precies zien hoeveel databasequeries er worden uitgevoerd, of er iets mis gaat en hoe lang de server erover doet om de betreffende pagina te generen. Loten.nl maakt veel gebruik van ACF Flexibele content. Dat is voor ons een mooie oplossing om alle data van loterijen te beheren. Bij het laden van loterijen in de front-end kwamen we er met Query monitor achter dat voor elk dataveld van elke loterij een aparte databasequery werd uitgevoerd. Voor het ophalen van alle data werden er ruim 300 databaserequests uitgevoerd. Dat was dus precies niet de bedoeling en hebben daarom een custom query gemaakt die alle data met 1 request ophaalt.

Caching onmisbaar

Onmisbaar voor een snelle WordPress website is caching plugin WP-Rocket. In vergelijking met andere caching plugins komt deze voor ons als beste uit de test. Wat deze caching plugin precies doet?

• HTML verkleinen, alle witruimte gaat er tussen uit -> kleiner HTML bestand
• Google Fonts combineren
• Query strings verwijderen van statische bestanden. Huh wat? Kijk maar eens in je code, daar zie je bijvoorbeeld ‘css?ver=1.0’ staan. Dit zorgt ervoor dat het bestand langzamer geladen wordt
• CSS verkleinen, alle ruimte er tussen uit
• CSS combineren, verschillende bestanden combineren tot 1 of enkele
• JavaScript verkleinen en combineren
• Vertraagd laden van Javascript, pas als de hele site geladen is
• Lazyload voor afbeeldingen, video’s en iframes, dus alleen het inladen van afbeeldingen en video’s wanneer deze zichtbaar zijn in de viewport
• Kritieke CSS generen en vooraf laden. Alle (kritieke) CSS die nodig is wordt apart gegenereerd en vooraf geladen zodat het zichtbare deel van de site direct goed in de browser wordt getoond.
• Met diverse hooks kun je zelf aanpassingen maken waar nodig.

Daarnaast staat ook op de server caching aan. Wat voor caching weet ik eigenlijk niet eens, dat laat ik aan RealHosting over. Je ziet in ieder geval de scores omhoog gaan in Google PageSpeed Insights en webpagetest.org.

Uitstellen van laden

Vrijwel iedere site is verplicht om bezoekers te informeren over het gebruik van cookies, zo ook Loten.nl. Hier kun je natuurlijk 1 van de vele plugins voor gebruiken. Het irritante alleen is dat dit vaak voor zogenaamde ‘render blocking’ zorgt. Die cookiemelding zorgt voor vertraging in de rest van het laden van de site. Dat vinden je bezoekers niet leuk en je krijgt ‘strafpunten’ bij Google PageSpeed Insights.

Het mooie van WordPress is dat alles Open Source is. Met andere woorden, de code mag je vrij gebruiken. Waarom zelf het wiel opnieuw uitvinden? We hebben de beste cookieplugin uit de WordPress repository gepakt en deze aangepast. Nu wordt de cookiemelding pas geladen op het moment dat je begint te scrollen en de site dus in wezen gebruikt. Dezelfde techniek hebben we toegepast op de advertenties.

Het leuke is dat we de ontwikkeling van dit soort technieken nu ook toepassen bij onze klanten. Loten.nl is zodanig ingericht dat we onze bezoekers alleen maar hoeven te informeren over het gebruik van cookies. Als je bijvoorbeeld een pixel van Facebook gebruikt dien je daarvoor expliciet toestemming te vragen. Met dezelfde techniek kun je pas scripts en cookies inladen op het moment dat de gebruiker op OK heeft geklikt.

Host zelf alle bestanden

Google Fonts, Google Analytics en een iconenbibliotheek zoals Icomoon worden vrijwel altijd ingeladen vanaf externe domeinen. Niets mis mee zou je zeggen, want dat zijn weer een paar requests minder op je  eigen adres. Toch doen we dit niet op Loten.nl en zou ik je ook niet adviseren. Door afhankelijk te zijn van externe bronnen kan dit je laadtijd serieus vertragen. Zeker bij hoge bezoekersaantallen. Ironisch genoeg geeft Google zelfs strafpunten op je Pagespeed score wanneer je Analytics inlaadt vanaf Google, want dit veroorzaakt ‘render blocking’. Alle fonts, het Analytics script en de iconenbibliotheek hebben we gedownload en hosten we zelf vanaf Loten.nl. Dat is niet alleen sneller maar ook betrouwbaarder. Daarbij kunnen we zelf de volgorde van laden bepalen.

Goede hosting van levensbelang

Je kunt nog zo’n efficiënte WordPress site bouwen, zonder goede hosting zul je bij 8.000 bezoekers per minuut al heel snel een ‘Gateway Timeout’ krijgen. Bij RealHosting hebben we een dedicated Private Cloud (M) met geoptimaliseerd professional+ pakket voor Loten.nl. Er zijn verschillende optimalisatierondes aan vooraf gegaan om uiteindelijk tot het gewenste resultaat te komen. De samenwerking met RealHosting is hierin van essentieel belang en verloopt erg prettig. De lijnen zijn kort en op elke vraag biedt RealHosting een oplossing. Ze zijn niet te beroerd om ’s avonds laat bij een trekkingsuitslag een oogje in het zeil te houden en zo nodig bij te springen. Dat maken we wel eens anders mee bij andere hostingpartijen.

Redis

Voor Loten.nl hebben we een zelf-optimaliserend advertentiesysteem gebouwd. Hiermee wordt per pagina automatisch de best renderende campagne getoond. Bij de bouw van dit systeem hebben we alles weer zo efficiënt mogelijk proberen in te richten. Per getoonde advertentie houden we namelijk (anoniem) bij wat deze oplevert. Als je het gemiddeld aantal getoonde advertenties van 4 afzet tegen het aantal bezoekers dan kom je op piekmomenten uit op zo’n 32.000 requests per minuut. Daarom draait dit systeem ook op een andere server dan die van Loten.nl. Helaas bleek dit niet voldoende.

Ook na een optimalisatie in de code (verhuizing van logica in PHP naar MySQL Stored Procedures) bleek dit niet snel genoeg. MySQL kon het simpelweg niet bijhouden, in ieder geval niet op een kostenrendabele manier.

RealHosting kwam hierop met Redis als oplossing, daar had ik zelf nog nooit van gehoord. Redis is een Open Source database-structuur die draait vanuit het geheugen van de server en is daarmee dus vele malen sneller dan MySQL. Na een aantal dagen hercoderen bleek dit uiteindelijk de perfecte oplossing en kunnen we nu zonder problemen grote hoeveelheden bezoekers aan.

Het eindresultaat

 

Loten.nl is behoorlijk efficiënt gebouwd en laadt binnen een halve seconde in de browser. Dit zien we ook terug in de zoekresultaten, we scoren met deze snelle website aanmerkelijk beter op zoekposities in Google. Ook kunnen we probleemloos 8.000 bezoekers per minuut aan.

Er is altijd wat te doen

Zijn we nu helemaal klaar? Nee, de ontwikkeling staat nooit stil. Zo bestuderen we nu de mogelijkheid om op een beheersbare manier alleen de noodzakelijke CSS te kunnen laden per pagina. Verder kijken we op welke manier we het beste de verschillende formaten displays (mobiel, desktop, tablet) kunnen bedienen. Nu staat alle code hiervoor in de bron, het zou efficiënter zijn om alleen die code te laden die voor dat specifieke apparaat benodigd is.

Wordt vervolgd dus!