De uitdaging
Het ontwerp moest blijven. Alles eronder mocht weg.
De site was door een ander bureau gebouwd in WordPress met Elementor. Dat ziet er goed uit, maar een interieursite leunt op grote foto's en renders, en daar betaal je in laadtijd voor.
Er was geen toegang tot de originele bron. Alles moest dus vanaf de live site opnieuw worden opgebouwd: elke pagina, elk adres en elke afbeelding.
Een verhuizing is pas geslaagd als niemand merkt dat je verhuisd bent.
Voor
- Ongeveer 30 CSS-bestanden, jQuery en zo'n 20 scripts
- Renders als PNG van 2 tot 3 MB per stuk
- Achtergrondvideo van 41 MB in een iPhone-formaat dat Chrome en Firefox grotendeels niet afspelen
- WordPress, thema en plugins die bijgehouden moeten worden
Na
- 3 stylesheets en 1 script op de homepage
- Dezelfde beelden als WebP van 15 tot 100 kB
- Video van ongeveer 5 MB die in elke browser speelt
- Een statische site: geen plugins, geen updates
Onze aanpak
Eerst alles vastleggen, dan pas bouwen.
We haalden het ontwerpsysteem uit de live site: kleuren, lettertypes, afstanden en knoppen, zoals de browser ze echt toont. Alle afbeeldingen werden in de hoogste beschikbare resolutie opgehaald en per pagina geïnventariseerd.
Daarna is de site opnieuw opgebouwd in Astro, een moderne generator voor statische sites. Elke pagina kreeg precies hetzelfde adres als op WordPress, zodat bestaande links en de vindbaarheid in Google intact blijven.
- Pagina's24
Op exact dezelfde adressen.
- Afbeeldingen121
Meegenomen en omgezet naar WebP.
- Video41 → 5
MB, en nu in elke browser.
- Homepage0,4
MB bij het laden, gemeten.
Projecten, blogs, reviews en veelgestelde vragen staan nu als losse tekstbestanden in de site. Een nieuw project toevoegen vraagt geen code.
Er zijn bewust maar drie dingen anders dan het origineel: een typfout, een afgebroken zin en een knop die te klein was. Verder kwamen er alleen onzichtbare verbeteringen bij, zoals een video die stilstaat voor bezoekers die liever geen beweging zien.
Dan de verhuizing zelf.
STRATO bleef de plek van het domein en de mail. Alleen het adres van de website werd omgezet naar Netlify, met twee DNS-wijzigingen. Mail en beveiliging van het domein bleven onaangeroerd.
- GewijzigdWebsite naar Netlify
Hoofdadres en www wijzen nu naar de nieuwe site.
- OngemoeidMail en DNSSEC
De mailinstellingen en domeinbeveiliging bleven zoals ze waren.
Het resultaat
Voor een bezoeker is er niets veranderd. Behalve dat alles sneller is.
Bij onze meting laadde de homepage in 15 verzoeken en ongeveer 0,4 MB, waar de oude site alleen al per render 2 tot 3 MB binnenhaalde. En All4Interior heeft geen WordPress meer om bij te houden.
Opgeleverd
- 24 pagina's, beeldgetrouw nagebouwd op dezelfde adressen
- 121 afbeeldingen en de video licht en in elke browser
- Projecten, blogs en reviews als losse, bewerkbare bestanden
- Domein verhuisd zonder dat mail of beveiliging geraakt werd
Zelf even kijken?De site staat live op all4interior.nl.
all4interior.nl (opent in nieuw tabblad)