Användarvänlighet

SEO-guide Del 4

Användarvänlighet (User Experience)

I takt med att sökmotorerna blir mer sofistikerade och alltmer efterliknar människor, så skiftar vårt fokus från enskilda rankingfaktorer till att istället optimera för en enskild sak, nämligen användarna.

På en global marknad är vi mer kräsna än någonsin. Vi vill ha relevant information och vi vill ha den snabbt! Därför är det viktigt att göra sig lättillgänglig för alla oavsett enhet (mobiltelefon, surfplatta eller dator).

Mobilanpassad webbplats

För att webbplatsen ska vara användarvänlig oavsett om man besöker den via smartphone, surfplatta eller dator så behöver siten vara mobilanpassad. Allra helst bör siten vara responsiv, det vill säga att webbplatsen utseende förändras utifrån skärmens storlek. Läs mer om SEO för mobiler i del 5 av SEO-guiden.

Laddningstid – ett onödigt ont (Prestanda)

Studier har visat att för varje sekund extra det tar din hemsida att ladda ökar risken att besökaren lämnar och går till en konkurrent. Med snabbare laddningstider får du nöjdare besökare som stannar längre och konvertera bättre.

Enligt Google tappar de flesta webbplatser hälften av sina besökare medan siten laddar. Google har tagit fram benchmarks hur laddningstiden se ut efter branch som är intressant läsning. I takt med att de mobila söken har ökat så har även vår tolerans för dåliga laddtider minskat. Sämre uppkoppling eller dålig täckning gör att sidor laddar långsammare och besökarna har en tendens att ge upp. Om en webbplats tar upp till fem sekunder att ladda från en mobil enhet så har sannolikheten att besökaren gett upp ökat med 90%.

Faktorer som påverka laddningstid

• Hosting
• Bildoptimering
• CSS/HTML
• Javascript
• Externa resurser
• Caching

Hosting – En korrekt “uppsatt” server ger grundförutsättningar till en snabbladdad webbplats.

När ett anrop görs till en sida så händer följande:

1. DNS-uppslag görs för att koppla samman IP-nummer med ett namn.
2. En förbindelse upprättas mellan server och webbläsare.
3. Om SSL-certifikat finns så verfieras det.

Först nu kan webbläsaren börja kommunicera med servern där du har din filer denna proccess brukar kallas för TTFB = Time To First Byte och är mått på hur snabbt servern svara.

Det finns många faktorer som påverka en servers prestanda men några exempel är:

• Kraft (ram+processor).
• Lagring.
• Bandbredd (nätverket/uppkoppling).
• Överbelastad, delas med många andra användare.
• PHP version

► Bloggtips: https://vivamedia.se/blogg/hog-tid-att-uppgradera-din-webbserver/

Sen internets födelse så har vi använd Hypertext Transfer Protocol 1.1 (HTTP) för kommunicera mellan webserver och webbläsare. Det finns ett nyare protokoll som heter HTTP/2.  Det unika med HTTP/2 är att servern kan ta emot flera förfrågningar och svara på dessa i en “klump” (multiplexing) istället för en för varje förfrågan, som tidigare illustrerades. Det är viktigt för prestandan att hostern har stöd för HTTP/2 och är därför något vi alltid rekommendera.

Du kan använda följande verktyg för att se om servern stödjer HTTP/2:
https://tools.keycdn.com/http2-test

► Bloggtips: HTTP2 för bättre prestanda

Bildoptimering – Genom att skala sina bilder korrekt spara vi in viktiga byte

Det vanligaste “problemet” vi har med laddningstid är att bilder inte är optimerade, ta onödigt mycket plats och anpassas inte till rätt storlek. Tänk därför på följande:

• Välj rätt filformat – Det finns olika bildformat och beroende på vilket du väljer blir bilderna olika stora. Välj .png för bilder med frilagd bakgrund, Välj .gif för animerade bilder, Välj nästan alltid .jpg! Det är ett format som komprimerar bilden (60% i bildupplösning, sikta på en storlek runt 200-300kb) och med komprimering får du mindre bilder som laddar snabbare. Det är även möjligt att base64 encoda bilder dock så blir dessa bilder inte sökbara i Google bildsök.
• Välj rätt upplösning – En hemsida har oftast en bredd på runt 1200px, när du ladda in en bild från exempelvis en digitalkamera med 12mpix får du en storlek runt 4000px. Detta är onödigt stort. Välj därför att skala ner bilden till rätt storlek och glöm inte att dra ner upplösningen till 72 ppi och spara bilden med färgrymden RGB.
• Välj rätt skalning när bilden ska visas – Om en bildyta som är 500×200 ska visas på webbplatsen ser då till att bilden som läggs in har det angivna måtten och lägg till width och height i bild taggen. Använd srcset på img-taggar för att ladda in rätt storlek anpassade för varje enhet.

För att komprimera bilder rekommendera vi följande gratis tjänster Optimizilla – stöd för JPEG eller PNG eller Squoosh –  stöd för att skala om dina bilder samt komprimera det vanligaste bildformaten JPG, PNG och WebP

► Bloggtips: 3 vanliga misstag som slöar ner din hemsida

CDN – Har en webbplats väldigt många bilder exempelvis en e-handel. Rekommenderas att laddar bilderna via CDN. CDN står för Content Delivery Network och används för att snabbare leverera statiskt innehåll på en hemsida. Med statistik innehåll avses t ex bilder, PDF:er, javascript osv. Ett CDN hanterar t ex inte PHP (det kan inte behandla dess kod). Ett CDN är kanske inte det bästa rent funktionsmässigt men ett väldigt snabbt nätverk för statiska filer.

