Cómo acelerar los sitios web receptivos
El diseño web receptivo ya es la palabra de moda de la década, y es ideal para el mundo conectado de múltiples pantallas en el que vivimos. Sin embargo, la compensación de esto está en el rendimiento debido a los tamaños de archivo más grandes.
Esto ha llevado a algunos expertos a decir que, al igual que en los primeros días de Flash, el diseño receptivo es algo por lo que todos podríamos estar entusiasmados sin una buena razón. Sin embargo, aunque en este momento existen problemas de rendimiento, estos se pueden superar hasta cierto punto con algunos pequeños ajustes, compresión y cambio de tamaño de la imagen.
Por qué el diseño receptivo puede funcionar lentamente
El diseño receptivo carga todos los mismos elementos HTML para cada dispositivo, incluidos los destinados a la entrega de tabletas y computadoras de escritorio. Esto significa que a menudo se entrega todo el contenido, incluidas las imágenes y los scripts, sin importar en qué dispositivo se esté viendo.
Un estudio llevado a cabo el año pasado mostró que el 86% de los sitios receptivos actualmente en línea entregan una página de escritorio completa a los dispositivos móviles. Esta es claramente una tendencia a la técnica de diseño que debe abordarse, si queremos detener el progreso de las páginas web infladas en su camino.
En este momento, el diseño receptivo está aumentando el tamaño de las páginas y esta es la tendencia que debe abordarse, especialmente si se considera que el 57% de los usuarios de dispositivos móviles se irán si el sitio no se carga. en 3 segundos.
¿Cómo se puede mejorar el rendimiento?
Para aquellos que ya tienen un diseño en su lugar y quieren optimizar ahora, Mobitest se puede utilizar para medir el desempeño con el fin de continuar y abordarlo. Por supuesto, al planificar un diseño, la optimización será más sencilla de llevar a cabo en esta etapa y el rendimiento siempre debe considerarse una parte esencial del diseño, en lugar de una ocurrencia tardía.
Para mejorar el rendimiento, es necesario reducir el tamaño de las páginas y los recursos cargados con él. Esto puede llevarse a cabo utilizando varias técnicas, sin alterar seriamente la apariencia del sitio.
Lo primero que hay que considerar es cómo asegurarse de que solo los recursos necesarios se envíen al dispositivo de destino. Esto se puede hacer minimizando el número de solicitudes HTTP, de modo que el usuario pase menos tiempo esperando que se cargue el DOM. Esto, a su vez, se puede hacer comprimiendo los recursos CSS y Javascript, para lo cual herramientas como Brújula – se puede utilizar un marco de creación CSS de código abierto. Esto permite a los desarrolladores crear marcas más limpias y crear sprites y extensiones con un mínimo de problemas.
Con respecto a JavaScript, herramientas como UglifyJS se puede utilizar, que comprime el código.
Carga condicional
Esto puede considerarse una técnica importante cuando se trata de diseño receptivo, ya que puede usarse para asegurarse de que los usuarios de teléfonos móviles y teléfonos inteligentes no descarguen los aspectos del sitio que lo ralentizan o que no usarán.
La carga condicional se puede utilizar para detener la carga de todo tipo de contenido, incluidos widgets sociales, imágenes, mapas y mucho más. Es importante tener en cuenta en este punto que el sitio debe probarse a fondo en cada etapa de optimización para que sea fácil ver qué ha marcado la diferencia a medida que avanza.
Imagenes
Todos sabemos que las imágenes suelen ser las responsables de ocupar la mayor cantidad de kilobytes en una página web. También es seguro decir que las imágenes diseñadas para un navegador de escritorio tendrán un rendimiento inferior cuando se envíen a un dispositivo móvil.
Si un sitio también tiene mucho contenido heredado, esto afectará aún más el rendimiento y es necesario implementar alguna forma de evitar que este contenido se cargue. Si bien esto se puede hacer modificando el marcado cambiando los elementos src o img, la solución PHP Imágenes adaptables probablemente sea más fácil. El software detecta el tamaño de la pantalla y crea, almacena en caché y entrega automáticamente las imágenes HTML incrustadas y reducidas, sin la necesidad de cambiar el marcado. Para ser utilizado junto con las técnicas de imagen fluida, es una solución práctica y que ahorrará mucho tiempo. Adaptive Images utiliza un archivo htaccess, un archivo php y una sola línea de Javascript para determinar el tamaño de pantalla de los visitantes del sitio.
Texto
También vale la pena pensar en el texto, ya que se ajustará de forma natural cuando el dispositivo se reduzca y podría causar problemas de visualización. FitText es una herramienta que puede ayudar a abordar esto, un complemento de jQuery que actualiza automáticamente el tamaño de la fuente, con opciones para los tamaños mínimo y máximo que se permitirán.
Esto es ideal para titulares que pueden mostrarse mal en un dispositivo móvil y permite ignorar el tamaño de fuente especificado en CSS3. Sin embargo, FitText solo está diseñado para titulares y no debe usarse dentro del texto de un párrafo.
¿Por qué elegir diseñar con capacidad de respuesta?
Si bien el diseño receptivo tiene sus problemas, al igual que cualquier tecnología o técnica relativamente nueva, aún vale la pena elegir construir un sitio de esta manera. Nadie quiere retroceder y, si bien puede ser más fácil crear un sitio web móvil, es mucho mejor ser lo más innovador posible.
Google está de acuerdo, su consejo es utilizar el diseño receptivo como la mejor manera de diseñar para dispositivos móviles. Por supuesto, para los gigantes de la búsqueda, esto significa que solo tienen una URL para rastrear, en lugar de numerosas URL para lo que es esencialmente el mismo sitio, por lo que realmente les interesa.
Sin embargo, en esta época de manía por compartir en redes sociales, también tiene sentido, ya que los usuarios de dispositivos móviles pueden compartir una página con alguien que utilice un escritorio. Para crear una experiencia uniforme, esto debería ofrecer el mismo contenido.
Además de eso, tener un sitio receptivo mejora la productividad en la fuerza laboral, ya que esencialmente hay mucho menos que hacer. Esto se aplica al contenido, las actualizaciones y el SEO, ya que deberá llevarse a cabo por separado si se construyen diferentes sitios.
Las figuras
Los dispositivos móviles y las tabletas se están convirtiendo en la norma para conectarse a Internet y navegar en esta era, casi posterior a la PC. Las ventas de tabletas en todo el mundo se han disparado en solo un año, más del doble en ese tiempo y con muchos consumidores que ahora eligen diferentes dispositivos con Android, así como con iOS.
No hay duda de que hasta ahora el diseño receptivo está teniendo un impacto positivo, a pesar de las preocupaciones sobre el rendimiento. Según un informe, que preguntó a algunas de las principales marcas del mundo cómo el tener un sitio receptivo había afectado el tráfico, las visitas en todos los dispositivos aumentaron considerablemente.
Esto incluyó un aumento promedio del 23% por parte de los visitantes móviles, así como una tasa de rebote reducida del 26%, y los visitantes pasaron alrededor de un 7.5% más de tiempo en los sitios de lo que se veía anteriormente.
O’Neill, el minorista de ropa de surf de moda, informa una tasa de conversión que es un 65,7% más alta en iPad y iPhone como resultado del desarrollo de un sitio receptivo. Esto representó un crecimiento de los ingresos del 101,2% solo en estos dispositivos.
Con respecto a los dispositivos Android, la tasa de conversión fue aún mejor, con un enorme 407,3%, lo que representa un enorme crecimiento de ingresos del 591,4%. Se observó una tasa de conversión menor en dispositivos no móviles, aunque aún se observó un crecimiento.
Esta es solo una de las marcas que publican sus cifras y es bastante difícil obtener los datos de otras personas en este momento, al igual que lo fue con el impacto de las redes sociales hace un par de años. Sin embargo, sirve para demostrar que los beneficios de diseñar un sitio web receptivo pueden ser sustanciales.
Teniendo esto en cuenta, ¿qué otra razón necesita cualquier diseñador para comenzar a diseñar de manera receptiva para sus clientes y tratar de asegurarse de que se desempeñen lo mejor posible? No hay uno, y aquellos diseñadores que no quieran tomarse la molestia de aprender a diseñar, construir y optimizar un sitio utilizando técnicas de respuesta pueden quedarse en el polvo.
El 67% de los usuarios dicen que han comprado a través de un sitio móvil y se cree que el uso de Internet móvil superará al de las computadoras de escritorio el próximo año. Teniendo todo esto en cuenta, es fácil ver por qué las empresas se interesarán cada vez más en las mejores soluciones web móviles que pueden ofrecer.
El diseño receptivo puede estar todavía en su infancia en este momento, pero parece claro que la demanda del mercado lo hará crecer rápidamente, por lo que vale la pena aprender tantos aspectos de la disciplina como sea posible ahora.
¿Qué técnicas ha utilizado para optimizar los sitios receptivos? ¿La entrega de contenido alternativo anula los beneficios del diseño receptivo? Háznoslo saber en los comentarios.
