storyyo.com opnieuw gebouwd

01 · Wat je ziet

Het is dezelfde site

De nieuwe site is geen herontwerp. Elke pagina is nagebouwd op de bron, en per band gecontroleerd door de twee versies naast elkaar te zetten en de hoogtes te meten.

Van de 52 gecontroleerde pagina's lopen er 46 binnen 30 pixels van de bron en 50 binnen 50 pixels, op pagina's die 2500 tot 15000 pixels lang zijn. De twee die er verder buiten vallen wijken met opzet af; die staan in hoofdstuk 06.

02 · Snelheid

Van 18,8 seconden naar 2,2

Gemeten met Lighthouse 13, drie keer per site, op de mobiele instelling. Drie keer, omdat één meting schommelt. De uitkomsten lagen dicht bij elkaar; hieronder de bandbreedte.

Die 16 seconden tot de eerste tekst is geen meetfout. Lighthouse rekent met een trage mobiele verbinding, en op de oude site moet de browser eerst 3,2 MB en een reeks scripts van vijf andere domeinen ophalen voordat er iets te lezen is.

03 · Vindbaarheid

Elke pagina heeft nu een kop, een omschrijving en een sluitende koppenvolgorde

Gemeten over álle pagina's van beide sites, niet over een steekproef: 317 pagina's op de oude site, 491 op de nieuwe (de nieuwe heeft ook de Engelse routes).

Dit wordt bij elke bouw opnieuw gecontroleerd. Mist een pagina een kop, een omschrijving of een zoekwoord, dan stopt de bouw en komt de site niet online. Datzelfde geldt voor een interne link die nergens heen gaat.

De 35 dubbele titels op de nieuwe site zijn de pagineringspagina's van de blogs ("Pagina 2 van 49"), die met opzet dezelfde titel delen en op noindex staan.

04 · Gevonden worden door AI

De oude site sluit acht AI-crawlers buiten

Steeds vaker beantwoordt een AI de vraag van een bezoeker in plaats van een zoekmachine. Dan moet die AI je site wél mogen lezen. Op storyyo.com mag dat niet.

05 · Veiligheid

Van D naar A+, en geen WordPress meer om binnen te komen

Gemeten met securityheaders.com. Links de oude site, rechts de nieuwe.

De oude site stuurt twee van de zes headers mee. Er ontbreken er vier, waaronder de Content-Security-Policy: die bepaalt welke scripts een pagina mag uitvoeren. Zonder die regel kan een script dat via een plugin of een advertentie binnenkomt gewoon draaien.

En de WordPress-ingangen

Deze adressen staan op de oude site open:

/wp-login.php          200   inlogscherm, open voor iedereen
/wp-json/wp/v2/users   200   geeft de gebruikersnamen van de redactie
/?rest_route=/         200   dezelfde lijst via een andere weg
/wp-cron.php           200   taakplanner, aan te roepen door iedereen
/wp-links-opml.php     200   noemt de versie: WordPress 6.9.7
/license.txt           200   bevestigt dat het WordPress is

Een gebruikersnaam plus een inlogscherm is de helft van een inbraak. De nieuwe site heeft geen van deze adressen, want er is geen WordPress meer: het zijn kant-en-klare bestanden die Cloudflare uitserveert.

06 · Waar de nieuwe site bewust afwijkt

Vier keer niet 1:1, en waarom

De afspraak is: op desktop 1:1 met de bron, op mobiel repareren wat daar stuk is. Elke afwijking staat opgeschreven. Dit zijn de vier die je op een pagina ziet.

1. Het contactformulier en de agenda werken

Op de oude site staat op /contact/ een leeg blok waar de Calendly-agenda hoort: het blok is er, het script dat het vult niet. Een bezoeker ziet 900 pixels paars met alleen een kop. In de nieuwe site laadt die agenda echt, en daarom is die pagina 231 pixels langer dan de bron. Datzelfde blok zit in het contactformulier op de oude site: daar staat een foutmelding in paars op paars, onzichtbaar maar aanwezig.

2. Een cookiebanner die echt iets doet

Op de oude site laden Wistia en Calendly voordat je iets gekozen hebt, en ook nadat je zou weigeren. De nieuwe site houdt ze tegen tot je toestemming geeft, en je kunt die keuze later wijzigen via de voet. Op /cookie-beleid/ staat er bovendien een tabel bij met wat er precies laadt, van wie en wanneer. Die tabel maakt die pagina 530 pixels langer dan de bron.

3. Blogs met paginering in plaats van een knop

De oude site laadt vijf blogs en daarna nog eens vijf met een knop. Dat werkt alleen met JavaScript en een zoekmachine ziet de rest nooit. De nieuwe site heeft 49 echte pagina's die allemaal vindbaar zijn.

4. Twee gaten dichtgemaakt

Op de homepage staat op de oude site 260 pixels lege crème tussen de reviews en de pillenrij, en 300 pixels zwart tussen de laatste video en de knop eronder. Dat leest als een gat, niet als rust. In de nieuwe site is dat teruggebracht.

Wat de oude site heeft en de nieuwe niet

• Weglot, de vertaalmodule. De nieuwe site heeft eigen Nederlandse en Engelse routes met hreflang, dus zoekmachines zien twee echte talen in plaats van één pagina met een schakelaar.
• De 122 blogs die de oude site niet vertaald heeft, krijgen bewust geen Engelse URL. Op de oude site geeft /en/<blog> gewoon 200 met Nederlandse tekst onder een Engelse URL.

07 · Controleer het zelf

Zes proeven, allemaal in een paar minuten

• Snelheid. Zet beide adressen in pagespeed.web.dev, tabblad Mobiel. Draai het twee keer; één meting schommelt.
• Security headers. Zet beide adressen in securityheaders.com.
• De gebruikersnamen. Open storyyo.com/wp-json/wp/v2/users. Doe daarna hetzelfde op de nieuwe site.
• De AI-crawlers. In een terminal:

  curl -s -o /dev/null -w "%{http_code}\n" -A "GPTBot" https://storyyo.com/

  Daarna hetzelfde met het nieuwe adres.
• Zonder JavaScript. Zet JavaScript uit in je browser en open beide sites. De nieuwe blijft volledig leesbaar.
• De cookiebanner. Weiger op beide sites, open daarna het netwerkpaneel en zoek op "wistia". Op de oude site laadt hij alsnog.