Har du optimerat din webbplats för mobila enheter?
Visste du att Google har implementerat en policy som kallas Mobile-First?
Allt fler internetanvändare går ifrån stationära datorer och använder istället sina mobila enheter för att surfa och handla.
Responsiv webbdesign har gjort det möjligt att skapa webbplatser som fungerar bra på alla plattformar. Men responsiv design är bara en del av strategierna för UX-optimering för mobila enheter.
För att uppnå verklig prestandaoptimering måste du också överväga andra alternativ.
Därför är det så viktigt att bygga din webbplats med en mobil-först upplevelse i åtanke. Det betyder att din design och ditt innehåll optimeras i första hand för mobilanvändare.
Den här artikeln handlar inte om att skapa en helt ny webbplats. Istället kommer vi att utforska grundläggande designprinciper för mobil-först och fokusera på tekniska aspekter för att optimera användarupplevelsen för mobilanvändare.
#1: Designa med mobilen som utgångspunkt
Webben är till stor del byggd för datoranvändare. Den ”riktiga” webben, de största tekniska framstegen, visas bäst på en stor skärm. Men smartphones och andra mobila enheter är en realitet, och det är dags att anpassa sig till konceptet med mobil-först design.
Utöver responsiv design, vilka andra designelement bör du implementera i din webbdesign som är mobil-först?
- Prioritering. Mobilskärmar har begränsat utrymme. De presenterar också innehåll vertikalt, till skillnad från den bredare, horisontella strukturen på stationära datorer. Det innebär att du måste designa med prioritering i åtanke. Vilka element är viktigast för användarna att se? Om det finns CTA-knappar, är de lätta att upptäcka för mobilanvändaren?
- Innehåll först, färg sedan. Du kan göra spännande saker med mobildesign, men inte lika mycket som med skrivbordsdesign. Prioritera därför innehållet. Gör din text och annat innehåll lättläst och tillgängligt. En mobilskärm är inte lika förlåtande när det gäller distraherande visuella element.
- Enkel navigering. På en mobil enhet kan du inte bara klicka var som helst för att återgå till startsidan, om du inte har planerat för den typen av navigering. Och det borde du. Experimentera med ”Scroll-to-Top”-widgets och, om möjligt, använd klibbiga rubriker som är synliga under scrollningen.
Det bästa sättet att kontrollera att du gör rätt är att använda din egen mobiltelefon och besöka din webbplats. Undersök noggrant hur allt känns och fungerar.
Om du är på ett café eller väntar på flyget, fråga vänligt någon om de kan kolla din sida åt dig. Lyssna sedan på deras feedback. Ofta kommer du att bli förvånad över hur andra uppfattar användarupplevelsen på din webbplats.
#2: Optimera resurser; bilder, ikoner etc.
Hur ofta använder du bilder för personliga preferenser istället för UX? Det händer, och om du vill vara kreativ är det viktigt att förstå hur medieoptimering fungerar.
Visuella element som foton, illustrationer, ikoner och videor är de största bandbreddsförbrukarna på webbsidor.
Genomsnittlig webbsidestorlek år 2018, uppdelad efter branscher och länder.
Även om det inte finns en bestämd webbsidestorlek som alla måste följa, är det logiskt att en mindre webbsidestorlek leder till snabbare laddningstider.
Så, hur kan du minska några extra KB eller till och med MB från ditt visuella innehåll?
- Ändra storlek på dina bilder. Låter enkelt, eller hur? Jag har sett otaliga mobilsidor som laddar 1980 x 1200-bilder i bakgrunden. Istället bör högupplösta bilder erbjudas som alternativa länkar vid behov. Genom att ändra storlek kan du minska bildstorleken med upp till 80 %, beroende på de mått du väljer. För mobila enheter finns det sällan anledning att överskrida 600-700px.
- Minska filstorleken genom komprimering. Bildkomprimering/optimering innebär att använda programvara för att minska antalet färger i en bild. Detta kan göras utan att bilderna förlorar sin kvalitet, samtidigt som filstorleken minskar avsevärt. Om du behöver hjälp med att komprimera bilder finns det många verktyg att utforska.
- Utforska alternativa filformat. Alla känner till PNG- och JPEG-formaten. De är de facto-standarder för bilder på webben. Men inte länge till. Den senaste tekniken för digital bildleverans handlar om WebP och SVG-filer. SVG-filer kan till exempel automatiskt skalas till skärmstorlek, vilket minskar resurserna som krävs för att ladda specifika visuella element.
Användarupplevelseoptimering för mobil-först handlar om att vara uppmärksam. Att designa på impuls innebär att man inte tänker på de långsiktiga effekterna av sina beslut. En medveten strategi hjälper dig däremot att bygga med mobilanvändarna i åtanke från grunden.
Tänk på: I enlighet med intuitiv mobildesign behöver du inte återanvända samma visuella element på dina mobilversioner. Att ta bort vissa bakgrundsbilder och ersätta dem med enfärgade bakgrunder – på mobilen – kommer inte att skada användarupplevelsen. Leta alltid efter sätt att spara bandbredd, även den minsta mängd.
#3: Förladdning och Lazy-loading
Är det nödvändigt att ladda alla medieresurser på sidor som tar lång tid att läsa? Och kan det hjälpa att ladda externa sidor i förväg?
Låt oss börja med förladdare, även kända som webbläsartips.
Förladdare är sätt för en sida att berätta för webbläsaren om potentiella navigeringsmöjligheter. En användare kan till exempel besöka sida B från sida A.
Med förladdning kan användaren ladda sida B innan han klickar på länken på sida A.
Kom ihåg att förladdning inte alltid fungerar. Det är upp till webbläsaren att fatta det slutgiltiga beslutet, baserat på faktorer som enhetstyp och bandbredd.
Vilka är de vanligaste typerna av förladdare?
- Förhämtning. Denna typ indikerar att en viss URL sannolikt kommer att vara nästa navigeringsval. Om webbläsaren godkänner begäran kommer den automatiskt att cachelagra viktiga sidresurser, vilket i sin tur gör att nästa sida laddas mycket snabbare.
- Förrendering. Medan förhämtning bara hämtar vissa resurser, cachelagrar förrendering hela sidan. Allt renderat innehåll lagras i användarens enhetsminne.
- DNS-förhämtning. DNS-förhämtning löser bara den angivna DNS:en. Om en användare gör en specifik ”sväng” på din webbplats, minskar du tiden det tar att navigera.
- Föranslutning. Samma som ovan, men även upprättar anslutningar och handskakning med TCP- och TLS-anslutningar.
Här är några kodexempel för förladdare:
<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">
Eftersom förladdare använder dynamiska HTML-taggar, kan du förladda innehåll som Google Fonts eller skapa ett anpassat skript för att förladda JavaScript-filer i WordPress.
Om du använder WordPress kan WP Rocket hjälpa dig med detta för att optimera din webbplats.
Nu när du vet mer om förladdare, låt oss prata om lazy-loading.
Vad är Lazy Loading?
När du besöker en webbsida hämtar webbläsaren hela sidans innehåll och visar sedan det. Ofta laddas hela sidan ner utan att du faktiskt ser mer än den övre halvan.
Vid lazy loading instrueras webbläsaren att bara ladda innehåll som finns i användarens visningsport. Om det finns stora bilder eller videor på en sida, visas de först när användaren scrollar till den delen av webbplatsen.
Om du är orolig för SEO, så är det inget problem. Yoast har bekräftat att Google tolkar sidor som använder lazy loading och ser det som en signal för prestandaförbättring.
Jag rekommenderar Layzr.js, ett enkelt och effektivt verktyg för lazy loading av dina bilder! Skriptet aktiveras på projektets hemsida, så att du kan se hur det fungerar i realtid. WordPress-användare kan hitta många plugin för lazy loading i plugin-biblioteket.
#4: Webbcache
Webbcaching bygger på att en kopia av en sida sparas och kan presenteras för användaren. Sidorna cachas vid det första besöket. När en ny användare försöker komma åt sidan, visar webbservern den cachade versionen istället för liveversionen.
Syftet med all form av caching är att förbättra webbplatsens prestanda och minska de resurser som krävs på backend-sidan. Beroende på din cachinglösning kan du konfigurera anpassade intervall och andra triggerbaserade händelser.
Några av de mest populära namnen inom webbcaching är Varnish, Squid och Memcached. Men det finns många andra lösningar, särskilt om du använder WordPress.
Du kan också överväga att registrera dig för ett CDN.
Vad är ett CDN (Content Delivery Network)?
Ett innehållsleveransnätverk använder ett globalt nätverk av distribuerade servrar för att leverera innehåll snabbt. Ett CDN kan snabbt leverera alla typer av innehåll: video, foto, JavaScript, etc. Mycket av internettrafiken går via något form av CDN.
CDN fungerar bäst för webbplatser med hög efterfrågan. Om du bara har några tusen besökare per månad kan det vara svårt att se betydande förbättringar. Ändå är ett CDN en utmärkt lösning för att förbättra laddningstider, minska bandbreddskostnader, öka tillgängligheten och förbättra säkerheten.
Om du inte har tidigare erfarenhet av CDN, rekommenderar vi att du testar Cloudflare. De har en gratisversion och det är en bra plattform att börja lära sig med. Om Cloudflare inte uppfyller dina förväntningar, kan du kolla in artiklar om de bästa gratis CDN-leverantörerna på marknaden.
#5: AMP (Accelerated Mobile Pages)
Googles AMP-projekt är mobiloptimering i överladdat format! AMP optimerar dina sidor för att ge en snabb laddningsupplevelse och för att göra läsbarheten till en prioritet. Med tanke på hur viktig sidhastighet är, kan du säga nej till nästan omedelbara laddningstider?
Men hur fungerar AMP?
AMP är en ”ren” HTML-sida med vissa begränsningar för vilken typ av innehåll som kan visas. Det leder till snabbare laddningstider och prestanda på grund av begränsningar för skript och sådant.
JavaScript fungerar till exempel inte med AMP, om du inte använder AMP JS-biblioteket på GitHub. Med JS-biblioteket kan du uppnå vissa resultat, men för bästa prestanda är ”rå” AMP att föredra.
Intressanta fallstudier för AMP:
#6: Testa innan du bestämmer dig
Idag finns det ingen ursäkt för att inte ha en separat testmiljö för ditt projekt. De flesta molntjänster erbjuder testmiljöer som standard, så kolla med din leverantör.
Vad är en testmiljö?
Det enklaste sättet att förklara det är att jämföra det med din nuvarande webbplats.
Din webbplats är en produktionsmiljö – en realtidsversion av all kod, skript och innehåll. En testmiljö är en kopia av din produktionsmiljö. En ”dummy”-sida. I den här miljön kan du göra ändringar eller lägga till nya funktioner utan att skada din livesajt.
Jag tänker ofta på Ashley Harpps inlägg, Slösa inte tid – Testa ändringar innan du bestämmer dig.
Hennes åsikt om hur vi ”lurar” oss själva för att undvika vissa saker är ett bra exempel på att inte ta ansvar för misstag. Ashleys inlägg innehåller också länkar till verktyg för att sätta upp en lokal testmiljö.
Att testa är inte så svårt som det låter. Men det är verkligen läskigt om du av misstag raderar hela databasen på en produktionsserver!
Sammanfattning
Att optimera din webbplats för en smidig mobilupplevelse är inte så svårt. Allt du behöver är lite vilja att tillämpa de metoder som beskrivs i den här artikeln. Du är förmodligen redan bekant med saker som caching och lazy loading, men hur är det med testmiljöer och förladdare?
Förhoppningsvis har den här artikeln gett dig en inblick i hur man optimerar webbplatser för mobila enheter.