Boost hjemmesidens performance: Gatsby og Headless CMS
Udgivet: July 17, 2019
Senest opdateret: May 06, 2021
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 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. (Tænk: Tags som titel og metabeskrivelse kan ikke læses af crawlere og har derfor indflydelse på dit websites 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 i det forløbne år cirka.
Nu er det et nyt buzzword inden for webudvikling, fordi måden hjemmesider bygges på ved hjælp af Gatsby gør dem altid lynende hurtige.
Her er årsagen:
- 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.
- Det er ikke kun den første sideindlæsning der er hurtig, men også den efterfølgende navigation. Når du har besøgt en side på et Gatsby-website, begynder det også at forudindlæse de andre sider i baggrunden, hvilket gør den overordnede brugeroplevelse mere smooth når skiftet fra side til side sker lynhurtigt.
- 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 et langsomt website.”
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 in og styret som i Content Management Systemer (CMS), produktinformationsstyrings-systemer (PIM), markdown-filer, CSV, JSON, databaser, API'er, og så fremdeles.
Faktisk kan du i virkeligheden have dine data i en simpel Excel-fil og lægge den op som et website 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 administrering 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 dataene, så i stedet for at blive leveret af CMS' frontend-komponent, sendes det i stedet til Gatsby, som på sin magiske vis så 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å frontenden er adskilt fra dine data i backenden.
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 dit website, men også til andre platforme, som f.eks. mobilapps, smartwatches og Tingenes Internet (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, da 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 websites 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 et eksisterende CMS-baseret website 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 ovrehovedet 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 hvert individuelle website, og hvordan det 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 dit website, 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 dit website.
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.
