Boost hjemmesidens performance: Gatsby og Headless CMS

Gatsby er en gratis og open source Static Site Generator bygget på React, et JavaScript-bibliotek til opbygning af brugergrænseflader i applikationer.

React er kendt for at bygge hurtige og effektive sites, men det er også kendt for at udgøre et problem for SEO. Da det genererer JavaScript-indhold, kan Google og andre søgemaskiner på nettet ikke altid læse det egentlige indhold, som de ville kunne med en almindelig HTML-side. Husk på at tags som titel og tildels metabeskrivelse læses af crawlere, og har derfor indflydelse på din hjemmesides indeksering og rangering i søgeresultater.

Gatsby fremstår som det gode kompromis ved at give den samme performance-gevinst som React, men også ved at eliminere problemet med indeksering. Grundlæggende bruger Gatsby React til at oprette “komponenter” (dvs. de byggesten der udgør sektionerne i en React-side) ud fra dine data, og opbygger derefter statiske HTML/CSS/JS-filer fra komponenterne, så din side bliver “læsbar” for crawlere.

Gatsby har kun eksisteret i omkring fire år, og alligevel er den kun lige begyndt at blive populær det seneste års tid.

Nu er det et nyt buzzword inden for webudvikling, fordi måden hjemmesider bygges på ved hjælp af Gatsby, gør dem lynende.

Her er årsagen:

1. Gatsby præ-fabrikerer HTML-sider og leverer dem på én gang, når en bruger laver en anmodning, ved at springe den del over hvor webserveren skal læse databasen og først derefter opbygge HTML'en ud fra de forhåndenværende data. Tænk på det som en færdiglavet fastfood ordre med det samme, i forhold til et restaurantmåltid der skal tilberedes fra bunden – bortset fra at med Gatsby er det den samme “mad”- bare serveret hurtigere.
2. Det er ikke kun den første sideindlæsning, der er hurtig, det er også den efterfølgende navigation. Når du har besøgt en side på en Gatsby-hjemmeside, begynder den også at forudindlæse de andre sider i baggrunden, hvilket gør den overordnede brugeroplevelse mere smooth, fordi skiftet fra side til side sker lynhurtigt.
3. Performance er indbygget i Gatsby-frameworket. Faktisk er de fleste af de små tips, vi har givet ovenfor, allerede gjort automatisk af Gatsby. Hør det fra Gatsby's grundlægger Kyle Mathews selv, som sagde, at han designede Gatsby "med den målsætning at man, ved at bruge det, vil få virkelig, virkelig svært ved at bygge en langsom hjemmeside."

I sig selv har Gatsby ikke et interface til styring af indhold. I stedet bygger det sider baseret på data trukket fra en anden kilde, hvor indholdet allerede er lagt ind og styret som f.eks. Content Management Systemer (CMS), produktinformationsstyrings-systemer (PIM), Markdown-filer, CSV, JSON, databaser, API'er og så videre.

Faktisk kan du i virkeligheden have dine data i en simpel Excel-fil og lægge den op som en hjemmeside ved hjælp af Gatsby. Selvfølgelig er der konfigurationer, der skal sættes op, og den egentlige brugergrænseflade skal designes, men den grundlæggende idé er, at Gatsby kan trække data fra hvor som helst og hjælpe dig med hurtigt at levere det til dine brugere.

Brug af headless CMS med Gatsby

Da Gatsby i sig selv ikke har nogen nævneværdig “backend” eller et sted, hvor du kan tilføje og redigere dine data, kan du overveje at bruge et “headless” CMS til at udføre det job.

Helt essentielt fjerner et headless CMS frontend-laget (dvs. “hovedet”) og efterlader kun backend-teknologien (dermed ordet “headless”). Dette står i kontrast til måden, et CMS normalt er sat op på, hvor systemet giver en platform til administration af dit indhold (dvs. backend) og tager sig af, hvordan indholdet vises til dine slutbrugere (dvs. frontend).

