Hvordan optimerer du dit websted til mobilbrugere?

Har du sikret dig, at din side er mobilvenlig?

Vidste du, at Google introducerede en ny politik kaldet Mobile-First?

Flere og flere internetbrugere flytter væk fra stationære computere og i stedet browser og shopper ved hjælp af deres mobile enheder.

Responsivt webdesign har gjort det muligt at skabe sider, 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 ydeevneoptimering, skal du også overveje andre alternativer.

Det er derfor, der er så stor vægt på at bygge dit websted som en mobil-først 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 websted. I stedet skal vi se på nogle grundlæggende mobile-first design-principper. Og brug lidt tid på at fokusere på det tekniske for at optimere brugeroplevelsen for dine mobilbrugere.

#1: Design med mobil i tankerne

Internettet er i høj grad bygget på princippet om at betjene desktop-brugere. Det rigtige 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 mobil-først-design.

Hvilke andre designelementer bør du implementere i dit mobile-first-webdesign, bortset fra det fornuftige responsive design?

• Prioritering. Mobilskærme er begrænset til den tilgængelige visningsplads. Mobilskærme præsenterer også indhold på en vertikal måde i modsætning til meget bredere – vandret – struktur for desktops. Det betyder, at du skal designe ved hjælp af prioritering. Hvilke elementer er af største betydning for brugerne at se? Hvis der er CTA-knapper, hvor nemt er det så at se dem for mobilbrugeren?
• Indhold først. Farve anden. Du kan gøre nogle interessante ting med mobildesign, men bestemt ikke inden for rammerne af desktopdesign. Så giv plads til indholdet først. Gør din kopi og andre indholdsdele let læselige og tilgængelige. En mobilskærm er meget mindre tilgivende overfor distraherende visuelle elementer.
• Nem navigation. På en mobilenhed kan du ikke bare klikke hvor som helst og vende tilbage til startsiden. Medmindre du selvfølgelig planlægger denne type navigation på forhånd. Og det burde du. Eksperimenter med Scroll-to-Top-widgets, men også sømløse sticky headers, når det er muligt.

Den bedste måde at kontrollere, om du gør dette rigtigt, er at bruge din 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å et fly i en lufthavn, så prik nogen på en skulder og bed dem høfligt om at tjekke dit websted for dig. Læn dig derefter tilbage og hør deres feedback. De fleste gange vil du overraske dig selv med den måde, folk opfatter brugeroplevelsen på dit websted på.

#2: Ressourceoptimering; billeder, ikoner osv.

Hvor ofte oplever du, at du bruger visuals af hensyn til personlig præference og ikke UX? Det sker, og hvis du vil være kreativ, kan det betale sig at forstå, hvordan medieoptimering fungerer.

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

Den gennemsnitlige websidestørrelse i 2018. Listet efter brancher og forskellige lande.

Selvom der ikke er en fast websidestørrelse, som alle skal opfylde, er det sund fornuft, at en mindre websidestørrelse er lig med hurtigere indlæsningstider.

Så hvordan kan du trimme nogle ekstra KB’er eller endda MB’er fra dit visuelle indhold?

• Ændr størrelsen på dine billeder. Lyder simpelt, ikke? Nå, jeg kan ikke holde tælle med, hvor mange gange jeg har browset et mobilwebsted bare for at få 1980 x 1200 billeder indlæst i baggrunden. I stedet bør billeder i fuld størrelse angives 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 intervallet 600-700px højst.
• Reducer filstørrelsen med komprimering. Billedkomprimering/optimering er processen med at bruge tredjepartssoftware til at reducere antallet af farver i et billede. Dette kan gøres i en grad, så dine billeder ikke mister deres medfødte kvalitet, men kan få deres filstørrelse reduceret drastisk. Hvis du har brug for hjælp til at komprimere billeder, skal du ikke lede længere end vores omfattende sammenfatning af billedkomprimeringsværktøjer.
• Udforsk alternative filformater. Alle har hørt om PNG- og JPEG-filformater. De er trods alt de facto billedstandarder på nettet. Men ikke længe. Den nyeste og bedste teknologi inden for digital billedlevering kredser om WebP og SVG-filformater. SVG’er kan for eksempel automatisk skaler til skærmstørrelsehvilket reducerer antallet af ressourcer, der er nødvendige for at indlæse specifikke visuelle komponenter.

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

Indsigtsfuld: I tråd med konceptet med intuitivt mobildesign, behøver du ikke at genbruge de samme visuelle komponenter på dine mobildesigns. At fjerne nogle få baggrundsbilleder og erstatte dem med farvebaggrunde – på mobilen – vil ikke skade brugeroplevelsen. Se altid efter måder at spare selv den mindste mængde båndbredde på.

#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 at gengive eksterne sider, før brugere besøger dem?

Lad os først se på preloadere, også kendt som browsertip.

Preloaders er måder, hvorpå en side kan fortælle browseren om potentielle navigationsmuligheder. En bruger kan f.eks. besøge side B fra side A.

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

Husk, at forudindlæsning ikke altid virker, og det er op til browseren at træffe den endelige beslutning. Faktorer som enhedstype og båndbredde vejes individuelt.

Hvad er de mest almindelige preloader-typer?

• Forhåndshentning. Denne type antyder, at en bestemt URL højst sandsynligt er det næste navigationsvalg. Og hvis browseren imødekommer anmodningen, vil den automatisk cache vigtige sideressourcer, hvilket igen gør, at den næste side indlæses meget hurtigere.
• Prærender. Mens ovenstående type kun henter visse ressourcer, vil prerender cache hele siden. Alt gengivet indhold gemmes i brugernes enhedshukommelse.
• DNS-forudhentning. DNS prefetch vil løse den angivne DNS og intet andet. Som et resultat, hvis en bruger foretager en specifik ‘tur’ på dit websted, barberer du i bund og grund den tid, det tager at navigere.
• Forbind. Samme som ovenfor, men etablerer også forbindelser og håndtryk med TCP- og TLS-forbindelser.

