Hvordan optimerer du dit websted til mobile brugere?

Har du sørget for, at dit websted er mobilvenligt?


Vidste du, at Google introducerede en ny politik kaldet Mobile-First? Mere og mere Webbrugere skifter væk fra stationære computere, i stedet for at gennemse og shoppe ved hjælp af deres mobile enheder.

Responsiv webdesign har gjort det muligt at oprette websteder, der fungerer på tværs af alle platforme på et jævnt niveau. Men selv da er responsivt design kun en brøkdel af UX-optimeringsstrategier til mobil.

Hvis du ønsker ægte ydelsesoptimering, bliver du også nødt til at overveje andre alternativer.

Derfor er der så stærk vægt på at opbygge dit websted som mobil-første oplevelse. Enkelt sagt betyder mobile-first, at dit design og indhold først er optimeret til mobilbrugere.

Når det er sagt, handler dette indlæg ikke om at designe et helt nyt sted. I stedet vil vi se på nogle grundlæggende mobile-first designprincipper. Og brug lidt tid på at fokusere på tekniske forhold til at optimere brugeroplevelsen for dine mobile brugere.

# 1: Design med mobil i tankerne

Internettet er stort set bygget på princippet om at betjene desktop-brugere. Den virkelige web, de virkelige fremskridt inden for teknologier, vises bedst på en smuk fuldskærmsskærm. Men smartphones og andre mobile enheder er en ting, og det er tid til at begynde at tilpasse sig konceptet med mobile-first design.

Bortset fra det fornuftige responsive design, hvilke andre designelementer, du burde implementere i din mobil-første webdesign?

  • Prioritering. Mobilskærme er begrænset til den tilgængelige skærmplads. Mobilskærme præsenterer også indhold på en lodret måde i modsætning til meget bredere – vandret struktur for desktops. Dette betyder, at du skal designe ved hjælp af prioritering. Hvilke elementer er yderst vigtige for brugere at se? Hvis der er CTA-knapper, hvor let er det at se dem for den mobile bruger?
  • Indhold først. Farve anden. Du kan gøre nogle interessante ting med mobildesign, men bestemt ikke inden for rammerne af skrivebordsdesign. Så give plads for indhold først. Gør din kopi og andre indholdsdele let læsbare og tilgængelige. En mobilskærm er meget mindre tilgivende på distraherende visuelle elementer.
  • Nem navigation. På en mobilenhed kan du ikke bare klikke overalt og vende tilbage til startsiden. Medmindre du selvfølgelig planlægger en sådan type navigation i forvejen. Og det skal du også. Eksperimenter med Scroll-to-Top-widgets, men også sømløse klistrede overskrifter, når det er muligt.

Den bedste måde at kontrollere, om du gør det rigtige, er at bruge din egen telefon (jeg gør det hele tiden!) Og besøge dit websted. Lav en grundig undersøgelse af, hvordan tingene føles og flyder sammen.

Hvis du sidder på en café eller venter på en flyvning i en lufthavn, stikker en på skulderen og beder dem høfligt om at tjekke dit websted for dig. Læn dig derefter tilbage og hør deres feedback. De fleste gange overrasker du dig selv med den måde, folk opfatter brugeroplevelsen på dit websted.

# 2: Ressourceoptimering; billeder, ikoner osv.

Hvor ofte finder du dig selv ved hjælp af visuals af hensyn til personlig præference og ikke UX? Det sker, og hvis du vil blive kreativ, lønner det sig at forstå, hvordan medieoptimering fungerer.

Visuelle elementer som fotos, illustrationer, ikoner og videoer er de største forbrugere på båndbredde på websider.

Gennemsnitlige indlæsningstider for 2018 Hvordan sammenligner din MachMetrics hastighedsblogDen gennemsnitlige størrelse på websiden i 2018. Liste over brancher og forskellige lande.

