Com optimitzar el vostre lloc web per a usuaris mòbils?

Us heu assegurat que el vostre lloc és mòbil?


Sabíeu que Google va introduir una nova política anomenada Mobile-First? Més i més Els usuaris web s’allunyen dels ordinadors d’escriptori, i, en canvi, navegar i comprar amb els seus dispositius mòbils.

El disseny web responsiu ha permès crear llocs que funcionin a totes les plataformes a un nivell uniforme. Però, fins i tot, el disseny sensible és només una fracció d’estratègies d’optimització d’UX per a mòbils.

Si voleu una optimització real del rendiment, també haureu de tenir en compte altres alternatives.

És per això que fa un èmfasi tan important en la construcció del vostre lloc com a mòbil: primera experiència. En termes senzills, mobile-first significa que el vostre disseny i el contingut estan optimitzats per als usuaris de mòbils.

Dit això, aquest post no es tracta de dissenyar un lloc completament nou. En lloc d’això, anem a estudiar alguns principis fonamentals del disseny del primer mòbil. A més, dediqueu una bona estona a centrar-vos en aspectes tècnics per optimitzar l’experiència de l’usuari per als vostres usuaris mòbils.

# 1: Disseny amb mòbils

El web es basa fonamentalment en el principi de servei als usuaris d’escriptori. La web real, els veritables avenços en tecnologies, es mostra millor en una bonica pantalla a pantalla completa. Però, els telèfons intel·ligents i altres dispositius mòbils ja són cosa, i és hora de començar a adaptar-nos al concepte del disseny del primer mòbil.

A part del disseny sensible al sentit comú, quins altres elements de disseny heu d’implementar en els vostres dissenys web per a mòbils?

  • Priorització. Les pantalles mòbils estan limitades a l’espai de visualització disponible. A més, les pantalles mòbils presenten contingut de manera vertical enfront d’una estructura molt més àmplia – horitzontal per als ordinadors de sobretaula. Això significa que heu de dissenyar mitjançant la priorització. Quins elements tenen la màxima importància per veure els usuaris? Si hi ha botons CTA, què tan fàcil és visualitzar-los per a l’usuari mòbil?
  • Primer contingut. Color segon. Podeu fer algunes coses interessants amb el disseny per a mòbils, però certament no en l’àmbit del disseny d’escriptori. Per tant, deixeu pas al contingut primer. Feu que la vostra còpia i altres parts de contingut siguin fàcilment llegibles i accessibles. Una pantalla mòbil perdona molt menys la distracció d’elements visuals.
  • Fàcil navegació. En un dispositiu mòbil, no podeu simplement fer clic en qualsevol lloc i tornar a la pàgina principal. Tret que, per descomptat, tingueu previst aquest tipus de navegació abans d’hora. I hauria de. Experimenteu amb widgets de desplaçament a la part superior, però també capçaleres enganxoses perfectes sempre que sigui possible.

La millor manera de comprovar si esteu fent bé és fer servir el vostre propi telèfon (ho faig tot el temps!) I visitar el vostre lloc. Feu un examen minuciós de com se senten i flueixen les coses.

Si esteu asseguts en una cafeteria o espereu un vol en un aeroport, punxeu algú sobre una espatlla i demaneu-li educadament que us revisi el lloc. Després, asseieu-vos i escolteu els vostres comentaris. Moltes vegades us sorprendrà amb la manera com la gent percep l’experiència de l’usuari del vostre lloc web.

# 2: Optimització de recursos; imatges, icones, etc..

Amb quina freqüència us trobeu amb visuals per preferència personal i no per UX? És així i, si aneu a ser creatius, val la pena entendre el funcionament de l’optimització de suports.

Són elements visuals com fotografies, il·lustracions, icones i vídeos els majors consumidors d’amplada de banda a les pàgines web.

Temps de càrrega mitjana de la pàgina per al 2018 En què es compara el vostre MachMetrics Speed ​​BlogLa mida mitjana de la pàgina web el 2018. Llista per indústries i diferents països.