När en besökare laddar en hemsida med CDN så hanterar då dels webbservern sidans utseende, innehåll, funktioner osv. Medan CDN:et levererar alla bilder, script m.m. Sidan går snabbare att laddar eftersom allt tungt innehåll mellanlagras på CDN nätverket och kommer laddas från närmaste server besökaren befinners sig till. Ex: befnner du dig i Australien så användes CDN serverar i Australien för ge dig innehållet som är lagrat hos CDN levrantören utan att din webserver behöver belastas.

CDN kan rekommenderas om kunder har många statiska filer som laddas in exempelvis bilder hos en e-handlare. Det finns flera olika leverantörer på CDN och kostnaden brukar ligga på ett par hundralappar i månaden, några kända CDN nätverk är:

• Stackpath
• Cloudflare
• Rackfish

HTML/CSS “Ren kod” är en fröjd för prestandan

Tänk på att alltid minimiera anrop till servern eller databasen, tänk på följande punkter:

• Tänk på att ta bort kod som inte används.
• Minifiera HTML/CSS.
• Inkludera all CSS i en fil.
• Undvik inline-kodning.

Javascript – använd med andakt och ladda in korrekt

Javascript används idag flitigt på webben och det finns många javascript library som inkluderas för att skapa “häftig” front-end lösningar. Några kända  javascript library är: jQuery, React och Angular. Tänk på att det ofta är resuers krävande att använda olika biblotek så håll dig till ett och inte flera. När en webbläsare ska tolka javacscript så krävs det en resurskrävande process för att förstå och rendera ut scriptet, detta kan medföra att sidan uppleves långsam och att inget dyker upp på skärmen (fast i självaverket är det en tung javascript-fil som blockera renderingen). Därav är det alltid en god idé att ladda in javascript längre ner på sidan, så att HTML-elementen kan priorteras.

• Tänk på att ta bort Javascript som inte används.
• Tänk på att mycket går att lösa med CSS3 (ex: menyer m.m.).
• Minifiera Javascript.
• Inkludera all javascript i en fil.
• Undvik inline-kodning.
• Ladda in javascript korrekt, asynkrona anrop kan laddas in i head medan övriga kan läggas längst ner i footern.

Externa resurser – håll ner anropen till servern

Bandbredd är oftas inte ett problem idag så håll nere HTTP-anrop till servern. För varje förfrågan servern behandlar krävs det ett “uppslag” som tar tid. Som vi nämnt innan så är det av stor vikt att hålla nere anropen till servern; detta kan ske via externa och interna resurser men även undvika anrop mot database och hålla database städad och fin.

• Håll nere på antal plugin
• ladda in libs via CDN
• Kombinera filer till en
• Ladda in rätt innehåll beroende på enhet
• Cache innehåll

Caching – mellanlagra data för att återanvända i framtiden

Genom att lagra information i “webbläsarens minne” undviker vi onödiga anropen till servern. Det finns två generella sätt att lagra information i webbläsaren; Browser caching och Leverage browser caching

Browser caching = spara ner bilder,html, javascript m.m till local brower cache
Leverage browser caching = sätter en tidsgräns hur länge en fil får lagras

Summering prestanda:

• Kontrollera svarstid på server (TTFB = Time To First Byte ).
• Ladda bara upp bilder på webbplatsen som är så stora som de maximalt behöver vara. Tunga bildfiler är en av de vanligaste orsakerna till en seg webbplats.
• Installera och konfigurera en cache som sparar webbplatsens innehåll i besökarens webbläsare. På det sättet behöver inte allt innehåll laddas in varje gång besökaren återkommer.
• Kombinera, komprimera och minifiera Javascript, HTML och CSS.
• Minimera request till servern. Ju färre anrop för att hämta information från servern desto bättre.
• Säkerställ att ditt CMS är uppdaterat och undvik plugin lösningar.

Testa din webbplats laddtid på Test my site – ett verktyg från Google.
För tekniskanalys av laddtid använd webpagetest.org eller Pagespeed Insights

Navigering på webbplatsen

En tydlig navigering på webbplatsen hjälper dina besökare att hitta rätt. En tydlig intern länkning mellan sidor är också en SEO-fördel då Google får enklare att söka igenom varje sida. Men en meny är inte det enda sättet att guida besökaren rätt bland ditt innehåll. Det finns flera navigeringsmetoder man kan överväga på sin webbplats:

• Meny – se till att menyn är enkel att använda både på dator och mobilen.
• Interna länkar – länka väl valda ord i din text till mer användbar information på andra sidor på din webbplats.
• Brödsmulor – brödsmulor (breadcrums) hjälper besökaren att identifiera var i hierarkin de befinner sig på en webbplats.

Så här kan breadcrumbs (brödsmulor) se ut på en webbplats.

SSL-certifikat

SSL-certifikat är en viktig trygghetsfaktor för besökare och ger förtroende för en webbplats. SSL står för “Secure Sockets Layer” och ett säkert sätt att skicka krypterad information mellan webbläsaren och server. Du har säkert sett att vissa domäner föregås av ett hänglås och ”https” i adressfältet. Detta beror på att de använder sig av ett SSL-certifikat.

SSL-certifikat är extra bra för dig som hanterar känslig information på din webbplats som t.ex. kortuppgifter eller personuppgifter. När besökaren ser att ni använder er av SSL-certfikat vet man att ni hanterar deras data på ett säkert sätt – mycket användarvänligt!
► Bloggtips: Om SSL-certfikat

3. SEO Offpage
(Digitala relationer)

4. Användarvänlighet
(User Experience)

5. SEO för mobiltelefoner

6. SEO-verktyg