Selvom der ikke er en indstillet websidestørrelse, som alle skal opfylde, er det almindelig fornuft, at mindre websidestørrelse svarer til hurtigere indlæsningstid.

Så hvordan kan du trimme nogle ekstra KB eller endda MB ud af dit visuelle indhold?

  • Ændre størrelse på dine billeder. Lyder enkelt, ikke? Jeg kan ikke konstatere, hvor mange gange jeg har gennemsøgt et mobilwebsted bare for at have 1980 x 1200-billeder indlæst i baggrunden. I stedet skal fotos i fuld størrelse leveres som alternative links, når det er relevant. Ændring af størrelse kan barbere op til 80% af den samlede billedstørrelse, afhængigt af dine nødvendige dimensioner. For mobile enheder er der dog aldrig en grund til at gå over området 600-700px højst.
  • Reducer filstørrelse med komprimering. Billedkomprimering / optimering er processen med at bruge tredjepartssoftware til at reducere antallet af farver, der findes i et billede. Dette kan gøres i en grad, at dine fotos ikke mister deres medfødte kvalitet, men kan reducere deres filstørrelse drastisk. Hvis du har brug for hjælp til at komprimere billeder, skal du ikke lede længere end vores omfattende roundup af billedkomprimeringsværktøjer.
  • Udforsk alternative filformater. Alle har hørt om PNG- og JPEG-filformater. Det er trods alt de facto billedstandarder på nettet. Men ikke længe. Den seneste og bedste teknologi inden for levering af digital billed drejer sig omkring WebP og SVG filformater. SVG’er kan for eksempel automatisk skala til skærmstørrelse, reducere antallet af ressourcer, der er nødvendige for at indlæse specifikke visuelle komponenter.

Brugeroplevelsesoptimering til mobile-first er kun en opmærksom ting. At designe på impuls betyder, at du ikke overvejer de langsigtede virkninger af dine beslutninger. Mens en opmærksom tilgang hjælper dig med at bygge med mobile brugere i tankerne fra bunden af.

Indsigtsfuld: Ved at være i overensstemmelse med konceptet med intuitivt mobildesign behøver du ikke at genbruge de samme visuelle komponenter på dine mobildesign. Hvis du fjerner et par baggrundsbilleder og erstatter dem med farvebaggrunde – på mobil – vil det ikke skade brugeroplevelsen. Kig altid efter måder, hvorpå du kan spare den mindste båndbredde.

# 3: Pre-loading og Lazy-loading

Er det nødvendigt at indlæse alle medieressourcer på sider, der tager en betydelig mængde tid at læse? Og kan det hjælpe med at gengive eksterne sider, før brugere besøger dem?

Lad os se på forladere først, også kendt som browser-tip.

Forlæsere er måder for en side at fortælle browseren om mulige navigationsmuligheder på. F.eks. En bruger kan muligvis besøge side B fra side A.

Ved forindlæsning kan brugeren gengive side B, før han klikker på navigationslinket på side A.

forudindlæst direktiv

Husk, at forhåndsindlæsning ikke altid fungerer, og det er op til browseren at tage den endelige beslutning. Faktorer som enhedstype og båndbredde vejes individuelt.

Hvad er de mest almindelige forudlæsertyper?

  • Prefetch. Denne type antyder, at en bestemt URL sandsynligvis er det næste navigationsvalg. Og hvis browseren giver anmodningen, vil den automatisk cache vigtige sideressourcer, hvilket igen får den næste side til at indlæse meget hurtigere.
  • Forudgengivelse. Mens ovennævnte type kun henter bestemte ressourcer, cacheprerender hele siden. Alt gengivet indhold gemmes i brugernes enhedshukommelse.
  • DNS-Prefetch. DNS-prefetch løser den specificerede DNS og intet andet. Som et resultat, hvis en bruger foretager en bestemt ‘drej’ på dit websted, barberer du i det væsentlige den tid, det tager at navigere.
  • forhåndstilslutning. Samme som ovenfor, men etablerer også forbindelser og håndtryk med TCP- og TLS-forbindelser.

