Då vi våren 2020 bestämde oss för att starta en webbyrå började genast funderingarna kring vad vi kan tillföra en redan ganska mättad hemside-marknad. Det finns en mängd verktyg där vem som helst kan skapa snygga hemsidor utan att röra en kodrad, hur konkurrerar man mot dessa? Svaret vi kom fram till var helt enkelt att det gör man inte. Drag-and-drop-verktyg passar vissa perfekt, men knappast alla.

Bakom en riktigt bra hemsida som står ut från mängden, är snabb och som alltid kommer ranka högt upp på Googles sökträffar används det både design- och ingenjörskonst som dessa verktyg inte kan konkurrera med. Vi tror starkt på att både design och smarta tekniska lösningar måste finnas på plats för att synas i djungeln av hemsidor där ute, därför valde JAMStack att bygga vår hemsida i samt basera vårt företag kring.

Om vi fokuserar på den rent ingenjörsmässiga delen av att bygga en bra hemsida är det framförallt en sak man optimerar för och det är prestanda. Hemsidan ska laddas så snabb som möjligt för en besökare något som beror på framförallt två anledningar.

Först och främst premieras snabba hemsidor av sökmotorer som Google. Dvs hemsidan hamnar högre upp på sökträffslistan och får därmed fler besökare. För det andra om det tar för många sekunder att ladda en sida stänger många besökarna sidan och går vidare till en konkurrent innan man fått chansen att visa upp sitt företag och därmed tappar man hela poängen med att ha en hemsida.

För att bygga en så snabb hemsida som bara möjligt krävs genomtänkta tekniska lösningar. Vi landade i en JAMStack-arkitektur byggt i GatsbyJS med Prismic som CMS. JAMStack är en modern webbarkitektur där hela hemsidan, inklusive dess innehåll från CMSet, skapas upp i förväg. Detta gör att hemsidans besökare inte behöver vänta på att innehållet ska laddas hem från en server, då detta redan är gjort. Behovet av en server trollas alltså bort, vilket i sin tur leder till ett gäng fördelar där prestanda är en av dem.

En klar fördel med utmaningen att bygga en snabb hemsida är att dess prestanda är mätbar. Det finns många verktyg där ute som mäter hur snabbt olika delar av sidan laddas och under bygget av dagsverket.io har vi flitigt använt oss av olika prestandaverktyg.

Det första verktyget är Lighthouse och finns inbyggt i Googles egna webbläsare Chrome. Du hittar Lighthouse genom att högerklicka och välja Inspect (Inspektera) och längst till höger bland flikarna hittar du Lighthouse. Där kan du välja att "Generate report" för prestandan av både mobil och desktop versionen av din hemsida. Den första versionen av dagsverket.io fick runt 90% i performance score på Lighthouse. Genom att analysera resultaten kunde vi använda dem som en form av att-göra-lista kunde vi sakta men säkert jobba oss upp till 100%.

Ett annat verktyg som Google själva föreslår är Webpagetest, ett verktyg som inte bara mäter hur snabbt sidan laddar utan även kollar på inställningarna för det CDN (Content Delivery Network) där hemsidan är uppladdad. T.ex kan man se användningen av cache- och säkerhets headrar.

Det tredje verktyget vi använde var GTMetrix. Där är dagsverket.io i skrivande stund uppe i 97%. Detta är ett bra exempel på hur vi använder verktygen som att-göra-listor för framtida optimeringar. Några av de bilder vi använder på hemsidan kan enligt resultatet komprimeras ytterligare för förbättra hastigheten att ladda sidan. Detta kommer vi såklart kolla vidare på.

Alla dessa verktyg är gratis så ni kan själva gå in och enkelt prova hur snabba era hemsidor är. I framtida inlägg på bloggen kommer ni kunna läsa om hur vi jobbar oss fram till full-pottare på dessa verktyg.