Tip:
Highlight text to annotate it
X
Hola.
Soy Maile Ohye,
trabajo en Google como directora técnica de desarrollo de programas,
en el equipo de asistencia para webmasters.
Este vídeo trata sobre cómo encontrar soluciones rápidas
que tú o un miembro del equipo técnico
podéis implementar fácilmente para mejorar el rendimiento
de tu sitio para móviles.
Pero antes de entrar en materia,
consultemos las estadísticas.
Es obvio que el rendimiento puede influir en las ganancias.
En un experimento dirigido por Strangeloop,
se añadió un segundo de latencia adicional
a páginas publicadas en smartphones.
Con un retraso de tan solo un segundo
se detectó una disminución del 9% en páginas vistas,
un aumento del 8% en el porcentaje de rebotes
y una disminución del 3,5% en conversiones.
Y lo que es peor, incluso después de terminar el experimento,
los compradores se mostraron
menos inclinados a volver a visitar el sitio.
Así pues, ¿cuál es la relación entre el estado de los usuarios
y la velocidad de las páginas para móviles?
Los estudios demuestran que el límite de atención de los usuarios
es de un segundo,
mientras que hoy, el tiempo medio de carga de una página
en un móvil es de siete segundos.
Esto significa que tenemos seis segundos más
para probar otro sitio web y olvidar
totalmente la tarea que teníamos entre manos o incluso experimentar frustración.
Voy a explicar por qué
la Web en el móvil es más lenta que en los ordenadores.
Podemos comparar el potencial de latencia de los móviles con el de los ordenadores.
Imaginemos que el usuario de un ordenador realiza una búsqueda
en google.com.
Una vez realizada la consulta, la totalidad de procesos que van desde
la conexión del navegador del usuario a Google, pasando por
el procesamiento de la consulta por los servidores de Google hasta la obtención
de los resultados ofrecidos por Google y su visualización en el navegador del
ordenador, puede durar menos de medio segundo.
De hecho, este es el rendimiento
al que la mayoría de nosotros estamos acostumbrados.
En los smartphones, en cambio, realizar este proceso completo
en menos de medio segundo es prácticamente imposible.
Por eso, cuando un usuario hace
una consulta en su smartphone,
el cliente tiene que conectarse a la red de telefonía móvil
para poder conectarse al servidor.
Las redes de telefonía móvil están configuradas de tal forma
que tanto en 3G como en 4G, un smartphone
tarda un mínimo de medio segundo para conectarse
a un servidor como Google.
Una vez transcurrido este medio segundo para conectarse al servidor,
todavía hay que esperar que Google procese la consulta, ofrezca los resultados
y que el smartphone procese la página.
La conclusión de todo esto es que los visitantes potenciales en un smartphone
deberán esperar medio segundo como mínimo
solo para conectarse al servidor.
Alrededor de 0,6 segundos más tarde, una vez transcurrido
más de un segundo, puede ser que el visitante
ya se haya distraído.
Vamos a ver cómo podemos acelerar este proceso.
En este vídeo, presentaré ideas para utilizar Google Analytics
con el sitio de comercio electrónico Google Store,
en www.googlestore.com.
Empecemos por crear un segmento de tráfico en móviles en
Google Analytics.
Empecemos con la opción "Crear nuevo segmento".
El mes pasado, mis compañeros del equipo de Page Speed
presentaron una nueva función en Google Analytics: "Velocidad del sitio".
Vayamos a "Tiempos de página de velocidad del sitio".
Con el segmento filtrado por "Tráfico desde móviles",
selecciona la pestaña "Distribución".
Aquí podremos ver con detalle
el rendimiento de un sitio.
Podemos ver que el tiempo medio de carga de una página
de Google Store en el móvil
es superior a seis segundos.
También detectamos que el 46% de las páginas del sitio
tardan de tres a siete segundos en cargarse en el móvil.
La buena noticia es que tenemos un gran margen para mejorar.
Sin movernos de "Tiempos de página de velocidad del sitio",
haz clic en la pestaña "Explorador".
En esta página, con la ordenación predeterminada de páginas vistas,
que muestra las páginas más visitadas de nuestro sitio,
se puede ver la velocidad relativa de cada página.
Resulta que mi tercera página más popular, la de categorías
de YouTube, donde se venden artículos como botellas de agua e imanes
de YouTube, es particularmente lenta, un 350% más lenta
que la media de mis páginas en móviles, que, como hemos visto anteriormente,
ya no eran demasiado rápidas.
Podemos utilizar esta función para hacer una lista de las páginas lentas populares
que queremos examinar.
Ahora vayamos a las sugerencias relacionadas con la velocidad del sitio
para ver qué mejoras podemos hacer.
Vemos que para la página de YouTube
hay nueve sugerencias relacionadas con la velocidad de la página.
Al hacer clic en las sugerencias, se abre una ventana nueva con información
sobre la velocidad de las páginas.
Es como asistir a la corrección de tu examen en directo.
Una vez finalizado el análisis, echa un vistazo al rendimiento en móviles.
Como era de esperar, la página de YouTube
obtiene un 55 sobre 100 con respecto a las prácticas
recomendadas de rendimiento.
Esto equivale a una F. Puesto que este vídeo tiene como finalidad
mejorar rápidamente el rendimiento en móviles,
nos centraremos en las sugerencias más sencillas con un signo de
exclamación rojo.
Algunas de estas sugerencias te pueden resultar familiares y otras no tanto.
Puedes obtener más información sobre cada una de ellas.
Me gustaría que quedara claro
lo fácil y rentable que es
implementar estas sugerencias para mejorar el rendimiento.
He creado una tabla formada por dos páginas
en la que se detallan sugerencias sencillas para mejorar el rendimiento
y se proporciona contexto para las más difíciles.
Puedes poner el vídeo en pausa si necesitas más tiempo.
En la parte superior de la tabla se muestran las sugerencias sencillas
que un desarrollador o
una persona con habilidades técnicas pueden implementar en pocas horas.
Primero hay que habilitar la compresión.
Habilitar la compresión consiste en comprimir los recursos.
De este modo hay que transferir menos datos entre el servidor web
y el cliente.
Solo hay que modificar la configuración del archivo de configuración
del servidor.
Reducir el tamaño de los recursos es muy fácil
gracias a las herramientas disponibles para todos los usuarios.
El uso de secuencias de comandos asíncronas consiste en
copiar y pegar fragmentos de
código nuevo para reemplazar las versiones anteriores.
Para aprovechar el almacenamiento en caché del navegador, solo hay que
añadir las cabeceras HTTP adecuadas a los recursos.
La última sugerencia de mejora de la velocidad bastante sencilla
es evitar las redirecciones de las páginas de destino.
Si las páginas forman parte de una cadena de redirección,
hay que corregir la URL de origen para que vaya directamente
al elemento orientado y no a páginas intermedias.
Podemos ver lo útil que es corregir redirecciones extrañas
si observamos la latencia de un smartphone.
Cada redireccionamiento requiere que el usuario del móvil
espere un mínimo de medio segundo más para que la página se cargue.
Ahora volvamos a otra recomendación sencilla:
habilitar la compresión es tan fácil como copiar código
en un archivo de configuración del servidor.
Existen archivos de configuración maestros de código abierto
que se pueden consultar, por ejemplo, para copiar
la configuración de rendimiento y de seguridad adecuada
para el servidor.
Las sugerencias de mejora de la segunda página de la tabla
son más difíciles de implementar.
Muchas de ellas no se pueden
llevar a cabo en pocas horas,
ya que requieren una mayor reflexión y la mejora de los procesos.
Aun así, me gustaría hablar
de la recomendación para optimizar las imágenes.
La optimización de imágenes comprende un buen número de
mejoras que van desde la compresión sin pérdidas
hasta la creación y el recorte de imágenes destinadas
a tu sitio para móviles.
El proceso de optimización de las imágenes no es tan sencillo
como el de otras sugerencias para mejorar la velocidad
descritas en la página anterior,
pero puede tener un mayor impacto.
Las imágenes constituyen el 65% de los datos de la Web para móviles.
La optimización de estos recursos puede reducir el tiempo de descarga
y, en última instancia, las páginas se pueden cargar más rápidamente.
La conclusión de todo esto
es que si tienes una página para móviles con mucho tráfico
y sugerencias de mejora de la velocidad con un signo de exclamación rojo y de poca
dificultad, es interesante que hagas las correcciones
para tus visitantes y para tu negocio.
Si quieres otra fuente de inspiración,
consulta WebPageTest.org.
Con Web Page Test podemos entrar en una página,
como la página de categorías de YouTube, y analizar su velocidad.
Selecciona un user-agent móvil, como un smartphone iPhone
o Android.
Cuando el análisis de la página lenta finalice,
podremos ver dónde está el problema.
He analizado esta página con mi compañero, Ilya Grigorik,
que se dedica principalmente a tratar el rendimiento.
Su sentencia ha sido clara:
"Esta cascada no me gusta nada".
La cascada representa visualmente
el motivo por el que el tiempo de carga de la página supera los 15 segundos.
Las barras azules representan las descargas de contenidos
necesarias para cargar la página.
Para que la página se empiece a procesar,
tienen que pasar casi siete segundos.
Con este rendimiento, se pretende que un comprador
de YouTube espere siete segundos en el sitio
hasta recibir una primera respuesta visual y
más de 15 segundos para que la página se cargue completamente.
Si aún no te has decidido a hacer
estas mejoras rápidas,
ten en cuenta que de acuerdo con "Qué esperan los usuarios
de los sitios para móviles hoy", el 61% de los usuarios
afirmó que si no encontraba lo que buscaba
de inmediato en un sitio móvil, pasaba
rápidamente a otro sitio.
Es por eso que puede ser divertido comparar las informaciones sobre la velocidad
de tu página y la de una página equivalente de la competencia.
Yo he practicado deportes toda mi vida
y soy la pequeña de tres hermanos,
por lo que me resulta especialmente motivador mejorar
si la competencia lo hace mejor que yo.
Además, con Web Page Test puedes descargar una vista de cinta de película
con el procesamiento de la página para móviles.
Puedes comparar tu cinta de película sobre procesamiento
con las páginas de otros sitios del sector.
Me gustaría terminar haciendo hincapié en unos recursos excepcionales:
la función de velocidad del sitio, con herramientas como artículos e informaciones
sobre la velocidad de las páginas.
También hay vídeos muy buenos creados por Ilya
y los miembros del equipo de Page Speed.
Y, por último, no olvides visitar WebPageTest.org.
Gracias por ver el vídeo.