Hvad er nogle kodeeksempler for forudlæssere?

Da forladere bruger dynamiske HTML-tags, er du i stand til det forudindlæst indhold som Google Fonts eller oprette et brugerdefineret script til forindlæsning af JavaScript-aktiver i WordPress.

BTW, hvis du bruger WordPress så WP-raket kan hjælpe dig med at supercharge dit websted.

Nu hvor du ved mere om forudlæssere, lad os tale om det andet hotte emne: doven-indladning.

Hvad er Lazy Loading?

Hver gang du besøger en ny webside, uanset om et blogindlæg eller et statisk sted – browseren henter hele sideindholdet og tjener derefter dette indhold som en oprindelig browseroplevelse. I de fleste tilfælde er du tvunget til at downloade hele siden uden faktisk at se længere end over folden.

Mens der med doven indlæsning, får browseren besked om at indlæse (gengive) indhold, der kun er inden for brugerens synspunkt. Så hvis der er størrelsesfølsomme fotos eller videoer, der er føjet til en bestemt side, vises disse filer kun, når din browserskærm når denne del af webstedet.

Og hvis du er bekymret for potentielle SEO-spørgsmål, skal du ikke være det. Det har Yoast bekræftet Google gengiver sider, der bruger doven indlæsning, og ser det som blot endnu et signal til præstationsforbedring.

Layzr js

Min anbefaling til et bibliotek at bruge er Layzr.js – enkel og effektiv doble-loading til dine billeder! Scriptet er også aktiveret på projektets hjemmeside, så du kan se det optræde i realtid. WordPress-brugere kan finde snesevis af dovne-indlæse plugins i den offentlige plugin-repo.

# 4: Webcache

Web-cache er baseret på konceptet med at kopiere en version af en side, som derefter kan præsenteres for brugeren når som helst. Sider cachelagres ved det første besøg på en websides side. Når en ny bruger derefter forsøger at få adgang til denne side, i stedet for at servere den levende version, viser webserveren den cache-version.

Målet med enhver form for cache er at forbedre webstedsydelsen og mindske de nødvendige back-end-ressourcer. Afhængig af din cache-løsning kan du konfigurere tilpassede intervaller og andre triggerbaserede begivenheder.

webcache

Nogle af de mest populære navne inden for cache er lak, blæksprutte og memcached. Men vær sikker på, at der er masser af andre løsninger på markedet, især hvis du er en WordPress-bruger.

Du kan også overveje at tilmelde dig et CDN.

Hvad er et CDN (Content Delivery Network)?

Et indholdsleveringsnetværk bruger en global klynge af distribuerede servere til at levere utroligt hurtig indholdslevering. EN CDN kan hurtigt overføre alle populære indholdstyper på nettet: video, foto, JavaScript osv. I disse dage passerer de fleste webs trafik gennem en form for et CDN.

Den ene ting at huske på indholdsleveringsnetværk er, at de fungerer bedst, når de bruges på et websted med stor efterspørgsel. Så hvis du kun betjener et par tusinde besøgende om måneden, kan det være vanskeligt at se mærkbare forbedringer. Ikke desto mindre er et CDN en god løsning til at forbedre dit websteds belastningstider, reducere omkostningerne ved båndbredde, øge indholdets tilgængelighed og styrke den samlede sikkerhed.

Hvis du ikke har tidligere erfaring med CDN’er, anbefaler vi at du prøver det CloudFlare – de leverer en gratis evigt plan, og det er en fantastisk platform at begynde at lære med. Og hvis Cloudflare ikke lever op til dine forventninger, så tjek vores post for de bedste gratis CDN-udbydere på markedet.

# 5: AMP (Accelerated Mobile Pages)

