Fem mobile nettsteders ytelsesutfordringer (og hvordan du fikser dem)

Denne artikkelen ble opprinnelig publisert på SiteSpect-siden. Det er revidert litt for TechRepublic.

Mobile enheter representerer en betydelig og voksende del av all Internett-trafikk (15% i henhold til den siste Mary Meeker Internet Trends-rapporten). Å ha en mobil side er helt klart viktig, men det må også være raskt og funksjonelt for å kunne levere en best mulig og morsom brukeropplevelse som mulig.

Så, hva er noen av de vanligste ytelsesproblemene som bremser mobilnettsteder?

  1. Lager for mange HTTP-forespørsler. Tilkoblingstid og latenstid er to av de viktigste faktorene i ytelsen til mobile nettsteder og er direkte relatert til antall forespørsler. Når antallet HTTP-forespørsler som er laget for forskjellige komponenter (bilder, skript, stilark osv.) Øker, gjør det også tiden det tar for nettstedet å laste på en mobil enhet.
  2. Bildene er store og ikke optimalisert for skjermstørrelse på den besøkendes enhet. Større bilder betyr vanligvis større filstørrelser. Som et resultat vil mobilnettleseren ta mer tid å vise bilder ordentlig. Bilder skal serveres basert på besøkendes enhetstype, og skal være passende størrelse til den enhetens skjermstørrelse. Komprimering av bilder er naturlig viktig både for nettet og mobilen, spesielt når en mobil enhet bruker en 3G- eller 4G-mobilforbindelse.
  3. Omdirigeringer tar verdifull lastingstid. I følge Nicholas Zakaz fra Yahoo! Forbruker viderekoblinger 40% av tiden for å laste inn en side. Viderekoblinger på klientsiden som bruker JavaScript, er spesielt kostbare, siden mobilsiden først må gjengis på besøksens nettleser, og deretter omdirigere til den nye siden og lastes inn i nettleseren på nytt.
  4. Ekstern JavaScript hemmer ytelsen. Som Bryan McQuade fra Googles Page Speed-team har sagt, "ekstern JavaScript lastet inn tidlig i dokumentet (f.eks. I) er prestasjonsdrepere, og de er spesielt dyre på mobil på grunn av de høyere tur-retur tidene forbundet med mobilnett."
  5. Å laste hele siden tar tid og skaper en dårlig brukeropplevelse. Å laste hele siden på et mobilnettsted kan forbruke en betydelig mengde ekstra tid og øke antall forespørsler som gjør den totale brukeropplevelsen dårlig. Hvis du for eksempel har et bildegalleri på den nedre delen av en side og en smarttelefon besøkende ikke umiddelbart vil se galleriet på enheten sin, vil det fremdeles føre til at alt annet på siden lastes saktere som følge av hele siden lasting samtidig.

Det finnes en rekke gode fremgangsmåter for mobiloptimalisering for å håndtere hver av disse fem utfordringene og for å sikre at mobilnettstedet ditt lastes så raskt som mulig. Endelig mål bør være å laste inn den mobile versjonen av en side på ett sekund, da det er når besøkende begynner å miste oppmerksomheten til nettstedet ditt. For å komme i gang må du måle resultatene for mobilnettstedet og hoppe i listen over forslag nedenfor for å redusere responstiden for mobilen så nær ett sekund som mulig.

  1. Fjern HTTP-forespørsler. Dette er avgjørende for ytelsen til mobilnett, men hvordan fjerner du disse forespørslene uten å fjerne funksjoner og funksjonalitet? Bildesprittring er ett eksempel som fjerner individuelle HTTP-forespørsler som et resultat av å koble sammen bilder til ett bilde. Du kan gjøre det samme med stilark og JavaScript-filer, men forskning fra Google antyder at moderne nettlesere klarer seg bedre uten sammenfatning av CSS og JavaScript. En annen tilnærming er å fange inn små bilder, CSS eller JavaScript på HTML-siden. Uansett hvilken tilnærming du tar, anbefaler jeg A / B å teste disse optimaliseringene, da de vil ha forskjellig innvirkning på forskjellige sider, nettlesere og enheter. Deretter segmenterer du etter enhet og ser på effekten av testing av enheter og nettlesertyper på optimaliseringene dine for virkelig å fokusere på spesifikke ytelsesforbedringer for kjernesegmenter av publikum.
  2. Reduser bildestørrelse ved å komprimere bilder og sikre at du bruker det optimale nettformatet. Noen vanlige formater som vanligvis produserer små bildestørrelser er JPG, PNG og, i noen tilfeller, GIF. I tillegg støtter mobilversjoner av nettleserne Chrome og Firefox et nytt bildeformat kalt WebP som generelt har mye mindre filstørrelser.
  3. Bruk viderekoblingerserversiden for å gjøre sideendringer mer effektive for sluttbrukeren. Dette kan kreve endringer i URL-strukturen din, og bør diskuteres med internt IT-personell før det gjøres endringer.
  4. Minimer mengden ekstern JavaScript og tredjepartsskript på nettstedet ditt. Forsikre deg om at noe JavaScript-innhold lastes asynkront slik at nettleseren ikke blir blokkert fra å behandle annet statisk innhold. Hvis du har JavaScript som bare gjelder skrivebordsversjonen av nettstedet ditt på mobilsidene, må du huske å fjerne det.
  5. Last inn innhold som brukeren vil se "over brettet" med en gang. Last alt ekstra innhold til det trengs. For et bildegalleri kan du for eksempel være i stand til å laste inn gjeldende, forrige og neste bilder og deretter la-laste gjenværende bilder for å optimalisere ytelsen. I tillegg er det mange tilfeller der du kan bruke CSS3 i stedet for bilder.

Ta hensyn til disse beste praksisene når du optimaliserer mobilnettstedet ditt, og enda viktigere, A / B tester hver endring for å få en datadrevet forståelse av hva som fungerer for de besøkende. RUM-beregninger (Real User Monitoring) lar deg måle avgjørende tidsbasert informasjon, for eksempel hvor lang tid en besøkende blir værende på mobilsiden din.

Jeffrey Vocell er produktmarkedsføringssjef for SiteSpect, hvor han er ansvarlig for strategi og kommunikasjon av produktmeldinger. Før SiteSpect grunnla Vocell Trendslide, en oppstart av mobile forretningsanalyser. Han har en BS i Business Management and Leadership fra Daniel Webster College.

© Copyright 2021 | pepebotifarra.com