Mobil-færst

Mobil-først: Hvordan optimerer man sin hjemmeside til en telefon?

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

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

Flere og flere webbrugere skifter væk fra stationære computere og i stedet søger og handler ved hjælp af deres mobile enheder.

Responsivt 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 vil have ægte ydeevneoptimering , skal du også overveje andre alternativer.

Derfor er der så stor vægt på at opbygge dit websted som en mobil-først-oplevelse. Enkelt sagt betyder mobil-først, at dit design og indhold optimeres til mobilbrugere først.

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 mobil-først designprincipper. Og, bruge lidt tid på at fokusere på tekniske forhold til at optimere brugeroplevelsen til dine mobilbrugere.

# 1: Design med mobil i tankerne

Internettet er stort set bygget på princippet om at betjene desktopbrugere. Det virkelige web, de virkelige fremskridt inden for teknologier, vises bedst på en smuk fuldskærmsvisning. Men smartphones og andre mobile enheder er en ting, og det er tid til at begynde at tilpasse sig konceptet med mobil-første design.

computer, tablet, telefon, mobil-først

Bortset fra det sunde fornuftige responsive design, hvilke andre designelementer skal du implementere i dit mobil-først webdesign?

  • Prioritering. Mobilskærme er begrænset til det tilgængelige displayplads. Mobilskærme præsenterer også indhold lodret i modsætning til meget bredere – vandret struktur til desktops. Det betyder, at du skal designe ved hjælp af prioritering. Hvilke elementer er det yderst vigtigt for brugerne at se? Hvis der er CTA-knapper, hvor let er det at se dem for den mobile bruger?
  • Indholdet først. Farve som det andet. Du kan gøre nogle interessante ting med mobildesign, men bestemt ikke inden for desktop-design. 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 for 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 klæbrige overskrifter, når det er muligt.

Den bedste måde at kontrollere, om du gør dette rigtigt, er at bruge din telefon, og besøge dit websted. Lav en grundig undersøgelse af, hvordan tingene føles og flyder sammen.

Hvis du sidder på en cafe eller venter på en flyvning i en lufthavn, kan du prikke nogen på skulderen og bede 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.

# 2: Ressourceoptimering; billeder, ikoner osv.

Hvor ofte tager du dig i at bruge grafik på grund af personlig præference og ikke UX? Det sker, og hvis du bliver kreativ, betaler det sig at forstå, hvordan medieoptimering fungerer.

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

Selvom der ikke er en bestemt webside-størrelse, som alle skal opfylde, er det sund fornuft, at mindre webside-størrelse svarer til hurtigere indlæsningstider.

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

  • Ændr størrelsen på dine billeder. Det lyder simpelt, ikke? Jeg kan ikke fortsætte med at regne med, hvor mange gange jeg har gennemset et mobilwebsted bare for at få 1980 x 1200 billeder indlæst i baggrunden. I stedet bør fotos i fuld størrelse gives som alternative links, når det er relevant. Ændring af størrelse kan fjerne op til 80% af den samlede billedstørrelse afhængigt af dine krævede dimensioner. For mobile enheder er der dog aldrig en grund til at gå over 600-700px højst.
  • Reducer filstørrelsen 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, så dine fotos ikke mister deres medfødte kvalitet, men kan få deres filstørrelse reduceret drastisk.
  • Udforsk alternative filformater. Alle har hørt om PNG- og JPEG-filformater. Når alt kommer til alt er de de facto billedstandarder på internettet. Men ikke længe. Den nyeste og bedste teknologi inden for digital billedlevering drejer sig om WebP- og SVG-filformater. SVG’er kan for eksempel automatisk skaleres til skærmstørrelse , hvilket reducerer antallet af ressourcer, der er nødvendige for at indlæse specifikke visuelle komponenter.

Optimering af brugeroplevelse til mobil-først er kun en opmærksomhedsbaseret 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 mobilbrugere i tankerne fra bunden.

Indsigtsfuld: Hvis du holder dig i tråd med konceptet med intuitivt mobildesign, behøver du ikke genbruge de samme visuelle komponenter på dine mobile designs. Fjernelse af et par baggrundsbilleder og erstatning med farvebaggrund – på mobil – vil ikke skade brugeroplevelsen. Se altid efter måder at spare selv den mindste mængde båndbredde på.

Læs mere her om hvordan grafisk design er vigtigt for din hjemmeside.

# 3: For-indlæsning og doven-indlæsning

Er det nødvendigt at indlæse alle mediaressourcer på sider, der tager betydelig tid at læse? Og kan det hjælpe med at gengive eksterne sider, inden brugerne besøger dem?