Googles AMP-projekt er mobiloptimering på steroider! I det væsentlige striber AMP dine sider ned for at være nødvendigt for at give en superhurtig indlæsningsoplevelse, men også for at gøre indholdets læsbarhed prioriteret. I betragtning af hvor vigtig sidehastighed er, kan du få modet til at sige nej til næsten øjeblikkelige indlæsningstider?

Google AMP (Accelerated Mobile Pages)

Okay, alle disse buzzwords lyder godt, men hvordan fungerer AMP faktisk?

AMP er en HTML-side med bare knapper med visse begrænsninger for, hvilken slags indhold der kan vises. Dette fører til meget hurtigere belastningstider og samlet ydeevne på grund af begrænsning for eksekvering af scripts og sådan.

JavaScript fungerer f.eks. Ikke med AMP. Medmindre du selvfølgelig bruger AMP JS-bibliotek er tilgængeligt på GitHub. Brug af JS-biblioteket giver dig mulighed for at opnå visse resultater, som at undgå annonceblokkere, men hvis du vil have ægte ydelser, så er rå AMP vejen.

AMP af eksempel

Hvis du er en WordPress-bruger, vil tilføjelse af AMP til din blog i de fleste tilfælde ske ved hjælp af et plugin. Men hvis du arbejder med et specialbygget websted, kan tilføjelse af AMP for første gang føles en smule udfordrende.

Lær AMP med eksempel

Det er her AMP af eksempel kommer godt med. Et sideprojekt til den faktiske platform, dette websted beskriver alle mulige kroge, der er mulige at opnå med AMP. Hver komponent og effekt leveres med en leveret demo, så du kan se, hvordan det ser ud.

Interessante casestudier for AMP:

  1. Terra kører mobil-viewership op med AMP
  2. Times of India rapporterer 1,5X flere indtægter
  3. Fastcommerce driver konverteringer til klienter ved at bygge AMP-first

# 6: Test inden du går i gang

I denne dag og alder er der ingen undskyldning for ikke at have et separat iscenesættelsesmiljø til dit projekt. De fleste cloud-hostingplatforme tilbyder iscenesættelsesmiljøer som standard, så kontakt din udbyder for at se, om du har adgang til et.

testning før du begår

Hvad er et iscenesættelsesmiljø?

Nå, den hurtigste måde at forklare dette er ved at se på din nuværende live-webside.

Dette sted er, hvad du kalder et produktionssted – en realtidsversion af alle koder, scripts og indhold, som dit websted er baseret på. Et iscenesættelsesmiljø i denne sammenhæng er en kopi af dit produktionssite. Et dummy-sted, hvis du vil. Og i dette iscenesættelsesmiljø er du i stand til at foretage ændringer eller tilføje nye funktioner uden at ødelægge dit live-site.

Jeg tænker altid tilbage på Ashley Harpps indlæg, Spild ikke tid – Test ændringer, før du indgår.

Hendes opfattelse af, hvordan vi ‘narrer’ os selv for at undgå visse ting, er et godt eksempel på, hvordan vi ikke ønsker at tage ansvar, når vi laver en fejl. Ikke desto mindre inkluderer Ashleys indlæg også links til nyttige værktøjer til opsætning af et lokalt iscenesættelsesmiljø.

Testning er ikke så skræmmende, som det lyder. Men det er sikkert, da pokker er skræmmende, når du ved en fejltagelse sletter hele din database på en produktionsserver!

Lukningserklæring

Det er ikke så svært at optimere dit websted til en glat mobiloplevelse. Alt hvad du behøver er en smule beslutsomhed og vilje anvende de skitserede metoder i dette indlæg. Chancerne er, at du allerede er bekendt med ting som indhold cache og doven-indlæsning, men hvad med iscenesættelsesmiljøer eller forudindlæser?

Forhåbentlig har dette indlæg kaste lys over den aktuelle tilstand af mobilwebsiteoptimering. Du er velkommen til at give en kommentar eller anbefale yderligere løsninger.

Tags:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map