Eigið verkefni · Vefhýsing
Gagnaver: hýsing sem allir skilja
Gagnaver vildi hætta að tala bara við tæknifólk. Við hönnuðum og smíðuðum vef sem leiðir fólk að réttri hýsingu með fjórum spurningum á mannamáli, á íslensku eða ensku, þar sem efnissíður senda ekkert JavaScript.
- Birt
- Lengd
- 7 mín. lestur

Í stuttu máli
- Gamli vefurinn var lítið breytt WHMCS-sniðmát með lorem ipsum, umsögnum frá framleiðanda sniðmátsins og verðum sem stóðust ekki.
- Við byggðum nýja ásýnd, „öruggt heimili fyrir vefinn þinn“, og vef sem leiðir fólk að réttum pakka með fjórum spurningum á mannamáli.
- Efnissíður senda 0 KB af JavaScript; verðsíða og hjálpargrein fá 100 í öllum fjórum flokkum Lighthouse í farsímaprófun.
- Forsíðan fær 91 í afköstum vegna útlitshliðrunar í efsta hluta forsíðunnar. Við segjum frá því hér og hvernig hún verður löguð.
Staðreyndir
- Viðskiptavinur
- Gagnaver
- Atvinnugrein
- Vefhýsing
- Ár
- 2026
- Þjónusta
- Tækni
- Astro
- TypeScript
- Tailwind CSS 4
- Payload CMS
- Pagefind
- Vitest
01. Bakgrunnur
Gagnaver er vefhýsing fyrir íslenskan markað og sama fyrirtæki og Íslandsvefir: bæði eru vörumerki Gagnaver Datacenter AB. Langflestir viðskiptavinir eru íslenskir og reksturinn byggir á Plesk og WHMCS, kerfinu sem sér um pantanir og reikninga.
Vefurinn gagnaver.is var hins vegar lítið annað en uppsetning á WHMCS-sniðmátinu „Lagom 2“. Þar var lorem ipsum, umsagnir sem fylgdu sniðmátinu, verð sem stóðust ekki og vörusíður án efnis. Á honum voru líka boðnar viðbætur frá þriðju aðilum, eins og SiteLock og NordVPN, sem höfðu ekkert með kjarnastarfsemina að gera.
Um leið var ákveðið að breyta um stefnu: í stað hýsingar fyrir fólk sem kann á tæknina yrði Gagnaver hýsing fyrir alla — einstaklinga, lítil fyrirtæki, félög og fólk sem býr til efni. Í hönnunarskjalinu er bent á að markaðsefni hýsingarfyrirtækja hafi lengi höfðað mest til karla og tæknifólks, og það átti að breytast.
02. Áskorunin
Það er erfitt að selja hýsingu fólki sem veit ekki hvað hún er. Orð eins og VPS, SSL og DNS eru hindrun, ekki upplýsingar. Ef fyrsta síðan sem fólk sér er verðtafla með diskplássi í gígabætum hefur það þegar misst þráðinn.
Áskoranirnar voru því fjórar:
- Orðaforði. Vefurinn þurfti að útskýra hvert tæknihugtak þar sem það birtist fyrst, án þess að hljóma eins og kennslubók.
- Val. Fólk þarf að komast að réttum pakka án þess að lesa sig í gegnum samanburðartöflur.
- Traust. Gamli vefurinn grafði undan trausti með fölskum umsögnum og röngum verðum. Nýi vefurinn mátti ekki fullyrða neitt sem ekki stenst. Til dæmis segir hann „hýst á Norðurlöndum“, ekki „hýst á Íslandi“, af því að gögnin eru hýst í Stokkhólmi.
- Rekstur. Fólk sem ekki forritar þarf að geta breytt efni og verðum, og vefurinn þarf að ráða við þrjú tungumál.
03. Markmið
Markmiðin koma úr hönnunarskjali verkefnisins (kaflar 1, 4, 9 og 10). Hér fá þau auðkenni svo niðurstöðurnar í kafla 6 geti vísað í þau.
- M1Fólk án tækniþekkingar finnur réttan hýsingarpakka án þess að kunna hugtökin fyrir fram.
- M2Vefurinn stenst WCAG 2.2 AA og talar til allra, ekki bara tæknifólks.
- M3Lighthouse ≥ 95, LCP ≤ 2,0 s, CLS ≤ 0,05 og ≤ 100 KB af JavaScript á efnissíðum.
- M4Íslenska og enska frá fyrsta degi og sænska innbyggð, með staðfærðum slóðum og hreflang.
- M5Hönnunarkerfi með sjálfvirkt prófuðum birtuskilum sem næstu verkefni byggja á.
04. Nálgun
Við unnum verkið í lögum, þar sem hvert lag byggir á því sem á undan kom.
Ásýnd og rödd. Grunnhugmyndin varð „öruggt heimili fyrir vefinn þinn“. Úr henni komu fimm loforð sem eru notuð um allan vefinn: hýst á Norðurlöndum, sama verð við endurnýjun, fólk svarar á íslensku, frír flutningur og öryggi sjálfkrafa. Raddleiðbeiningarnar segja að ávarpa lesandann með „þú“, skrifa stuttar setningar og útskýra hvert hugtak við fyrstu notkun, til dæmis „SSL-skilríki (lásinn í vafranum)“. Þar sem íslenskan kyngreinir orð umorðum við í stað þess að nota skástrik: „Til í að byrja?“ frekar en „Tilbúin/n?“.
Hönnunarkerfi. Litir, letur og bil eru skilgreind sem tákn (design tokens) í sameiginlegum pakka. Hvert skilgreint par af texta- og bakgrunnslit er prófað sjálfvirkt: að minnsta kosti 4,5:1 fyrir texta og 3:1 fyrir ramma innsláttarreita. Ef einhver breytir lit þannig að hann standist ekki lengur, fellur prófið áður en breytingin kemst á vefinn.
Myndmál. Hönnunarskjalið gerir ráð fyrir teiknuðum persónum í SVG í stað ljósmynda af netþjónum: fólki á ólíkum aldri og af ólíkum uppruna, þar á meðal manneskju í hjólastól, og bannar beinlínis myndir af netþjónaskápum og hettupeysuklæddum hökkurum. Persónurnar eru ekki komnar á vefinn; í þessari útgáfu eru myndskreytingarnar bráðabirgðaútgáfur.
Tækni. Vefurinn er smíðaður í Astro sem kyrrstæður vefur (static site): hver síða er tilbúin HTML-skrá þegar hún fer út. Efni síðnanna er geymt í kóðanum, en vefstillingar eins og fyrirtækjaupplýsingar og tungumál koma úr Payload-vefumsjónarkerfi við smíði. Gagnvirkir hlutar fá sína eigin litlu skriftu og aðeins á þeim síðum sem þurfa hana.
05. Lausnin
Lausnaleit á mannamáli
Hjarta vefsins er lausnaleitin. Hún spyr í mesta lagi fjögurra spurninga: hvað viltu gera, ertu með lén, hversu stórt er þetta og viltu að við sjáum um tæknina? Svörin eru á mannamáli („Rétt að byrja“, „Mikil umferð“) og hægt er að sleppa hverju skrefi og fara beint í verðin. Engum persónuupplýsingum er safnað og staðan er geymd í slóðinni, svo hægt er að deila niðurstöðunni og nota til baka-hnappinn eins og venjulega.
Niðurstaðan er einn pakki með skýringunni „Af hverju þessi?“, einn valkostur og setningin „Þú getur alltaf skipt um pakka síðar“. Reglurnar á bak við tillögurnar eru enn sem komið er í kóðanum, með prófunum. Samkvæmt hönnunarskjalinu eiga þær að færast í vefumsjónarkerfið svo markaðsfólk geti stillt þær án forritunar.