Tot i que no hi ha una mida de pàgina web que hagi de complir tothom, és clar que la mida de pàgina web més petita és igual a temps de càrrega més ràpids.

Per tant, com podeu retallar alguns KB addicionals o, fins i tot, MB, del contingut visual?

  • Redimensiona les teves imatges. Sembla senzill, oi? Bé, no puc tenir en compte quantes vegades he explorat un lloc per a mòbils només per carregar fons de 1980 x 1200 imatges al fons. En lloc d’això, s’han de proporcionar fotografies a mida completa, com a enllaços alternatius, quan correspongui. El redimensionament pot afaitar fins a un 80% de la mida total de la imatge, depenent de les dimensions necessàries. No obstant això, per als dispositius mòbils, mai hi ha cap raó per sobre de la gamma 600-700px.
  • Reduïu la mida del fitxer amb compressió. Compressió / optimització d’imatges és el procés d’utilitzar programari de tercers per reduir el nombre de colors presents en una imatge. Es pot fer fins a un punt que les fotos no perden la seva qualitat innata, però poden reduir dràsticament la mida del seu fitxer. Si necessiteu ajuda per comprimir imatges, no busqueu més que el nostre complet conjunt d’eines de compressió d’imatges.
  • Exploreu formats de fitxers alternatius. Tothom ha sentit a parlar dels formats d’arxiu PNG i JPEG. Al cap i a la fi, són els estàndards d’imatge de facto del web. Però, no fa gaire. L’última i més gran tecnologia d’entrega d’imatges digitals gira al voltant WebP i formats de fitxers SVG. Els SVG, per exemple, poden funcionar automàticament escala a la mida de la pantalla, reduint el nombre de recursos necessaris per carregar components visuals específics.

L’optimització de l’experiència de l’usuari per a mòbils en primer lloc és una cosa conscient. Dissenyar impuls, significa que no considereu els efectes a llarg termini de les vostres decisions. Si bé, un enfocament atent us ajuda a construir-vos amb els usuaris de telefonia mòbil des del principi.

Perspectiva: Seguint la línia del concepte de disseny mòbil intuïtiu, no heu de reutilitzar els mateixos components visuals dels dissenys de mòbils. L’eliminació d’algunes imatges de fons i la substitució per fons de color (al mòbil) no perjudicarà l’experiència de l’usuari. Sempre busqueu maneres d’estalviar fins i tot la menor quantitat d’ample de banda.

# 3: Càrrega prèvia i càrrega ràpida

És necessari carregar tots els recursos multimèdia en pàgines que triguen una quantitat important de temps a llegir? I, pot ajudar-vos a mostrar pàgines externes per davant dels usuaris que les visiten?

Vegem primer els precargadors, també coneguts consells del navegador.

Els precarcadors són maneres per a una pàgina d’informar al navegador les possibles oportunitats de navegació. Per exemple. Un usuari pot visitar la pàgina B de la pàgina A.

Amb la precàrrega, l’usuari pot presentar la pàgina B abans de fer clic a l’enllaç de navegació de la pàgina A.

Directiva de precàrrega

Tingueu en compte que la càrrega prèvia no sempre funciona i correspon al navegador prendre la decisió final. Factors com el tipus de dispositiu i l’amplada de banda es pesen individualment.

Quins són els tipus de precàrrega més habituals?

  • Esmorzar previ. Aquest tipus suggereix que és probable que un URL específic sigui la següent opció de navegació. I, si el navegador concedeix la sol·licitud, automàticament cauran recursos de pàgines importants, la qual cosa fa que la pàgina següent es carregui molt més ràpidament.
  • Predir. Mentre que el tipus anterior només obté certs recursos, la rendició cedirà tota la pàgina. Tot el contingut que es proporciona es guarda a la memòria del dispositiu dels usuaris.
  • DNS: prepagament. La configuració prèvia del DNS resoldrà el DNS especificat i res més. Com a resultat, si un usuari fa un “gir” específic al vostre lloc, us haureu d’afaitar fonamentalment el temps que triga a navegar..
  • Preconnexió. Igual que anteriorment, però també estableix connexions i cops de mà amb connexions TCP i TLS.