Lad os se på forudindlæsere først, også kendt som browserhints.

Forudindlæsere er måder, hvorpå en side fortæller browseren om mulige navigationsmuligheder. F.eks kan en bruger besøge Side B fra Side A .

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

Husk, at forudindlæ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 forudindlæsertyper?

  • Forhent.  Denne type antyder, at en bestemt URL sandsynligvis er det næste navigationsvalg. Og hvis browseren imødekommer anmodningen, vil den automatisk cache vigtige sideressourcer, hvilket igen får den næste side til at indlæses meget hurtigere.
  • Forudbetaling. Mens ovennævnte type kun henter visse ressourcer, vil forudgiveren cache hele siden. Alt gengivet indhold gemmes i brugernes enhedshukommelse.
  • DNS-forudhentning. Forhentning af DNS løser den angivne DNS og intet andet. Som et resultat, hvis en bruger foretager en bestemt ‘tur’ på dit websted, mindsker du i det væsentlige den tid, det tager at navigere.
  • Forbind igen. Samme som ovenfor, men opretter også forbindelser og håndtryk med TCP- og TLS-forbindelser.

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

Og hvis du bruger WordPress, kan WP Rocket  hjælpe dig med det for at oplade dit websted.

Nu hvor du ved mere om forudindlæser, lad os tale om det andet hotte emne: doven indlæsning (også kaldt lazy loading).

Hvad er Lazy Loading?

lazy loading

Hver gang du besøger en ny webside, hvad enten det er et blogindlæg eller et statisk websted – henter browseren hele sideindholdet og viser derefter dette indhold som en indfødt 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 ved doven indlæsning, fortælles browseren at indlæse (gengive) indhold, der kun er inden for brugerens synspunkt. Så hvis der er føjet størrelsesfølsomme fotos eller videoer til en bestemt side, vises disse filer kun, 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. Yoast har bekræftet, at Google gengiver sider, der bruger doven indlæsning , og ser det som bare endnu et signal til forbedring af ydeevnen.

# 4: Webcaching

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 første besøg på en websides side. Når en ny bruger derefter forsøger at få adgang til siden, i stedet for at betjene live versionen, viser webserveren den cachelagrede version.

Målet med enhver form for caching er at forbedre webstedsydelsen og mindske de krævede back-end-ressourcer. Afhængigt af din cacheløsning kan du konfigurere brugerdefinerede intervaller og andre triggerbaserede 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 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 utrolig hurtig indholdslevering. Et CDN kan hurtigt overføre alle populære indholdstyper på internettet: video, foto, JavaScript osv. I disse dage passerer det meste af webbets trafik gennem en eller anden form for et CDN.

Den ene ting man skal huske med 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 en CDN en fantastisk løsning til at forbedre indlæsningstiderne på dit websted, reducere omkostningerne ved båndbredde, øge tilgængeligheden af ​​indhold og styrke den samlede sikkerhed.

Hvis du ikke har tidligere erfaring med CDN’er , anbefaler vi at prøve Cloudflare – de giver en gratis plan for altid, og det er en god platform at begynde at lære med. 

# 5: AMP (Accelerated Mobile Pages)

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

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

AMP er en barberet HTML-side med visse begrænsninger for, hvilken type indhold der kan vises. Dette fører til meget hurtigere indlæsningstider og samlet ydeevne på grund af begrænsning for udførelse af scripts og lignende.

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

AMP ved eksempel

Hvis du er WordPress-bruger, tilføjes AMP til din blog i de fleste tilfælde ved hjælp af et plugin. Men hvis du arbejder med et specialbygget sted, kan det føles lidt udfordrende at tilføje AMP for første gang.

Det er her AMP by Example er praktisk. Et sideprojekt til selve platformen, beskriver dette websted alle kroge og hjørner, der er mulige at opnå med AMP. Hver komponent og effekt leveres med en leveret demo, så du kan se, hvordan den ser ud.

# 6: Test inden du forpligter dig

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

Hvad er et iscenesættelsesmiljø?

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

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

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!

Konklusion

Optimering af dit websted til en jævn mobiloplevelse er ikke så svært. Alt hvad du behøver er en smule beslutsomhed og villigt anvende de skitserede metoder i dette indlæg. Chancerne er, at du allerede er fortrolig med ting som indholdsbuffer og dovenindlæsning, men hvad med iscenesættelsesmiljøer eller forudindlæser?

Forhåbentlig har dette indlæg belyst den aktuelle tilstand af mobilwebsiteoptimering.

Ring til os på +45 28 99 29 11 eller kontakt os online for at tale med en strateg om dit websted.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top