Er nettstedet ditt tilpasset mobilbruk?
Visste du at Google har innført en ny strategi kalt «Mobil først»?
Stadig flere brukere beveger seg bort fra stasjonære datamaskiner, og velger heller å surfe og handle via mobile enheter.
Responsivt webdesign har gjort det mulig å skape nettsider som fungerer sømløst på tvers av alle plattformer. Men selv med responsiv design, utgjør dette kun en liten del av UX-optimaliseringsstrategier for mobil.
For å oppnå reell ytelsesoptimalisering, må du se på flere alternativer.
Derfor er det et sterkt fokus på å utvikle nettstedet ditt som en mobil-først opplevelse. Kort fortalt betyr «mobil først» at designet og innholdet ditt er optimalisert for mobilbrukere først og fremst.
Dette innlegget handler ikke om å designe et helt nytt nettsted. Vi skal i stedet se på noen grunnleggende designprinsipper for mobil først. Vi skal også fokusere på tekniske detaljer for å optimalisere brukeropplevelsen for dine mobilbrukere.
#1: Tenk mobil først i designprosessen
Internettet er i stor grad bygget med tanke på skrivebordsbrukere. Den ekte nettet, de virkelige fremskrittene innen teknologi, kommer best til syne på en stor skjerm. Men smarttelefoner og andre mobile enheter er nå en realitet, og det er på tide å begynne å tilpasse seg konseptet med mobil-først-design.
Hvilke andre designelementer bør du implementere i ditt mobil-først webdesign, i tillegg til responsivt design?
- Prioritering: Mobilskjermer har begrenset plass. De viser også innhold vertikalt, i motsetning til den horisontale strukturen på stasjonære datamaskiner. Derfor er prioritering nøkkelen. Hvilke elementer er viktigst for brukerne å se? Hvis det er CTA-knapper, hvor synlige er de for mobilbrukere?
- Innhold først: Farger kommer i andre rekke. Du kan gjøre spennende ting med mobildesign, men ikke innenfor rammene av skrivebordsdesign. La derfor innholdet komme først. Gjør teksten og andre innholdsdeler lette å lese og tilgjengelige. En mobilskjerm er mindre tilgivende når det gjelder forstyrrende visuelle elementer.
- Enkel navigasjon: På en mobil enhet kan du ikke bare klikke hvor som helst for å komme tilbake til startsiden. Med mindre du planlegger denne type navigasjon. Og det bør du. Eksperimenter med «Scroll-to-Top»-funksjoner, og bruk faste overskrifter når det er mulig.
Den beste måten å sjekke at du gjør dette riktig, er å bruke din egen telefon (det gjør jeg hele tiden!) og besøke nettstedet ditt. Undersøk grundig hvordan ting føles og flyter sammen.
Hvis du sitter på en kafé eller venter på et fly, spør noen pent om de vil se på nettstedet ditt. Deretter kan du lene deg tilbake og høre på tilbakemeldingene deres. Du vil ofte bli overrasket over hvordan folk oppfatter brukeropplevelsen på nettstedet ditt.
#2: Optimalisering av ressurser; bilder, ikoner osv.
Hvor ofte bruker du visuelle elementer for personlig preferanse, og ikke UX? Det skjer, og hvis du skal være kreativ, er det viktig å forstå hvordan medieoptimalisering fungerer.
Visuelle elementer som bilder, illustrasjoner, ikoner og videoer er de største forbrukerne av båndbredde på nettsider.
Selv om det ikke finnes en spesifikk sidestørrelse som alle må følge, er det fornuftig at mindre sidestørrelse gir raskere lastetider.
Så hvordan kan du redusere noen ekstra KB eller MB fra det visuelle innholdet ditt?
- Endre størrelsen på bildene dine: Det høres enkelt ut, ikke sant? Likevel har jeg sett mange nettsider som laster 1980 x 1200 bilder i bakgrunnen på mobile enheter. Bilder i full størrelse bør heller være tilgjengelige som alternative lenker. Ved å endre størrelsen, kan du redusere bildestørrelsen med opptil 80 %, avhengig av dimensjonene. For mobile enheter er det sjelden en grunn til å overstige 600-700 piksler på det meste.
- Reduser filstørrelsen med komprimering: Bildekomprimering/optimalisering er prosessen med å bruke programvare for å redusere antall farger i et bilde. Dette kan gjøres uten at bildene mister kvalitet, og filstørrelsen kan reduseres drastisk. Hvis du trenger hjelp med å komprimere bilder, finnes det mange gode verktøy.
- Utforsk alternative filformater: Alle kjenner til PNG og JPEG. De er de facto bildestandardene på nettet. Men nå finnes det nyere og bedre teknologi som WebP og SVG-filformater. SVG-er kan for eksempel automatisk skalere til skjermstørrelse, noe som reduserer ressursene som trengs for å laste spesifikke visuelle elementer.
Optimalisering av brukeropplevelse for mobil handler om å være bevisst. Å designe i blinde betyr at du ikke tenker på de langsiktige effektene av dine valg. Mens en bevisst tilnærming hjelper deg å bygge med mobilbrukere i tankene fra starten av.
Viktig: I tråd med intuitiv mobildesign, trenger du ikke å bruke de samme visuelle komponentene på mobilversjonen av nettsiden din. Å fjerne noen bakgrunnsbilder og erstatte dem med fargebakgrunner på mobil vil ikke skade brukeropplevelsen. Se alltid etter måter å spare båndbredde på, selv de minste mengdene.
#3: Forhåndslasting og Lazy-loading
Er det nødvendig å laste alle medieressurser på sider som tar lang tid å lese? Kan det hjelpe å laste inn eksterne sider før brukerne besøker dem?
La oss først se på forhåndslasting, også kjent som nettleserhint.
Forhåndslasting er en måte for en side å fortelle nettleseren om potensielle navigasjonsmuligheter. For eksempel kan en bruker gå fra side A til side B.
Med forhåndslasting kan brukeren laste inn side B før han klikker på navigasjonslenken på side A.
Husk at forhåndslasting ikke alltid fungerer, og det er opp til nettleseren å ta den endelige avgjørelsen. Faktorer som enhetstype og båndbredde vurderes individuelt.
Hva er de vanligste typene forhåndslasting?
- Forhåndshenting: Denne typen antyder at en bestemt URL sannsynligvis er neste navigasjonsvalg. Hvis nettleseren tillater forespørselen, vil den automatisk bufres viktige sideressurser, noe som gjør at neste side lastes raskere.
- Forhåndsgjengivelse: Mens typen ovenfor bare henter visse ressurser, vil forhåndsgjengivelse laste inn hele siden. Alt innhold lagres i brukernes enhetsminne.
- DNS-forhåndshenting: DNS-forhåndshenting løser den angitte DNS-en. Hvis en bruker gjør en spesifikk «sving» på nettstedet ditt, reduseres tiden det tar å navigere.
- Forhåndskoble: Samme som ovenfor, men oppretter også tilkoblinger med TCP og TLS.
Hva er noen kodeeksempler for forhåndslasting?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Siden forhåndslastere bruker dynamiske HTML-koder, kan du forhåndslaste innhold som Google Fonts, eller lage et tilpasset skript for forhåndslasting av JavaScript-ressurser i WordPress.
Hvis du bruker WordPress, kan WP Rocket hjelpe deg med dette, for å optimalisere nettstedet ditt.
Nå som du vet mer om forhåndslasting, la oss snakke om det andre populære temaet: lat lasting.
Hva er Lazy Loading?
Hver gang du besøker en ny nettside, enten det er et blogginnlegg eller et statisk nettsted, laster nettleseren hele sidens innhold og viser det. I de fleste tilfeller blir du tvunget til å laste ned hele siden, selv om du bare ser den synlige delen av siden.
Med lat lasting derimot, laster nettleseren kun innhold som er synlig for brukeren. Så hvis det er store bilder eller videoer på en bestemt side, vil disse filene bare vises når nettleseren når den delen av nettstedet.
Hvis du er bekymret for SEO-problemer, trenger du ikke være det. Yoast har bekreftet at Google laster sider som bruker lat lasting og ser det som et ytelsesforbedringssignal.
Min anbefaling for et bibliotek å bruke er Layzr.js – enkel og effektiv lat lasting for dine bilder! Skriptet er også aktivert på prosjektets hjemmeside, slik at du kan se det i sanntid. WordPress-brukere kan finne mange plugins som tilbyr lat lasting i den offentlige plugin-databasen.
#4: Webbufring
Webbufring er basert på å lagre en kopi av en side, som deretter kan vises til brukeren. Sider bufres ved første besøk. Når en ny bruker prøver å få tilgang til siden, vil webserveren vise den hurtigbufrede versjonen i stedet for live-versjonen.
Målet med all form for bufring er å forbedre ytelsen til nettstedet og redusere ressursbruken. Avhengig av bufringsløsningen din, kan du konfigurere tilpassede intervaller og hendelser.
Noen av de mest populære navnene innen webbufring er Varnish, Squid og Memcached. Men det finnes mange andre løsninger på markedet, spesielt hvis du bruker WordPress.
Du kan også vurdere å registrere deg for et CDN.
Hva er et CDN (Content Delivery Network)?
Et innholdsleveringsnettverk bruker en global klynge av distribuerte servere for å gi rask innholdslevering. Et CDN kan raskt overføre alle populære innholdstyper: video, bilder, JavaScript osv. I dag går mye av internettrafikken gjennom et CDN.
Det er viktig å huske at innholdsleveringsnettverk fungerer best når de brukes på et nettsted med høy trafikk. Hvis du bare har noen få tusen besøkende i måneden, kan det være vanskelig å se store forbedringer. Likevel er et CDN en god løsning for å forbedre lastetider, redusere båndbreddekostnader, øke tilgjengeligheten av innhold og styrke sikkerheten.
Hvis du ikke har erfaring med CDN, anbefaler jeg å prøve ut Cloudflare. De tilbyr en gratis plan, og det er en flott plattform å starte med. Hvis Cloudflare ikke lever opp til forventningene dine, finnes det mange andre gratis CDN-leverandører på markedet.
#5: AMP (Accelerated Mobile Pages)
Googles AMP-prosjekt er mobiloptimalisering i praksis! AMP reduserer sidene dine til det mest nødvendige for å gi en lynrask lasteopplevelse og prioritere lesbarhet. Med tanke på hvor viktig sidehastighet er, vil du vel takke ja til nesten umiddelbare lastetider?
Disse begrepene høres bra ut, men hvordan fungerer AMP?
AMP er en enkel HTML-side med begrensninger for hva slags innhold som kan vises. Dette fører til raskere lastetider og generell ytelse, på grunn av begrensninger for skript og slikt.
JavaScript fungerer for eksempel ikke med AMP, med mindre du bruker AMP JS-biblioteket på GitHub. Ved å bruke JS-biblioteket kan du oppnå visse resultater, som å unngå annonseblokkere, men hvis du vil ha reell ytelse, er rå AMP veien å gå.
Interessante casestudier for AMP:
#6: Test før du publiserer
I dag finnes det ingen unnskyldning for ikke å ha et eget testmiljø for prosjektet ditt. De fleste skyløsningsplattformer tilbyr testmiljøer som standard, så sjekk med leverandøren din om du har tilgang til et.
Hva er et testmiljø?
Den raskeste måten å forklare det på er ved å se på ditt nåværende live-nettsted.
Dette nettstedet er det vi kaller et produksjonssted – en sanntidsversjon av all koden, skriptene og innholdet som nettstedet ditt er basert på. Et testmiljø er en kopi av produksjonsstedet ditt. En dummy-side. I dette testmiljøet kan du gjøre endringer eller legge til nye funksjoner uten å ødelegge livesiden din.
Jeg tenker alltid tilbake på Ashley Harpps innlegg, Ikke kast bort tid – Test endringer før du publiserer.
Hennes syn på hvordan vi «lurer» oss selv til å unngå visse ting er et godt eksempel på hvordan vi ikke ønsker å ta ansvar når vi gjør en feil. Ashleys innlegg inneholder også lenker til nyttige verktøy for å sette opp et lokalt testmiljø.
Testing er ikke så skummelt som det høres ut. Men det er garantert skummelt hvis du ved et uhell sletter hele databasen på en produksjonsserver!
Oppsummering
Å optimalisere nettstedet ditt for en god mobilopplevelse er ikke så vanskelig. Det eneste du trenger er litt vilje til å bruke metodene som er beskrevet i dette innlegget. Du er kanskje allerede kjent med innholdsbufring og lat lasting, men hva med testmiljøer eller forhåndslastere?
Jeg håper dette innlegget har gitt deg innsikt i den nåværende tilstanden innen optimalisering av mobilnettsteder.