Hopp til innhold
Logotype
Alle artikler ·

Under arbeid: Yogasonen flytter fra Webflow til en lynrask Astro-side

Yogasonen får ny nettside bygget i Astro, med påmelding som teller ledige plasser i en database, egne bekreftelses-e-poster og et eget gavekortsystem med Vipps og PDF. Forsiden går fra 4,2 MB til 0,56 MB. Lansering om ca. en uke.

Under arbeid: den nye nettsiden til Yogasonen vist på PC og mobil, med teksten Fra Webflow til Astro

Akkurat nå flytter jeg Yogasonen fra Webflow til en ny, lynrask nettside bygget i Astro. Yogasonen holder yogakurs i Lillestrøm og har nylig åpnet Dyp Hvile i Fetsund, med aromaterapimassasje og lydbad. Når den nye siden er ute, går den rett over på en fast driftsavtale med meg. Siden er forventet lansert i løpet av en ukes tid, så dette er en rapport fra byggeplassen.

Det som gjør prosjektet interessant, er ikke bare at siden blir raskere. Det er alt som skjer etter at noen trykker på en knapp: påmelding som holder styr på ledige plasser, e-poster som går ut av seg selv, og et gavekortsystem som henger sammen med timebestillingen.

Først tallene

Jeg målte forsiden til dagens Webflow-side og den nye Astro-siden med Lighthouse for mobil, to ganger hver, samme dag. Den nye siden er målt før lansering, på en midlertidig adresse.

Tabell: Yogasonen på mobil før og etter. Ytelsesscore 68 og 80 i Webflow mot 98 og 96 i Astro, sidevekt 4,2 MB mot 0,56 MB, forespørsler 41 mot 17

Ytelsesscoren hopper mellom målinger, derfor står begge. Det som ikke hopper, er sidevekten: forsiden går fra 4,2 MB til 0,56 MB, og fra 41 forespørsler til 17. Mesteparten av gevinsten kommer fra bilder i riktig størrelse og format, og fra at det ikke lastes noe som siden ikke bruker.

Påmelding som teller plassene selv

På den nye siden er hvert kurs en egen side med påmeldingsskjema, og bak skjemaet ligger en database som holder styr på plassene.

Kursside på den nye Yogasonen-siden på PC og mobil, med påmeldingsskjema og teller for ledige plasser
  • Påmeldingen lagres bare hvis det er plass. Sjekken og lagringen skjer i samme operasjon, med lås per kurs. Melder to seg på den siste plassen samtidig, får bare den ene den.
  • Ledige plasser er alltid riktige. Tallet er antall plasser, minus de som er tatt utenom nettsiden, minus påmeldingene i databasen. Siden henter ferske tall hver gang den lastes, og bygges i tillegg på nytt etter hver påmelding.
  • Google får vite om kurset er fullt. Hvert kurs har strukturerte data med pris, og med om det er ledig eller utsolgt.
  • Gamle kurs rydder seg selv. Når sluttdatoen er passert, forsvinner kurset fra nettsiden ved neste bygg. Ny runde av et kurs er å endre datoene, så starter tellingen på null igjen. De gamle påmeldingene ligger trygt i loggen.

Databasen er altså både telleren og loggen. Ingen påmelding kan forsvinne i en innboks.

E-poster som går ut av seg selv

Alle skjemaene på siden, altså påmelding, gavekort, timebestilling og kontakt, sender nå e-post gjennom Resend, en tjeneste for transaksjons-e-post. Kunden får en bekreftelse med det samme, og Yogasonen får et varsel med alt som trengs. Svarer Yogasonen på varselet, går svaret rett til kunden.

E-postene sendes fra Yogasonens eget domene, ikke fra en tredjepart, og domenet godkjennes hos e-posttjenesten med egne DNS-oppføringer så e-postene ikke havner i søppelpost. Det er en detalj de fleste aldri tenker på, helt til bekreftelsene slutter å komme fram.

Et eget gavekortsystem