Hvad er nogle kodeeksempler for preloadere?

<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">

Da forudindlæsere bruger dynamiske HTML-tags, kan du forudindlæs indhold som Google Fonts eller opret et brugerdefineret script til forudindlæsning af JavaScript-aktiver i WordPress.

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

Nu hvor du ved mere om preloadere, så lad os tale om det andet hotte emne: lazy-loading.

Hvad er Lazy Loading?

Hver gang du besøger en ny webside, uanset om det er et blogindlæg eller et statisk websted – henter browseren hele sidens indhold og serverer derefter indholdet som en indbygget browsingoplevelse. I de fleste tilfælde er du tvunget til at downloade hele siden uden egentlig at se længere end over skillelinjen.

Mens browseren ved doven indlæsning får besked på at indlæse (gengive) indhold, der kun er i brugerens viewport. Så hvis der er tilføjet størrelsesfølsomme billeder eller videoer til en bestemt side, vil disse filer kun blive vist, når din browserskærm når den del af webstedet.

Og hvis du er bekymret for potentielle SEO-problemer, skal du ikke være det. Det har Yoast bekræftet Google gengiver sider, der bruger doven indlæsningog ser det som blot endnu et signal til forbedring af ydeevnen.

Min anbefaling til et bibliotek at bruge er Layzr.js — enkel og effektiv doven indlæsning af dine billeder! Scriptet aktiveres også på projektets hjemmeside, så du kan se det udføre i realtid. WordPress-brugere kan finde dusinvis af doven-indlæsende plugins i den offentlige plugin-repo.

#4: Webcache

Webcaching er baseret på konceptet med at kopiere en version af en side, som derefter kan præsenteres for brugeren til enhver tid. Sider cachelagres ved det første besøg på en hjemmesides side. Når en ny bruger derefter forsøger at få adgang til den side, i stedet for at servere liveversionen, vil webserveren vise den cachelagrede version.

Målet med enhver form for caching er at forbedre webstedets ydeevne og reducere de nødvendige backend-ressourcer. Afhængigt af din cacheløsning kan du konfigurere brugerdefinerede intervaller og andre trigger-baserede hændelser.

Nogle af de mest populære navne i webcaching er Varnish, Squid og Memcached. Men vær sikker på, at der er masser af andre løsninger på markedet, især hvis du er 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 utrolig hurtig indholdslevering. EN CDN kan hurtigt overføre alle populære indholdstyper på nettet: video, foto, JavaScript osv. I disse dage passerer det meste af nettets trafik gennem en form for et CDN.

Den ene ting at huske om indholdsleveringsnetværk er, at de fungerer bedst, når de bruges på et websted med høj efterspørgsel. Så hvis du kun betjener et par tusinde besøgende om måneden, kan det være svært at se mærkbare forbedringer. Ikke desto mindre er et CDN en fantastisk løsning til at forbedre din hjemmesides indlæsningstider, reducere omkostningerne til båndbredde, øge indholdstilgængeligheden og styrke den overordnede sikkerhed.

Hvis du ikke har tidligere erfaring med CDN’er, anbefaler vi at prøve Cloudflare — de giver en gratis-for 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 indlæg for de bedste gratis CDN-udbydere på markedet.

#5: AMP (Accelerated Mobile Pages)

Googles AMP projekt er mobiloptimering på steroider! I det væsentlige, AMP skærer ned på dine sider til det mest nødvendige for at give en superhurtig indlæsningsoplevelse, men også for at gøre indholdets læsbarhed til en prioritet. I betragtning af hvor vigtig sidehastighed er, kan du så samle mod til at sige nej til næsten øjeblikkelige indlæsningstider?

Okay, alle de buzzwords lyder godt, men hvordan fungerer AMP?

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

JavaScript fungerer for eksempel ikke med AMP. Medmindre du selvfølgelig bruger AMP JS-bibliotek tilgængeligt på GitHub. Ved at bruge JS-biblioteket kan du opnå visse resultater, som at undgå annonceblokkere, men hvis du vil have ægte ydeevne, så er rå AMP vejen at gå.

Interessante casestudier for AMP:

#6: Test før du forpligter dig

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

Hvad er et iscenesættelsesmiljø?

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

Dette websted er, hvad du kalder et produktionssted – en realtidsversion af al den kode, scripts og indhold, som dit websted er baseret på. Et iscenesættelsesmiljø er i denne sammenhæng en kopi af dit produktionssted. En dummy-side om man 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-websted.

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

Hendes syn på, hvordan vi ‘lurer’ os selv for at undgå visse ting, er et glimrende eksempel på, hvordan vi ikke ønsker at tage ansvar, når vi laver en fejl. Ikke desto mindre indeholder Ashleys indlæg også links til nyttige værktøjer til at oprette et lokalt iscenesættelsesmiljø.

Test er ikke så skræmmende, som det lyder. Men det er helt sikkert skræmmende, når du ved et uheld sletter hele din database på en produktionsserver!

Slutopgørelse

Det er ikke så svært at optimere dit websted til en smidig mobiloplevelse. Alt du behøver er lidt beslutsomhed og villigt anvende de skitserede metoder i dette indlæg. Sandsynligvis er du allerede bekendt med ting som indholdscaching og lazy-loading, men hvad med iscenesættelsesmiljøer eller preloadere?

Forhåbentlig har dette indlæg kastet lidt lys over den aktuelle tilstand af mobilwebsiteoptimering.