Statisk webb vs. WordPress

WordPress och PHP-utveckling är ute. JavaScript och statisk HTML är inne.

WordPress har länge dominerat webben. I skrivande stund är ungefär 30-40% av alla hemsidor byggda med hjälp av WordPress, och därmed med PHP. PHP är ett kodspråk som har funnits sedan 1994 och är i skrivande stund uppe i version 7.4.

Även om WordPress och PHP fortfarande har sina användningsområden så har det såklart kommit en del andra teknologier som man kan använda sig av under de senaste åren — speciellt om du är ute efter att boosta hastigheten på din webb.

Varför kan hastigheten bli sämre på WordPress-sidor?

Du har säkert upptäckt att det tar längre tid att ladda vissa sidor än en del andra. Det spelar såklart roll vilken hostinglösning du väljer, men en annan stor faktor som spelar in är hur sidan är byggd. Vi vet att det kan kännas tryggare att välja något som redan finns i stor utsträckning, men om du väljer att bygga sidan i PHP och WordPress så kommer du ha svårt att tävla i hastighet med statiska sidor som är byggda med ren JavaScript. Vi kommer att prata mer om vad det innebär att bygga en statisk webb längre in i artikeln. Tills dess tänkte vi förklara varför hastigheten ofta kan bli lidande på en WordPress-sida:

Databaser hit och dit!

Om du har dykt in i WordPress-utveckling så vet du att det krävs en databasuppkoppling mellan backend och frontend för att sidan ska kunna visa något. Denna databas innehåller allt från blogginlägg och menyval till plugininformation och metadata. Eftersom sidan måste kontakta databasen varje gång innehåll ska visas leder det till att sidan blir långsammare än om allt finns tillgängligt så fort sidan anropas av en användare.

Plugins är röriga

Det finns inte många WordPress-sidor som inte har ett enda plugin installerat. De vanligaste brukar läggas till för att förbättra säkerheten eller göra det möjligt att lägga in mer avancerat innehåll. Det är såklart bra att så många har gjort sina plugins tillgängliga för nedladdning gratis, men för varje plugin som installeras tillkommer fler filer som måste läsas in när en sida ska laddas. Detta kan ofta vara en ledande faktor till att WordPress-sidor blir långsamma. Det är också svårt att hindra att sidan blir "bloated" med plugins eftersom många krävs för att sidan ska fungera.

Köpta teman kan aldrig bli optimala

Alla har inte budget för att anlita någon att skräddarsy ett tema för webben. Då kan man ta genvägar och köpa ett färdigt tema för WordPress. Dessa teman är byggda för att passa så många olika verksamheter som möjligt, vilket betyder att det finns mycket kod som egentligen inte behövs på din webb. Det kommer att leda till längre laddtider eftersom koden finns och behöver läsas av även om den inte används.

Gatsby to the rescue!

Vill du att din webb ska vara supersnabb, optimerad för sökmotorer och utan en massa pluginfiler som tar upp resurser? Då ska du använda dig av Gatsby för att bygga din sida istället för WordPress. En liten varning bara innan du hoppar in i något: Det krävs en del utvecklingserfarenhet för att kunna utföra detta, men många av de digitala byråerna som hänger med i svängarna har denna expertis redan.

Vad är Gatsby då? Du har säkert hört om React under de senaste åren i samband med JavaScript-utveckling. Gatsby tar React-kod och bygger ihop den till en statisk sida som man sedan kan publicera på nätet. Ett stort plus är att Gatsby ser till att producera en Progressive Web Application (PWA) när man bygger ihop sidan. Detta innebär att man inte måste göra något extra jobb för att sidan ska gå att användas offline efter första besöket. Användaren kan också slänga in en genväg på sin smartphone när detta finns. Snyggt, va?

Hur fungerar Gatsby?

Gatsby skapar som sagt en statisk webbsida åt dig baserat på JavaScript-kod. Till skillnad från WordPress så behöver en Gatsby-webb aldrig kontakta en databas för att visa innehåll för användaren. Allt innehåll finns klart vid sidladdningen, vilket gör att renderingen sker direkt!

Du kanske undrar hur man redigerar innehåll på en statisk sida? Man vill ju inte att allt innehåll ska vara likadant hela tiden. Jo, för att göra detta krävs ett Content Management System, eller CMS som det oftast kallas. Vi vill slå ett slag för Contentful eller NetlifyCMS när man använder sig av Gatsby. Contentful gör det superenkelt att uppdatera innehåll på sin sida och liknar WordPress väldigt mycket. När ändringar sedan sker i ditt CMS så kan du be din Gatsby-webb byggas om automatiskt (eller manuellt). Det betyder att man kan göra ändringar i innehållet precis som med en WordPress-sida, men ger en mer kontroll eftersom man kan välja när man vill publicera innehållet som har ändrats.

Fler fördelar med Gatsby

Det finns såklart en mängd olika fördelar med Gatsby förutom hastigheten, men vi väljer att lista de saker som vi uppskattar mest:

• Lazy-laddade bilder: Det finns inget värre än bilder som tar lång tid att ladda. Gatsby är bra på att guida dig och ställa in hur bilder ska ladda på ett snyggt sätt. Du kan t. ex. ställa in så att bilder är suddiga tills de har laddat klart. Då får användaren en indikering att något kommer att finnas där inom kort, vilket vi gillar att se.
• Små filstorlekar: Till skillnad från WordPress så tar en byggd Gatsby-sida inte upp många MB på servern. Det beror på att att bara nödvändiga filer finns med och att filerna är minifierade av Gatsby.
• Frontendare föredrar JavaScript över PHP: De flesta utvecklare väljer JavaScript över PHP varje dag i veckan. Det blir därför roligare att jobba med projektet och leder då till en bättre slutprodukt.
• Guidning mot bättre tillgänglighet: Gatsby ser till att utvecklaren följer de tillgänglighetsrekommendationer som finns för webben. Man får t. ex. upp varningar om man har bilder och knappar utan beskrivande texter för skärmläsare. Detta leder inte bara till en grym användarupplevelse för samtliga, utan också en högre ranking på sökmotorerna.

När ska du inte använda Gatsby?

Även om vi är stora ambassadörer för att använda statiska sidor istället för PHP-byggen så finns det såklart områden där WordPress fortfarande skiner. Som vi nämnde innan så måste sidan byggas om när innehåll ska uppdateras. Vet du med dig att du kommer att uppdatera innehållet flera gånger per dag så kan det börja uppstå problem. Ett bra exempel för detta är sidor för e-handel; det är svårt att ha en statisk sida som också agerar som webbshop eftersom mycket av innehållet uppdateras så fort ett köp ska göras. I dessa fall kan det vara klokt att se över andra lösningar, t. ex. WordPress + WooCommerce, som fortfarande är ganska populärt när det handlar om e-handel.

Vill man verkligen göra en webbshop med Gatsby så går det att få till, men då krävs lite mer komplicerade lösningar. Ett måste är i sådana fall att koppla ihop sidan med ett API som visar det dynamiska innehållet som finns.