Verð sem standast
Verðsíðan byrjar á loforðunum, ekki töflunni: sama verð við endurnýjun, engin binding, engin stofngjöld og endurgreiðsla innan 30 daga. Öll verð eru birt með virðisaukaskatti. Gamli vefurinn seldi viðbætur þriðju aðila; þær eru farnar.

Hjálp sem svarar
Hjálparmiðstöðin er hluti af sama vef, með leit sem keyrir í vafranum (Pagefind) og er aðeins sótt þegar einhver leitar. Greinarnar fylgja sömu raddreglum: ábendingar í ramma, skref í númeraðri röð og ekkert gert ráð fyrir fyrri þekkingu.

Hratt þar sem það skiptir máli
Efnissíður eins og forsíða, verðsíða og hjálpargreinar senda ekkert JavaScript. Valmyndin í farsíma er <details>-eining sem vafrinn sér sjálfur um. Lausnaleitin notar 5,9 KB skriftu. Stærsta skriftan er ruslpóstvörnin á samskiptaforminu, og hún er aðeins sótt á þeirri einu síðu.
Tungumál og leitarvélar
Íslenska er sjálfgefin og án forskeytis, enska er undir /en/ og sænska er innbyggð en birtist ekki fyrr en þýðingin er tilbúin. Hver síða hefur staðfærða slóð, til dæmis /vefhysing og /en/web-hosting, og vísar á hinar útgáfurnar með hreflang. Tungumálahnappurinn heldur þér á sömu síðu þegar þú skiptir um mál.
06. Niðurstöður
Mælingarnar voru gerðar 6. október 2026 á staðbundinni útgáfusmíð, áður en vefurinn fór í loftið. Þær sýna hvað HTML, CSS, letur og myndir kosta, en ekki netið, þjöppun eða dreifikerfi (CDN). Þegar vefurinn er kominn í loftið mælum við aftur á gagnaver.is.
Svarar markmiði M2
Vefurinn stenst WCAG 2.2 AA og talar til allra, ekki bara tæknifólks.
- Lighthouse-aðgengi, forsíða, verðsíða og hjálpargrein100 / 100Heimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt
Svarar markmiði M3
Lighthouse ≥ 95, LCP ≤ 2,0 s, CLS ≤ 0,05 og ≤ 100 KB af JavaScript á efnissíðum.
- Lighthouse-afköst, verðsíða og hjálpargrein100 / 100Heimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt
- Lighthouse-afköst, forsíða91 / 100Heimild: Lighthouse 12.8.2, farsími, þrjár keyrslur; CLS 0,194Mælt
- Largest Contentful Paint (LCP), allar þrjár síður1,1 sHeimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt
- JavaScript á efnissíðum · heildarstærð síðu0 KB · 43–50 KBHeimild: Lighthouse 12.8.2, netbeiðnir (óþjappað, 4 beiðnir á síðu)Mælt
Svarar markmiði M4
Íslenska og enska frá fyrsta degi og sænska innbyggð, með staðfærðum slóðum og hreflang.
- Síður í smíðaútgáfu85 síður · 2 tungumálHeimild: Astro-smíði: 43 á íslensku (með 404), 42 á enskuMælt
Svarar markmiði M5
Hönnunarkerfi með sjálfvirkt prófuðum birtuskilum sem næstu verkefni byggja á.
- Skilgreind litapör prófuð sjálfvirkt15Heimild: packages/ui/src/contrast.ts, Vitest-prófMælt
Tvö atriði skera sig úr. Verðsíða og hjálpargrein ná 100 í öllum fjórum flokkum. Forsíðan nær hins vegar ekki eigin markmiði um afköst: hún fær 91 vegna þess að textinn í efsta hluta forsíðunnar hliðrast um leið og síðan teiknast (CLS 0,194, markmiðið er 0,05). Hliðrunin endurtók sig í þremur keyrslum.
Markmiðið um lausnaleitina (M1) verður mælt eftir opnun, með vafrakökulausum mælingum á því hve margir ljúka leitinni og hvar fólk hættir.
07. Lærdómur og næstu skref
Mældu það sem þú lofar. Við settum okkur mörk um afköst áður en smíðin hófst og það var mælingin, ekki tilfinningin, sem fann hliðrunina á forsíðunni. Það er auðvelt að prófa bara bestu síðurnar. Þess vegna birtum við forsíðutöluna hér.
Orðalag er hönnun. Í lausnaleit skiptir orðalagið meira máli en kóðinn. Hvernig spyrðu um umferð án þess að nota orðið „umferð“? Hvert svar þarf að vera þannig að sá sem veit ekkert um hýsingu geti valið rétt.
Kerfi nýtast aftur. Hönnunarkerfið var smíðað til að endast lengur en eitt verkefni. Vefur Íslandsvefja byggir á sama grunni, með eigin aðallit og ritstjórnarlegra útliti.
Næstu skref eru að laga hliðrunina á forsíðunni og ljúka útgáfuskilyrðunum átta. Meðal þeirra eru staðfest verð, lögfræðilega yfirfarnir skilmálar og að fólk sem ekki forritar hafi sjálft birt síðu, verðbreytingu og hjálpargrein. Eftir opnun mælum við aftur á lifandi vef og uppfærum þessa síðu.


