De flesta utvecklare på framsidan kommer att vara bekanta med åtminstone några av de alternativ som är tillgängliga för dem när det gäller att förbättra prestanda på framsidan. Prestanda i den meningen innebär inte hur snabbt en viss sida laddas, utan istället hur smidig och lyhörd det känns när en användare interagerar med den. Ett specifikt exempel skulle vara den bildhastighet som en användare upplever när man rullar ner din startsida. om det är konsekvent högt, då prestanda anses vara bra.
Det finns en chans att du kanske inte har upplevt ett behov av att ta itu med prestationsfrågor innan. Kanske har du inte arbetat på en webbplats som har drabbats av sådana problem, eller kanske att ta bort den lilla förseningen eller återställa de tappade ramarna ligger inte högst upp i dina prioriteringar. Hur som helst, med den ökande animationsgraden och de komplexa stilerna som byggs in på moderna webbplatser i kombination med anpassningen av den responsiva designen, är det en stor chans att du kommer att köra in i trög mobila prestanda vid någon tidpunkt. Den här artikeln kommer att föreslå några saker att tänka på när du arbetar med webbplatser och webbapps som behöver balansera komplexitet och prestanda när de körs på mindre kraftfulla mobila enheter.
? Den körs smidigt på min iPhone 5?
Gör det verkligen Jo det är bra! Här är några senaste statistik från W3Schools (inte förvirrad med W3C) som illustrerar de mest aktiva mobila operativsystemen.
Självklart är användningen av dessa data begränsad. Det är bara explicit om två operativsystem; iOS och Android. Detta lämnar Windows Phone, Blackberry och andra ännu mindre populära mobila operativsystem utan synvinkel.
Vad vi kan se är att Android marknadsandel är något större än iOS. Återigen saknar vi ytterligare detaljer här som versionsnummer och enhetsnamn, men det ger oss en bra start när vi bestämmer vart vårt stöd är mest behövs.
Nej, inte bara håller Android den högsta marknadsandelen av aktiva enheter, det lider också enormt av enhetsfragmentering. Nyliga data visar att 11.868 olika Android-enheter har blivit utsatta i naturen år 2013 (av en samplingsstorlek på 682.000 enheter). På dessa enheter användes åtta olika versioner av Android OS.
Poängen är att när det gäller att bedöma prestanda på din webbplats måste du testa på ett lämpligt sortiment av enheter. Exakt vilka enheter som endast kan bestämmas per webbplats, och bör baseras på verkliga besökardata (om du kan få tag på några) som är relaterade till din målgrupp.
I en perfekt värld skulle vi ha våra webbplatser löpande på alla enheter. I verkligheten är detta inte möjligt på grund av de vanliga tids- och finansförhållandena. Det är upp till dig att bestämma var du ska rita och välja vad som är acceptabelt.
Vanliga orsaker till dålig prestanda
Här är några saker att se efter när felsökning av prestanda på mobila enheter.
1. Stora, komplexa CSS-deklarationer
För all den awesomeness som CSS3 ger till världen av frontend-utveckling, tvingar alla dessa snygga nya stildeklarationer våra processorer att arbeta hårdare än någonsin tidigare. Juriy Zaytsev skrev en bra artikel om CSS profilering och optimering som täcker detta snyggt, men notera denna del publicerades i januari 2012.
Profileraren som Juriy använder är Opera Dragonfly's Profiler, men du kan nu profilera dina stilar enklare med Chrome DevTools genom att helt enkelt besöka Profiler i DevTools nav och välj ditt önskade alternativ.
För att se effekten av CSS för dig själv, kör en stor fancy webbplats via DevTools Profiler (om du har tid, profilera dina färgtider också) och du kommer att se prestandaproblemen jag pratar om. Låt oss ta en titt på ett exempel.
? Jag kan köra Battlefield 3 på ultra-inställningar (en mycket stor bild), men Green Man Festival-hemsidan rullar på 24fps. Vad är det med det??
Vad händer med det faktiskt?
Så vacker som webbplatsen ser ut, har utvecklarna haft att offra prestanda något för att uppnå det visuella utseende och känslan de gick för. Resultatförlusten är liten. Men om en webbplats som denna kan sakta ner prestanda på en kraftfull stationär dator, vad kan vi då förvänta oss på en mobiltelefon som körs på en 1Ghz-processor?
Naturligtvis kommer de flesta webbplatser med fina skrivbordsfunktioner med rätta att ge en mer förenklad upplevelse när de ses på mobila enheter.
När det gäller Green Man kommer mobila webbläsare att ha mindre bilder att hantera, färre eller mer förenklade animeringar och en minskad mängd dynamiskt innehåll. Som ett resultat rullar det perfekt jämnt och ser bra ut.
Om din webbplats känns trög på mobilen är det första att titta på dina CSS-deklarationer. När det gäller att hitta synderna kan kombinationer av textskuggning, boxskugga, gränsstråle, gradienter, transparens och andra liknande egenskaper som spänner över flera element på en sida öka antalet återställningar som webbläsaren behöver utföra och som en Resultatet gör att webbplatsens användargränssnitt visas trögt och inte svarar. Dessa repaints kommer säkert att vara mer uppenbara på mobilen.
Det är upp till dig att bestämma vilka stilar du är villig att hålla och som du bekvämt kan släppa. Det handlar om huruvida prestationsökningen är tillräcklig för att motivera en liten förenkling av visuella stilar. Ofta kan inte droppe prestanda tunga deklarationer fungera till förmån för den övergripande erfarenhet dina användare kommer att få.
2. Komplexa JavaScript-animationer
jQuery är nu ett standardbibliotek som används av många utvecklare som vill integrera animering i sina mönster. Huvudskälet är att det är så enkelt att använda. Du behöver verkligen inte JavaScript för att kunna använda jQuery. Det är självklart lätt att se varför detta kan leda till problem.Dålig JavaScript kan vara en orsak till ojämna animationer, varför det är viktigt att se till att dina skript är optimerade som möjligt.
Om JavaScript inte lämnar dig med de resultat du vill ha kanske du vill vända dig till CSS 3D-omvandlingar, vilket stöd redan är ganska bra på mobilmarknaden.
Genom att använda 3D-transformer kan det vara möjligt för smidiga övergångar som inte alltid är kapabla av bibliotek som jQuery. Varför? Eftersom de tillåter dig att utlösa hårdvaruaccelererad rendering som inte är en magisk lösning för alla dina animationsproblem, kan användas till bra effekt i vissa scenarier. Kolla in denna jämförelsesemo för att se hur mycket prestanda som kan skilja sig mellan de två.
För alla som inte har använt 3D-transformer tidigare, låt oss ta en titt på ett kodexempel för att komma igång. Här är några grundläggande CSS du kan använda för att animera det vertikala läget för ett element på svävaren.
CSS Exempel
Jag har skapat en live-demo på CSSDesk med alla leverantörs prefix som ingår. Observera att vissa prefix kanske inte längre krävs när du läser detta. Om du har tid, innehåller Flickrs dev blog en bra fallstudie kring detta ämne och är väl värt att läsa.
3. Progressiv Förbättring Vs. Värdigt förfall
Här har vi två? Inte så nya? villkor (progressiv förbättring firar för närvarande sitt 10-årsjubileum, efter att ha blivit myntat 2003) som fortfarande har stor betydelse idag. Båda koncepten är särskilt relevanta när man utvecklar lyhörda webbplatser och eftersom antalet tillgängliga enheter och operativsystem fortsätter att öka, kommer progressiv förbättring i synnerhet att bli ett måste på många projekt.
Är inte de båda samma sak?
Nästan. Nyckelfaktorn här är den ordning i vilken du närmar dig din design. Planeringsfunktioner som fungerar på alla enheter och sedan lägger till några gnistar för dem som kan hantera det är ett exempel på progressiv förbättring. Skapar en fancy JavaScript-funktion och fortsätter att bulta på en alternativ i slutet; värdigt förfall.
Vilken metod ska du använda? Enligt min erfarenhet resulterar progressiv förbättring nästan alltid i en bättre och renare lösning. Chris Heilmann har skrivit en ganska bra sammanfattning om detta som nu sitter över på Web Platform Docs.
Vad nästa?
Idéerna i den här artikeln är grundläggande men kommer att få dig på rätt spår när det gäller att sniffa ut orsakerna till dålig prestanda.
Om du vill lära dig mer är det bästa stället att börja veta om hur en webbläsare arbetar på en teknisk nivå. Det är trots allt webbläsaren som analyserar koden du skriver. Om du kan förstå vad det behöver för att kunna köra din webbplats smidigt, kan du fakturera din kod för att fungera med den.
Hur webbläsare arbetar: Bakom kulisserna med moderna webbläsare är en fantastisk och omfattande artikel som går in i en hel del detaljer om detta ämne. Lycka till!