Har du sørget for at siden din er mobilvennlig?
Visste du at Google introduserte en ny policy kalt Mobile-First?
Flere og flere nettbrukere flytter bort fra stasjonære datamaskiner, og i stedet surfer og handler med sine mobile enheter.
Responsivt webdesign har gjort det mulig å lage sider som fungerer på tvers av alle plattformer på et jevnt nivå. Men selv da er responsiv design bare en brøkdel av UX-optimaliseringsstrategier for mobil.
Hvis du vil ha ekte ytelsesoptimalisering, må du også vurdere andre alternativer.
Dette er grunnen til at det er så sterk vekt på å bygge nettstedet ditt som en mobil-først opplevelse. Enkelt sagt betyr mobile-first at designet og innholdet ditt er optimalisert for mobilbrukere først.
Når det er sagt, handler ikke dette innlegget om å designe et helt nytt nettsted. I stedet skal vi se på noen grunnleggende designprinsipper for mobil først. Og bruk litt tid på å fokusere på tekniske detaljer for å optimalisere brukeropplevelsen for mobilbrukerne dine.
Innholdsfortegnelse
#1: Design med mobil i tankene
Internett er i stor grad bygget på prinsippet om å betjene skrivebordsbrukere. Det virkelige nettet, de virkelige fremskritt innen teknologi, vises best på en vakker fullskjerm. Men smarttelefoner og andre mobile enheter er en ting, og det er på tide å begynne å tilpasse seg konseptet med mobil-først-design.
Hvilke andre designelementer bør du implementere i din mobil-første webdesign, bortsett fra den fornuftige responsive designen?
- Prioritering. Mobilskjermer er begrenset til tilgjengelig visningsplass. Mobilskjermer presenterer også innhold på en vertikal måte i motsetning til mye bredere – horisontal – struktur for stasjonære datamaskiner. Det betyr at du må designe ved hjelp av prioritering. Hvilke elementer er av største betydning for brukerne å se? Hvis det er CTA-knapper, hvor lett er det å se dem for mobilbrukeren?
- Innhold først. Farge nummer to. Du kan gjøre noen interessante ting med mobildesign, men absolutt ikke innenfor rammen av skrivebordsdesign. Så vik for innholdet først. Gjør kopien og andre innholdsdeler lett lesbare og tilgjengelige. En mobilskjerm er mye mindre tilgivende når det gjelder forstyrrende visuelle elementer.
- Enkel navigering. På en mobil enhet kan du ikke bare klikke hvor som helst og gå tilbake til hjemmesiden. Med mindre du selvfølgelig planlegger denne typen navigasjon på forhånd. Og det burde du. Eksperimenter med Scroll-to-Top-widgeter, men også sømløse, selvklebende overskrifter når det er mulig.
Den beste måten å sjekke om du gjør dette riktig er å bruke telefonen (jeg gjør det hele tiden!) og besøke nettstedet ditt. Gjør en grundig undersøkelse av hvordan ting føles og flyter sammen.
Hvis du sitter på en kafé eller venter på et fly på en flyplass, stikk noen på skulderen og be dem høflig sjekke nettstedet ditt for deg. Deretter kan du lene deg tilbake og høre tilbakemeldingene deres. De fleste ganger vil du overraske deg selv med måten folk oppfatter brukeropplevelsen på nettstedet ditt.
#2: Ressursoptimalisering; bilder, ikoner osv.
Hvor ofte finner du deg selv å bruke visuelle elementer for personlig preferanse og ikke UX? Det skjer, og hvis du skal være kreativ, lønner det seg å forstå hvordan medieoptimalisering fungerer.
Visuelle elementer som bilder, illustrasjoner, ikoner og videoer er de største båndbreddeforbrukerne på nettsider.
Gjennomsnittlig nettsidestørrelse i 2018. Listet etter bransjer og forskjellige land.
Selv om det ikke er en bestemt nettsidestørrelse som alle må oppfylle, er det sunn fornuft at mindre nettsidestørrelse tilsvarer raskere innlastingstider.
Så hvordan kan du trimme noen ekstra KB-er eller til og med MB-er av det visuelle innholdet ditt?
- Endre størrelsen på bildene dine. Høres enkelt ut, ikke sant? Vel, jeg kan ikke telle på hvor mange ganger jeg har surfet på en mobilside bare for å ha 1980 x 1200 bilder lastet i bakgrunnen. I stedet bør bilder i full størrelse leveres som alternative lenker når det er hensiktsmessig. Endre størrelse kan barbere av opptil 80 % av den totale bildestørrelsen, avhengig av de nødvendige dimensjonene. For mobile enheter er det imidlertid aldri en grunn til å gå over 600-700px-området på det meste.
- Reduser filstørrelsen med komprimering. Bildekomprimering/optimalisering er prosessen med å bruke tredjepartsprogramvare for å redusere antall farger i et bilde. Dette kan gjøres i en grad at bildene dine ikke mister sin medfødte kvalitet, men kan få filstørrelsen redusert drastisk. Hvis du trenger hjelp med å komprimere bilder, trenger du ikke lete lenger enn vår omfattende oppsummering av bildekomprimeringsverktøy.
- Utforsk alternative filformater. Alle har hørt om filformatene PNG og JPEG. Tross alt er de de facto bildestandardene på nettet. Men ikke lenge. Den siste og beste teknologien innen digital bildelevering dreier seg om WebP og SVG-filformater. SVG-er kan for eksempel automatisk skaler til skjermstørrelseredusere antall ressurser som trengs for å laste spesifikke visuelle komponenter.
Optimalisering av brukeropplevelse for mobil først er bare en oppmerksom ting. Å designe på impuls betyr at du ikke vurderer de langsiktige effektene av beslutningene dine. Mens en oppmerksom tilnærming hjelper deg å bygge med mobilbrukere i tankene fra grunnen av.
Innsiktsfull: I tråd med konseptet med intuitiv mobildesign, trenger du ikke å gjenbruke de samme visuelle komponentene på mobildesignene dine. Å eliminere noen få bakgrunnsbilder og erstatte dem med fargebakgrunner – på mobil – vil ikke skade brukeropplevelsen. Se alltid etter måter å spare selv den minste mengden båndbredde på.
#3: Forhåndslasting og Lazy-loading
Er det nødvendig å laste alle medieressurser på sider som tar betydelig tid å lese? Og kan det hjelpe å gjengi eksterne sider før brukere besøker dem?
La oss først se på forhåndslastere, også kjent som nettleserhint.
Forhåndslastere er måter for en side å fortelle nettleseren om potensielle navigasjonsmuligheter. En bruker kan f.eks. besøke side B fra side A.
Med forhåndsinnlasting kan brukeren gjengi side B før han klikker på navigasjonslenken på side A.
Husk at forhåndsinnlasting ikke alltid fungerer, og det er opp til nettleseren å ta den endelige avgjørelsen. Faktorer som enhetstype og båndbredde veies individuelt.
Hva er de vanligste preloader-typene?
- Forhåndshenting. Denne typen antyder at en spesifikk URL mest sannsynlig er det neste navigasjonsvalget. Og hvis nettleseren innvilger forespørselen, vil den automatisk bufre viktige sideressurser, noe som igjen gjør at neste side lastes mye raskere.
- Forhåndsgjengivelse. Mens typen ovenfor bare henter visse ressurser, vil forhåndsgjengivelse bufre hele siden. Alt gjengitt innhold lagres i brukernes enhetsminne.
- DNS-forhåndshenting. DNS-forhåndshenting vil løse den angitte DNS-en og ingenting annet. Som et resultat, hvis en bruker gjør en spesifikk «sving» på nettstedet ditt, barberer du i hovedsak bort tiden det tar å navigere.
- Forhåndskoble. Samme som ovenfor, men etablerer også tilkoblinger, og håndtrykk, med TCP og TLS tilkoblinger.
Hva er noen kodeeksempler for forhåndslastere?
<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åndslast innhold som Google Fonts eller lag et tilpasset skript for forhåndsinnlasting av JavaScript-ressurser i WordPress.
BTW, hvis du bruker WordPress da WP rakett kan hjelpe deg med det for å superlade nettstedet ditt.
Nå som du vet mer om forhåndsladere, la oss snakke om det andre hotte emnet: lat-lasting.
Hva er Lazy Loading?
Hver gang du besøker en ny nettside, enten det er et blogginnlegg eller et statisk nettsted – henter nettleseren hele sidens innhold, og serverer deretter innholdet som en naturlig nettleseropplevelse. I de fleste tilfeller blir du tvunget til å laste ned hele siden uten å faktisk se lenger enn den synlige delen av nettsiden.
Mens med lat lasting, blir nettleseren bedt om å laste (gjengi) innhold som bare er innenfor visningsporten til brukeren. Så hvis det er størrelsessensitive bilder eller videoer lagt til en bestemt side, vil disse filene bare vises når nettleserskjermen din når den delen av nettstedet.
Og hvis du er bekymret for potensielle SEO-problemer, ikke vær det. Det har Yoast bekreftet Google gjengir sider som bruker lat lastingog ser det som bare enda et ytelsesforbedringssignal.
Min anbefaling for et bibliotek å bruke er Layzr.js — enkel og effektiv lat-lasting for bildene dine! Skriptet er også aktivert på prosjektets hjemmeside, slik at du kan se det utføres i sanntid. WordPress-brukere kan finne dusinvis av plugins som laster lat i den offentlige plugin-repoen.
#4: Webbufring
Webbufring er basert på konseptet med å kopiere en versjon av en side, som deretter kan presenteres for brukeren når som helst. Sidene bufres ved første besøk på en nettsides side. Når en ny bruker deretter prøver å få tilgang til den siden, i stedet for å betjene live-versjonen, vil webserveren vise den hurtigbufrede versjonen.
Målet med enhver form for caching er å forbedre nettstedets ytelse og redusere de nødvendige back-end-ressursene. Avhengig av bufringsløsningen din, kan du konfigurere egendefinerte intervaller og andre triggerbaserte hendelser.
Noen av de mest populære navnene i webcaching er Varnish, Squid og Memcached. Men vær trygg på at det er mange andre løsninger på markedet, spesielt hvis du er en WordPress-bruker.
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 utrolig rask innholdslevering. EN CDN kan raskt overføre alle populære innholdstyper på nettet: video, foto, JavaScript osv. I disse dager går mesteparten av netttrafikken gjennom en form for CDN.
Den ene tingen å huske om innholdsleveringsnettverk er at de fungerer best når de brukes på et nettsted med høy etterspørsel. Så hvis du bare betjener noen få tusen besøkende i måneden, kan det være vanskelig å se merkbare forbedringer. Likevel er et CDN en flott løsning for å forbedre nettstedets lastetider, redusere kostnadene for båndbredde, øke innholdstilgjengeligheten og styrke den generelle sikkerheten.
Hvis du ikke har tidligere erfaring med CDN, anbefaler vi å prøve ut Cloudflare — de tilbyr en gratis-for alltid-plan, og det er en flott plattform å begynne å lære med. Og hvis Cloudflare ikke lever opp til forventningene dine, sjekk ut innlegget vårt for de beste gratis CDN-leverandørene på markedet.
#5: AMP (Accelerated Mobile Pages)
Googles AMP-prosjekt er mobiloptimalisering på steroider! I hovedsak fjerner AMP sidene dine til det aller mest nødvendige for å gi en superrask lasteopplevelse, men også for å gjøre innholdslesbarhet til en prioritet. Gitt hvor viktig sidehastighet er, kan du samle motet til å si nei til nesten umiddelbare lastetider?
Ok, alle disse buzzwords høres bra ut, men hvordan fungerer AMP?
AMP er en bare-knoke HTML-side med visse begrensninger for hva slags innhold som kan vises. Dette fører til mye raskere lastetider og generell ytelse på grunn av begrensninger for utføring av skript og slikt.
JavaScript, for eksempel, fungerer ikke med AMP. Med mindre du selvfølgelig bruker AMP JS-bibliotek tilgjengelig på GitHub. Ved å bruke JS-biblioteket kan du oppnå visse resultater, som å unngå annonseblokkere, men hvis du vil ha ekte ytelse, er rå AMP veien å gå.
Interessante casestudier for AMP:
#6: Test før du forplikter deg
I denne tiden er det ingen unnskyldning for ikke å ha et eget iscenesettelsesmiljø for prosjektet ditt. De fleste nettskyvertsplattformer tilbyr oppsamlingsmiljøer som standard, så sjekk med leverandøren din for å se om du har tilgang til et.
Hva er et iscenesettelsesmiljø?
Vel, den raskeste måten å forklare dette på er ved å se på ditt nåværende live-nettsted.
Dette nettstedet er det du kaller et produksjonssted – en sanntidsversjon av all koden, skriptene og innholdet som nettstedet ditt er basert på. Et oppsamlingsmiljø i denne sammenhengen er en kopi av produksjonsstedet ditt. En dummy-side om du vil. Og i dette oppsamlingsmiljø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 forplikter deg.
Hennes syn på hvordan vi «lurer» oss selv for å unngå visse ting er et godt eksempel på hvordan vi ikke ønsker å ta ansvar når vi gjør en feil. Likevel inneholder Ashleys innlegg også lenker til nyttige verktøy for å sette opp et lokalt scenemiljø.
Testing er ikke så skummelt som det høres ut. Men det er sikkert skummelt når du ved et uhell sletter hele databasen på en produksjonsserver!
Avslutningserklæring
Å optimalisere nettstedet ditt for en jevn mobilopplevelse er ikke så vanskelig. Alt du trenger er litt besluttsomhet og villig bruke de skisserte metodene i dette innlegget. Sjansene er store at du allerede er kjent med ting som innholdsbufring og lat-lasting, men hva med iscenesettelsesmiljøer eller forhåndslastere?
Forhåpentligvis har dette innlegget kastet litt lys over den nåværende tilstanden til optimalisering av mobilnettsteder.