Webbapplikationen som togs fram under fallstudien gav en stor inblick i de tekniska komponenter som bidrar till webbapplikationens totala tillverkningskostnad. Detta kapitel ägnar sig till att för-klara hur webbapplikationen skapades och vad som gjordes för att sökmotoroptimera den. Arbetet som presenteras är en fördjupning av aktivitet applikationsutveckling som presenteras i kapitel 5.1. Tyvärr var det inte möjligt att mäta resultatet från det påbörjade optimeringsarbetet då ett resultat syns tidigast efter sex månader [33].
5.2.1 Utvecklingsplattform
I studien användes utvecklingsplattformen Wordpress eftersom systemet erbjuder en helhetslös-ning med både en databas och en tydlig fil-struktur. När en ny webbapplikation ska skapas måste först en domän och extern server köpas in, detta för att det ska vara möjligt att installera Word-press. I fallstudien hade företaget redan köpt in dessa tjänster via ett webbhotell som de årligen betalar en avgift för.
Arbetet med att installera plattformen på den externa serven startade med att en databas installe-rades. För att kunna använda Wordpress behövde databasen vara av typen MySQL eller MariaDB. I detta fall valdes databasen MySQL eftersom webbhotellet gav bäst support till denna version. Att installera Wordpress är relativt enkelt eftersom systemet är ett öppet källkodsprojekt [34]. För att installera systemet överfördes ett antal PHP filer till servens rot mapp. Därefter skapades ett användarnamn och lösenord till webbapplikationens kontrollpanel som visas i figur 5.2. Slutligen behövde Wordpress kopplas till databasen på den externa serven. Detta gjordes genom att skriva in databasens namn, användarnamn, lösenord och IP-adress i filen wp-config.php.
29
När Wordpress var installerat fortsatte arbetet med att skapa webbapplikationen efter användar-gränssnittet som tidigare hade designats. För att göra detta användes programmeringsspråken PHP, JavaScript och CSS. Programmeringsspråket PHP användes i huvudsak till att generera sta-tisk HTML kod på serven medan JavaScript och CSS användes för att göra webbapplikationen interaktiv och estetisk fin.
När användargränssnittet skapas i Wordpress måste PHP filerna namnges enligt en viss struktur. Som figur 5.3 visar används olika filer beroende på vilken typ av sida som ska visas. I Wordpress finns totalt sex stycken olika sidor: (1) Archive Page, (2) Singular Page, (3) Site Front Page, (4) Blog Posts Index page, (5) Error 404 Page och (6) Search Result Page. Det innebär till exempel att filen front-page.php anropas om användaren väljer att besöka första sidan. Om den filen inte finns väljs den PHP-fil som faller nästa i hierarkin. Om ingen PHP-fil matchar anropas in-dex.php.
FIGUR 5.3FIL HIERARKI I WORDPRESS [35]
I grund och botten är Wordpress ett content managment system (CMS) vilket i stora drag betyder att datautvecklare enkelt kan spara bilder, texter och figurer på ett och samma ställe. I vanliga fall administreras innehållet med hjälp av ett användargränssnitt som visas i figur 5.2 men ibland krävs det mer kontroll för att göra ändringar till applikationen. Dessa ändringar kan då göras via ett program som heter phpmyadmin. Programmet körs på serven och ger en stor möjlighet i att anpassa databasen. Däremot krävs det en högre grad av datavana då databasen manipuleras med SQL kod. Under fallstudien användes systemet främst för att åtgärda buggar och installera Word-press. I figur 5.4 visas gränssnittet för phpmyadmin.
30
FIGUR 5.4 ANVÄNDARGRÄNSSNITT FÖR PHPMYADMIN
5.2.2 Kod för sökmotoroptimering
När en webbapplikation ska optimeras för sökmotorer behöver koden skrivas på ett visst sätt som gör att sökmotorernas krypare enkelt kan indexera sidan. Ett sätt att skriva koden på har redan tagits upp i kapitel 2 men i detta delkapitel beskrivs det mer ingående hur koden skrevs för att sökmotoroptimera webbapplikationen som skapades under fallstudien.
Till en början inleddes arbetet med att skapa olika meta taggar som gör det möjligt för sökmotorns krypare att förstå innehållet. Dessa meta taggar skrivs i HTML dokumentets huvud vilken är plat-sen högst upp i filen och omges av taggen <head>. Varje meta tagg kan ha olika attribut som ser till att specificera olika värden. I webbapplikationen som utvecklades skapades meta taggar med attributvärden robots och description. I meta taggen med nyckelordet robots är det möjligt att bestämma om sökmotorns krypare ska indexera sidan eller inte. Antingen får kryparna tillå-telse att indexera sidan genom att skriva index eller så tas den rättigheten bort genom att skriva noindex. I robots taggen är det även möjligt att specificera om kryparna ska följa utgående länkar eller inte. Figur 5.5 visar en del av koden som användes för att skapa webbapplikationen i fallstudien. Eftersom webbapplikationen skulle optimeras för sökmotorer angavs värdet follow och index. Detta innebär att sökmotors krypare fick följa utgående länkar samt att sidan skulle ingå i sökmotorns indexsamling.
31
FIGUR 5.5ETT EXEMPEL PÅ META TAGGAR FRÅN WEBBAPPLIKATIONEN SOM SKAPADES
Meta taggen med nyckelordet description ser till att specificera en kort beskrivning om vad sidan handlar om. Det är viktigt att denna beskrivning inte är för lång eftersom sökmotorer enbart visar ett visst antal tecken. I applikationen begränsades metabeskrivningarnas längd till 160 tecken eftersom detta är standardmåttet för Google [36]. När metabeskrivningarna skrevs använ-des även ett program som heter Ahref. Det är ett program som hjälper till med att hitta populära sökord. Programmet fungerar på det viset att användaren skriver in ett eller flera sökord, systemet talar sedan om hur många personer som brukar söka med det ordet, samt ger förslag på liknande sökord som kan användas.
Utöver att göra ändringar till sidans olika meta taggar gjordes även ändringar till titel taggen under fallstudien. Likt tidigare skrivs denna tag i HTML dokumentets huvud men istället för att direkt tala om hur kryparna ska bete sig, summerar denna tagg vad sidan handlar om. Titeln har ungefär samma uppgift som meta taggen med värdet description. Dock skrevs titlarna mer koncisa.
5.2.3 Tilläggsprogram som höjer prestandan
För att höja hastigheten i webbapplikationen installerades ett tilläggsprogram vid namn WP Rocket. Programmet hjälper till att förbättra prestandan genom att vidta små och effektiva opti-meringsåtgärder. Detta är viktigt eftersom 53% av internetanvändare lämnar en sida om den inte laddas ner innan tre sekunder [37].
Varje gång en sida ska visas i Wordpress används PHP på servern för att skapa en färdig HTML fil [38]. Detta kan ibland ta lång tid beroende på hur stort innehållet är. För att minska tiden det tar att hämta en fil från servern används ofta en cache lösning. Det innebär att filerna på serven sparas på ett visst sätt vilket gör att hastigheten i applikationen ökar. I fallstudien användes WP Rocket för att skapa statiska HTML sidor i förväg och sedan spara dessa filer sparat på serven. När väl en användare ska ladda in applikationen behöver inte filerna skapas dynamiskt utan de finns redan klara.
WP Rocket som används i fallstudiens webbapplikation hjälper även till att minska antalet filer som måste laddas in varje gång en användare bestämmer sig för att besöka webbapplikationen.
32
Tilläggsprogrammet erbjuder en lösning som gör det möjligt att minska antalet CSS filer som måste laddas in. Dessa filer har i uppgift att skapa den visuella designen på sidan. Ibland kan det vara nödvändigt att skapa många av dessa filer för att hålla koden enkel att förstå. Nackdelen med att ha många små filer är att webbläsaren kräver mer resurser för att ladda in sidan. Det i sin tur gör att webbapplikationen kan upplevas som långsam. I WP Rocket finns det däremot en funktion som sammanfogar småfiler och sparar dem i en stor fil. Denna fil sparas då separat på servern och är del av cache lösningen. Istället för att ladda in många småfiler laddas en stor fil varje gång användaren besöker applikationen. Denna funktion, att slå ihop mindre filer till en, kan även ap-pliceras på JavaScript filer. Då webbapplikationen enbart hade en JavaScript fil sattes inte denna funktion på.