Dyp Hvile selger gavekort, og i stedet for å koble på en nettbutikk-løsning har siden fått et eget, enkelt system:

Gavekortskjemaet på den nye Yogasonen-siden, med valg av behandling eller beløp, mottaker, hilsen og levering som PDF eller trykket kort
  • Kunden velger en behandling eller et valgfritt beløp fra 1 490 kr, skriver mottaker og hilsen, og velger PDF på e-post eller trykket kort som hentes i Fetsund.
  • Betalingen skjer med Vipps. Bestillingen lagres med en unik gavekortkode, og kunden får bekreftelse på e-post.
  • Yogasonen får en sikker lenke til bestillingen, sjekker at betalingen har kommet inn, og trykker én knapp. Da lages gavekortet som en ferdig designet PDF, og sendes til kjøperen.
  • Gavekortet er gyldig i seks måneder, og samme side brukes til å merke det som brukt.

Det fine er koblingen til timebestillingen. Skriver kunden inn gavekortkoden når hen bestiller time, sjekkes den mot databasen med en gang: ukjente eller allerede brukte koder avvises før skjemaet sendes. E-posten med gavekortet har dessuten en lenke som fyller ut koden automatisk.

Flyttingen fra Webflow

Innholdet er hentet ut av Webflow med Webflow-API-et og gjort om til filer, med alle bilder lastet ned og optimalisert. Kurs som var utløpt før 2026 er ikke tatt med. Gamle adresser videresendes til de nye, så lenker og søkeresultater fortsetter å virke. Selv lydfilen nyhetsbrev-abonnentene får, er flyttet fra en delt mappe i skyen til nettsiden selv.

Og så: drift

Når siden er lansert, er det ikke Yogasonen som skal logge inn noe sted. Det finnes ikke noe CMS å logge inn i. Nye kurs, endrede tider og nye bilder sendes til meg, og jeg legger det ut. Påmeldingene og gavekortene går av seg selv, og jeg følger med på at de gjør det.

Det er hele poenget med å bygge slik: den eneste koden som kjører på serveren, er den som faktisk må det, altså påmelding, plasstelling, gavekort og e-post. Alt annet er ferdigbygde filer som ikke kan gå i stykker av seg selv.

Neste steg

Siden er forventet lansert i løpet av en ukes tid. Før det gjenstår finpuss, testing av alle skjemaene med ekte e-post, og å peke domenet over til den nye siden. Når den er ute, kommer jeg tilbake med tall fra produksjon.

Vanlige spørsmål

Hvorfor flytter Yogasonen fra Webflow til Astro?

Fordi siden skal over på en fast driftsavtale der jeg drifter og publiserer, og da bygger jeg i Astro: ferdigbygde filer uten CMS, med server-kode bare der det faktisk trengs. Farten kommer på kjøpet: forsiden går fra 4,2 MB og 41 forespørsler til 0,56 MB og 17.

Hvordan vet påmeldingen hvor mange plasser som er ledige?

Hver påmelding lagres i en database, og den lagres bare hvis det fortsatt er plass. To som melder seg på samtidig kan ikke ta den samme siste plassen. Ledige plasser er antall plasser, minus plasser tatt utenom nettsiden, minus påmeldingene i databasen, og kurssiden henter ferske tall hver gang den lastes.

Hvordan fungerer gavekortene?

Kunden velger en behandling eller et valgfritt beløp, skriver hilsen og velger PDF eller trykket kort. Betalingen skjer med Vipps. Yogasonen bekrefter at betalingen er mottatt med ett trykk, og da lages gavekortet som PDF med en unik kode og sendes til kjøperen. Koden sjekkes automatisk når den brukes til å bestille time.

Når lanseres den nye siden?

Den er forventet lansert i løpet av en ukes tid. Gamle adresser fra Webflow-siden blir videresendt, så lenker og søkeresultater fortsetter å virke.

Vil du slippe å tenke på nettsiden?

Jeg bygger siden, drifter den og publiserer det dere sender meg. Fast pris, hosting inkludert, 30 dagers oppsigelse.

Se Website-vaktmester