Quins són alguns exemples de codi per als precargadors?

Ja que els precarcadors utilitzen etiquetes HTML dinàmiques, podeu fer-ho carregueu prèviament contingut com els tipus de lletra de Google o creeu un script personalitzat per carregar prèviament els recursos de JavaScript a WordPress.

BTW, si feu servir WordPress, doncs Coet WP us pot ajudar a sobrecarregar el vostre lloc.

Ara que en sabeu més coses sobre les càrregues prèvies, parlem de l’altre tema temàtic: el carregat de mandra.

Què és la càrrega pereçosa?

Sempre que visiti una pàgina web nova, ja sigui una publicació de bloc o un lloc estàtic, el navegador recupera el contingut de la pàgina sencera i, a continuació, serveix com a experiència de navegació nativa. En la majoria dels casos, es veu obligat a descarregar tota la pàgina sense veure realment més enllà del damunt.

Si bé, amb una càrrega pereçosa, se li diu al navegador que carregui contingut (que es mostri) només dins de la visualització de l’usuari. Així, si hi ha fotos o vídeos sensibles a la mida a una pàgina determinada, aquests fitxers només es mostraran sempre que la pantalla del navegador arribi a la part del lloc..

I, si us preocupa els possibles problemes de SEO, no ho serà. Yoast ho ha confirmat Google fa que es mostrin les pàgines que utilitzen la càrrega, i ho veu com un altre senyal de millora de rendiment.

Layzr js

La meva recomanació per utilitzar una biblioteca és Layzr.js – carrega senzilla i eficaç per a les vostres imatges. El guió està activat a la pàgina principal del projecte, de manera que el podreu veure en temps real. Els usuaris de WordPress poden trobar desenes de plugins per carregar mandrosos al repo del complement públic.

# 4: Memòria cau web

La memòria cau web es basa en el concepte de còpia d’una versió d’una pàgina, que després es pot presentar a l’usuari en qualsevol moment. Les pàgines es mantenen en memòria cau a la primera visita a la pàgina d’un lloc web. Quan un usuari nou intenta accedir a aquesta pàgina, en lloc de servir la versió en directe, el servidor web mostrarà la versió memòria cau.

L’objectiu de qualsevol tipus de memòria cau és millorar el rendiment del lloc web i disminuir els recursos de fons necessaris. Segons la vostra solució de memòria cau, podeu configurar intervals personalitzats i altres esdeveniments basats en activadors.

memòria cau web

Alguns dels noms més populars de la memòria cau web són vernís, calamar i memcached. Però estigueu segurs que hi ha moltes altres solucions al mercat, sobretot si sou usuaris de WordPress.

També podeu considerar la inscripció a un CDN.

Què és un CDN (Xarxa de lliurament de contingut)?

Una xarxa de lliurament de contingut utilitza un clúster global de servidors distribuïts per proporcionar un lliurament de contingut increïblement ràpid. A CDN pot transferir ràpidament tots els tipus de contingut populars al web: vídeo, foto, JavaScript, etc. Actualment, la major part del trànsit de les webs passa per algun tipus de CDN..

L’única cosa a recordar sobre les xarxes d’entrega de contingut és que funcionen millor quan s’utilitzen en un lloc web d’alta demanda. Per tant, si només serviu uns quants milers de visitants al mes, és possible que es mostrin millores notables. No obstant això, un CDN és una solució ideal per millorar els temps de càrrega del vostre lloc web, reduir el cost de l’amplada de banda, augmentar la disponibilitat de contingut i reforçar la seguretat general..

Si no teniu experiència prèvia amb CDN, us recomanem que ho proveu Flama de núvols : Proporcionen un pla de sempre, i és una excel·lent plataforma per començar a aprendre. I si Cloudflare no compleix les vostres expectatives, consulteu la nostra publicació per als millors proveïdors de CDN gratuïts del mercat..