Når du vælger headless-metoden, bruger du sådan set bare CMS som et sted, hvor du administrerer og redigerer dit indhold, men udgivelsen sker via en anden tjeneste eller platform - i dette tilfælde site generatorer som Gatsby.

De fleste populære CMS, som WordPress og Umbraco, kan “konverteres” til headless så at sige, og bruges sammen med Gatsby ved at der udvikles et Application Programming Interface (API), der integrerer dets backend i Gatsby. Dette “omdirigerer” udgivelsen af data, så i stedet for at blive leveret af CMS frontend-komponent, sendes det i stedet til Gatsby, som på magisk vis sørger for, at indholdet kan leveres på et øjeblik.

(Umbraco Heartcore er Umbracos headless version. Til WordPress er der plugins som dette, der hjælper med at konvertere det til et headless CMS).

Derudover er der også CMS-alternativer, der er udviklet som headless. De er bygget uden en frontend og er designet til let at kunne integreres med Static Site Generatorer og andre udgivere, uden den yderligere udvikling der ligger i at konvertere et traditionelt CMS til headless. Nogle eksempler er Contentful, Storyblok, Butter CMS og Contentstack.

Udover alle performancegevinsterne tilføjer Gatsby og/eller et headless CMS også et ekstra sikkerhedsniveau for dine data, fordi HTML-siderne på frontend er adskilt fra dine data i backend.

Hvis du er et omnichannel-brand, gør headless det også lettere at udgive til hvilke som helst platforme ved kun at bruge ét CMS til at levere indhold - Ikke kun til din hjemmeside men også til andre platforme, som f.eks. mobilapps, smartwatches og Internet of Things (IoT). Den anden vej gør Gatsby det også lettere at offentliggøre data fra alle datakilder, du måtte have ved siden af dit CMS.

Mak, en af vores projektledere for Umbraco, havde kun gode ting at sige om hans erfaring med brug af Gatsby og headless Umbraco. “Den største fordel er, at du kan koncentrere din udviklingstid på vigtigere ting og ikke bekymre dig så meget om performance, fordi Gatsby tager sig af det for dig. Da Gatsby er bygget med React, er der også tonsvis af værktøjer og et omfattende bibliotek til rådighed for os udviklere at bruge af, samt en enorm support fra communitiet.”

Ja ja, Gatsby er fantastisk og så videre, men du spekulerer nok på, hvor meget udviklingstid det vil koste. For hjemmesider bygget fra grunden har Mak bemærket, at projektets varighed ligner projekter bygget ved hjælp af traditionelt CMS. Forudsat naturligvis at din udvikler allerede har erfaring med at bruge React og/eller Gatsby og ikke behøver at lære systemet og teknologien at kende først.

Men når en eksisterende CMS-baseret hjemmeside skal omdannes til Gatsby, kommer mange faktorer i spil, som gør det svært at give et præcist tidsestimat. “Det første, der skal overvejes, er, om CMS [klienten], der bruges i øjeblikket overhovedet kan vendes, for hvis ikke, så er frontenden det eneste vi kan bruge, og da udelukkende som reference. Det vil grundlæggende være som at starte fra bunden,” siger Mak. “En anden faktor er kompleksiteten af frontend-funktionerne. Alt afhænger dybest set af hver individuelle hjemmeside, og hvordan den er tilpasset.”

At tage headless + Gatsby-ruten er noget, som du vil få brug for et dedikeret udviklingshold til, og implementeringen er helt bestemt ikke noget, der kan gøres i et snuptag. Igen, alt afhængig af din hjemmeside, kan det sagtens vise sig at være et reelt udviklingsprojekt.

Alligevel er denne mulighed værd at overveje med alle de performance-gevinster, det kan medføre for din hjemmeside.

Vores egne hjemmesider, https://1902software.com/ og https://1902software.dk/ er bygget på en Gatsby + headless WordPress-opsætning, og du kan se, hvordan du kan gå fra en side til en anden på mindre end et sekund.

Næste: Vedligeholdelse af hastigheden på din hjemmeside