Har du sett till att din sida är mobilanpassad?
Visste du att Google introducerade en ny policy som heter Mobile-First?
Fler och fler webbanvändare flyttar bort från stationära datorer och istället surfar och handlar med sina mobila enheter.
Responsiv webbdesign har gjort det möjligt att skapa sajter som fungerar över alla plattformar på en jämn nivå. Men även då är responsiv design bara en bråkdel av UX-optimeringsstrategier för mobila enheter.
Om du vill ha verklig prestandaoptimering måste du också överväga andra alternativ.
Det är därför det ligger så stark tonvikt på att bygga din webbplats som en mobil-först upplevelse. Enkelt uttryckt innebär mobile-first att din design och ditt innehåll optimeras för mobilanvändare först.
Med det sagt handlar det här inlägget inte om att designa en helt ny webbplats. Istället kommer vi att titta på några grundläggande designprinciper för mobilen först. Och ägna lite tid åt att fokusera på tekniska detaljer för att optimera användarupplevelsen för dina mobilanvändare.
Innehållsförteckning
#1: Designa med mobilen i åtanke
Webben bygger till stor del på principen att betjäna datoranvändare. Den riktiga webben, de verkliga framstegen inom teknik, visas bäst på en vacker helskärmsskärm. Men smartphones och andra mobila enheter är en grej, och det är dags att börja anpassa sig till konceptet med mobil-först design.
Andra än den sunt förnuftiga responsiva designen, vilka andra designelement bör du implementera i din webbdesign som är först med mobilen?
- Prioritering. Mobilskärmar är begränsade till det tillgängliga visningsutrymmet. Mobilskärmar presenterar också innehåll på ett vertikalt sätt i motsats till mycket bredare — horisontell — struktur för stationära datorer. Det betyder att du måste designa med hjälp av prioritering. Vilka element är av yttersta vikt för användarna att se? Om det finns CTA-knappar, hur lätt är det att se dem för mobilanvändaren?
- Innehåll först. Färg tvåa. Du kan göra en del intressanta saker med mobildesign, men absolut inte inom ramen för skrivbordsdesign. Så ge vika för innehållet först. Gör din kopia och andra innehållsdelar lättlästa och tillgängliga. En mobilskärm är mycket mindre 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 och återgå till startsidan. Såvida du inte planerar för den här typen av navigering i förväg. Och det borde du. Experimentera med Scroll-to-Top-widgets, men även sömlösa klibbiga rubriker när det är möjligt.
Det bästa sättet att kontrollera om du gör detta rätt är att använda din telefon (jag gör det hela tiden!) och besöka din webbplats. Gör en grundlig undersökning av hur saker känns och flyter ihop.
Om du sitter på ett kafé eller väntar på ett flyg på en flygplats, peta någon på en axel och be dem artigt kolla din sida åt dig. Luta dig sedan tillbaka och hör deras feedback. De flesta gånger kommer du att överraska dig själv med hur människor uppfattar användarupplevelsen av din webbplats.
#2: Resursoptimering; bilder, ikoner etc.
Hur ofta upplever du att du använder bilder för personliga preferenser och inte UX? Det händer, och om du ska vara kreativ lönar det sig att förstå hur medieoptimering fungerar.
Visuella element som foton, illustrationer, ikoner och videor är de största bandbreddskonsumenterna på webbsidor.
Den genomsnittliga webbsidans storlek 2018. Listad efter branscher och olika länder.
Även om det inte finns en fast webbsidestorlek som alla måste uppfylla, är det sunt förnuft att en mindre webbsidestorlek motsvarar snabbare laddningstider.
Så, hur kan du trimma 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? Tja, jag kan inte räkna på hur många gånger jag har surfat på en mobilsajt bara för att ha 1980 x 1200 bilder laddade i bakgrunden. Istället bör bilder i full storlek tillhandahållas som alternativa länkar när det är lämpligt. Ändra storlek kan raka bort upp till 80 % av den totala bildstorleken, beroende på dina önskade mått. För mobila enheter finns det dock aldrig någon anledning att gå över intervallet 600-700px som mest.
- Minska filstorleken med komprimering. Bildkomprimering/optimering är processen att använda programvara från tredje part för att minska antalet färger som finns i en bild. Detta kan göras till en sådan grad att dina foton inte förlorar sin medfödda kvalitet utan kan få sin filstorlek reducerad drastiskt. Om du behöver hjälp med att komprimera bilder, leta inte längre än vår omfattande sammanfattning av bildkomprimeringsverktyg.
- Utforska alternativa filformat. Alla har hört talas om filformaten PNG och JPEG. När allt kommer omkring är de de facto bildstandarderna på webben. Men inte länge. Den senaste och bästa tekniken inom digital bildleverans kretsar kring WebP och SVG-filformat. SVG:er kan till exempel automatiskt skala till skärmstorlekvilket minskar antalet resurser som behövs för att ladda specifika visuella komponenter.
Användarupplevelseoptimering för mobil-först är bara en uppmärksam sak. Att designa på impuls innebär att du inte tar hänsyn till de långsiktiga effekterna av dina beslut. Medan ett medvetet tillvägagångssätt hjälper dig att bygga med mobilanvändare i åtanke från grunden.
Insiktsfull: I linje med konceptet med intuitiv mobildesign behöver du inte återanvända samma visuella komponenter på dina mobildesigner. Att eliminera några bakgrundsbilder och ersätta dem med färgbakgrunder – på mobilen – kommer inte att skada användarupplevelsen. Leta alltid efter sätt att spara även den minsta mängd bandbredd.
#3: Förladdning och Lazy-loading
Är det nödvändigt att ladda alla medieresurser på sidor som tar avsevärt lång tid att läsa? Och kan det hjälpa att rendera externa sidor före användare som besöker dem?
Låt oss först titta på 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 rendera sida B innan han klickar på navigeringslänken på sida A.
Tänk på att förladdning inte alltid fungerar, och det är upp till webbläsaren att fatta det slutgiltiga beslutet. Faktorer som enhetstyp och bandbredd vägs individuellt.
Vilka är de vanligaste typerna av förladdare?
- Förhämtning. Den här typen tyder på att en specifik webbadress med största sannolikhet är nästa navigeringsval. Och om webbläsaren beviljar begäran kommer den automatiskt att cachelagra viktiga sidresurser, vilket i sin tur gör att nästa sida laddas mycket snabbare.
- Förrender. Medan ovanstående typ 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 kommer att lösa den angivna DNS och inget annat. Som ett resultat, om en användare gör en specifik ”sväng” på din webbplats, rakar du i princip bort den tid det tar att navigera.
- Föranslut. Samma som ovan, men upprättar även anslutningar, och handskakning, med TCP- och TLS-anslutningar.
Vilka ä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 preloaders använder dynamiska HTML-taggar kan du förladda innehåll som Google Fonts eller skapa ett anpassat skript för förladdning av JavaScript-tillgångar i WordPress.
BTW, om du använder WordPress då WP raket kan hjälpa dig med det för att överladda din webbplats.
Nu när du vet mer om förladdare, låt oss prata om det andra heta ämnet: lazy-loading.
Vad är Lazy Loading?
När du besöker en ny webbsida, oavsett om det är ett blogginlägg eller en statisk webbplats – hämtar webbläsaren hela sidans innehåll och tjänar sedan innehållet som en inbyggd surfupplevelse. I de flesta fall tvingas du ladda ner hela sidan utan att egentligen se längre än ovanför mitten.
Medan vid lat inläsning uppmanas webbläsaren att ladda (rendera) innehåll som bara finns i användarens visningsport. Så om det finns storlekskänsliga foton eller videor som lagts till på en viss sida, kommer dessa filer bara att visas när din webbläsarskärm når den delen av webbplatsen.
Och om du är orolig för potentiella SEO-problem, var det inte. Yoast har bekräftat det Google renderar sidor som använder lazy loadingoch ser det bara som ytterligare en signal för prestandaförbättring.
Min rekommendation för ett bibliotek att använda är Layzr.js — enkel och effektiv latladdning för dina bilder! Skriptet aktiveras också på projektets hemsida, så att du kan se det utföra i realtid. WordPress-användare kan hitta dussintals plugin som laddar lat i den offentliga plugin-repo.
#4: Webbcache
Webbcaching bygger på konceptet att kopiera en version av en sida, som sedan kan presenteras för användaren när som helst. Sidor cachelagras vid första besöket på en webbplatssida. När en ny användare sedan försöker komma åt den sidan, istället för att servera liveversionen, kommer webbservern att visa den cachade versionen.
Målet med någon form av cachning är att förbättra webbplatsens prestanda och minska de nödvändiga back-end-resurserna. Beroende på din cachningslö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 var säker på att det finns massor av andra lösningar på marknaden, speciellt om du är en WordPress-användare.
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 kluster av distribuerade servrar för att tillhandahålla otroligt snabb innehållsleverans. A CDN kan snabbt överföra alla populära innehållstyper på webben: video, foto, JavaScript, etc. Nuförtiden går det mesta av webbens trafik genom någon form av ett CDN.
En sak att komma ihåg om innehållsleveransnätverk är att de fungerar bäst när de används på en webbplats med hög efterfrågan. Så om du bara servar några tusen besökare i månaden kan det vara svårt att se märkbara förbättringar. Ändå är ett CDN en utmärkt lösning för att förbättra din webbplats laddningstider, minska kostnaderna för bandbredd, öka innehållets tillgänglighet och stärka den övergripande säkerheten.
Om du inte har tidigare erfarenhet av CDN, rekommenderar vi att du testar Cloudflare — de tillhandahåller en gratis-för evigt plan, och det är en fantastisk plattform att börja lära sig med. Och om Cloudflare inte lever upp till dina förväntningar, kolla in vårt inlägg för de bästa gratis CDN-leverantörerna på marknaden.
#5: AMP (Accelerated Mobile Pages)
Googles AMP-projekt är mobiloptimering på steroider! I grund och botten tar AMP ner dina sidor för att ge en supersnabb laddningsupplevelse, men också för att göra innehållsläsbarhet till en prioritet. Med tanke på hur viktig sidhastighet är, kan du ta mod till dig och säga nej till nästan omedelbara laddningstider?
Okej, alla dessa modeord låter bra, men hur fungerar AMP?
AMP är en nakna HTML-sida med vissa begränsningar för vilken typ av innehåll som kan visas. Detta leder till mycket snabbare laddningstider och övergripande prestanda på grund av begränsningar för exekvering av skript och sådant.
JavaScript fungerar till exempel inte med AMP. Såvida du inte använder AMP JS-biblioteket tillgängligt på GitHub. Genom att använda JS-biblioteket kan du uppnå vissa resultat, som att undvika annonsblockerare, men om du vill ha verklig prestanda är rå AMP rätt väg att gå.
Intressanta fallstudier för AMP:
#6: Testa innan du bestämmer dig
I dessa tider finns det ingen ursäkt för att inte ha en separat iscensättningsmiljö för ditt projekt. De flesta molnvärdplattformar erbjuder iscensättningsmiljöer som standard, så kolla med din leverantör för att se om du har tillgång till en.
Vad är en iscensättningsmiljö?
Tja, det snabbaste sättet att förklara detta är genom att titta på din nuvarande livewebbplats.
Den här webbplatsen är vad du kallar en produktionsplats – en realtidsversion av all kod, skript och innehåll som din webbplats är baserad på. En iscensättningsmiljö i detta sammanhang är en kopia av din produktionsplats. En dummy sida om du så vill. Och i den här iscensättningsmiljön kan du göra ändringar eller lägga till nya funktioner utan att skada din livesajt.
Jag tänker alltid tillbaka på Ashley Harpps inlägg, Slösa inte tid – Testa ändringar innan du bestämmer dig.
Hennes syn på hur vi ”lurar” oss själva för att undvika vissa saker är ett utmärkt exempel på hur vi inte vill ta ansvar när vi gör ett misstag. Ändå innehåller Ashleys inlägg också länkar till användbara verktyg för att sätta upp en lokal iscensättningsmiljö.
Att testa är inte så skrämmande som det låter. Men det är verkligen läskigt när du av misstag raderar hela din databas på en produktionsserver!
Avslutande uttalande
Att optimera din webbplats för en smidig mobilupplevelse är inte så svårt. Allt du behöver är lite beslutsamhet och villigt tillämpa de beskrivna metoderna i det här inlägget. Chansen är stor att du redan är bekant med saker som innehållscache och lazy-loading, men hur är det med iscensättningsmiljöer eller preloaders?
Förhoppningsvis har det här inlägget kastat lite ljus över det nuvarande tillståndet för mobilwebbplatsoptimering.