# 5: AMP (pàgines mòbils accelerades)

Google és Projecte AMP optimitza mòbils en esteroides Essencialment, AMP redueix les vostres pàgines fins que es mostren imprescindibles per proporcionar una experiència de càrrega super ràpida, però també per fer que la llegibilitat del contingut sigui una prioritat. Tenint en compte la importància de la velocitat de la pàgina, es pot agafar el coratge de dir no als temps de càrrega gairebé instantània?

Google AMP (pàgines mòbils accelerades)

D’acord, tots aquests buzzwords sonen excel·lents, però com funciona AMP?

AMP és una pàgina HTML desplegada amb certes limitacions del tipus de contingut que es pot visualitzar. Això comporta temps de càrrega molt més ràpids i un rendiment global a causa de la limitació per a executar scripts i altres.

JavaScript, per exemple, no funciona amb AMP. Si no és, per descomptat, que utilitzeu Biblioteca AMP JS disponible a GitHub. Si feu servir la biblioteca JS us permeten obtenir determinats resultats, com evitar els bloquejadors d’anuncis, però si voleu un rendiment real, aleshores l’AMP brut és el camí a seguir..

AMP per exemple

Si sou un usuari de WordPress, en la majoria dels casos afegint AMP al vostre bloc es farà amb l’ajuda d’un complement. Però, si treballeu amb un lloc personalitzat, afegir AMP per primera vegada pot resultar una mica difícil..

Apreneu AMP per exemple

Aquí és on AMP per exemple és útil. Un projecte lateral a la plataforma real, aquest lloc detalla tots els racons i ganxos possibles per aconseguir amb AMP. Cada component i efecte inclou una demostració proporcionada perquè pugueu veure com es veuria.

Estudis de cas interessants per AMP:

  1. Terra impulsa la visualització mòbil amb AMP
  2. Times of India reporta una rendibilitat d’1,5X ingressos més
  3. Fastcommerce impulsa les conversions dels clients mitjançant la creació de AMP-first

# 6: Prova abans de fer el compromís

En aquests moments i èpoques, no hi ha excusa per no tenir un entorn d’escenificació diferent per al vostre projecte. La majoria de plataformes d’allotjament en núvol ofereixen entorns d’escenificació de manera predeterminada, així que comproveu amb el proveïdor per veure si en teniu accés.

abans de realitzar la prova

Què és un entorn d’escenificació?

Bé, la manera més ràpida d’explicar-ho és consultant el vostre lloc web en directe actual.

Aquest lloc és el que anomeneu lloc de producció: una versió en temps real de tots els codis, scripts i contingut en què es basa el vostre lloc. Un entorn d’escenificació en aquest context és una còpia del lloc de producció. Un lloc maniquí si ho voleu. I en aquest entorn de posada en escena, podreu fer canvis o afegir noves funcions sense haver de trencar el vostre lloc en directe.

Sempre penso en la publicació d’Ashley Harpp, No perdis el temps: prova els canvis abans de comptar.

El fet que ens expliqui com ens “enganyem” per evitar certes coses és un exemple principal de com no volem assumir la responsabilitat quan cometem un error. No obstant això, la publicació d’Ashley també inclou enllaços a eines útils per configurar un entorn d’escenificació local.

La prova no és tan espantosa com sembla. Però segur que heck fa por quan suprimeix accidentalment tota la base de dades d’un servidor de producció!

Declaració de cloenda

No és tan difícil fer una optimització del vostre lloc web per a una experiència mòbil fluida. Tot el que necessiteu és una mica de determinació i apliqueu els mètodes descrits en aquesta publicació. El possible és que ja coneixeu coses com la memòria cau de contingut i la càrrega de mandra, però, però, els entorns o els precargadors?

Amb sort, aquesta publicació ha aportat una mica de llum sobre l’estat actual d’optimització de llocs web mòbils. No dubteu a deixar un comentari o recomanar-vos solucions addicionals.

Tags:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map