Krypton Solid

La última tecnología en raciones de 5 minutos

Cómo acelerar los sitios web receptivos

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.

Deja un comentario

También te puede interesar...

Opera nombra un nuevo director ejecutivo

La empresa noruega de navegadores Opera ha nombrado a un nuevo director ejecutivo, Lars Boilesen, para reemplazar a Jon von Tetzchner, quien dejará el cargo. Boilesen [pictured] el martes asumió oficialmente el cargo de director

Respuesta del lector: DSL y cable pierden ambos

*** El lector ZDNN responde a la historia Por qué DSL ganará la batalla del acceso de banda ancha *** DSL no ganará. El cable tampoco ganará. Ambos tienen sus ventajas y desventajas. Pero nadie

MyDoom falla con corporaciones, gobierno: AusCERT

El gusano de Internet MyDoom ha tenido un efecto insignificante en las redes corporativas y gubernamentales de Australia, según la agencia de ciberseguridad de Queensland. AusCERT. A pesar del bombo publicitario, el «envío masivo» de

Definición del método del saldo pendiente

¿Qué es el método de saldo pendiente? El método del saldo pendiente es un método para calcular el interés de un préstamo. Según el método del saldo pendiente, se otorga al prestatario un período de

Definición de put desnudo

¿Qué es una put desnuda? Una put desnuda es una estrategia de opciones en la que el inversor suscribe o vende opciones de venta sin tener una posición corta en el título base. Una estrategia

5 ejemplos de analítica aumentada en la empresa

A medida que los proveedores de análisis e inteligencia empresarial buscan impulsar la usabilidad de sus plataformas, están agregando cada vez más análisis aumentados a su combinación de productos y funciones. Como tal, los ejemplos

Mi Mac mini – Pensamientos iniciales

Hemos tenido la Mac mini en PC Doc durante casi una semana y, aunque el sistema no está completamente integrado en el ecosistema, no se le ha permitido acumular polvo. Entonces, con una semana en

Adobe Engage: Alex Bard – yourminis

Una de mis empresas favoritas, tusminis Aquí es donde le mostramos cómo usar Apollo para implementar widgets en su escritorio. Nos lleva a un recorrido rápido por la página de inicio y cómo encontrar widgets.

Protección de correo electrónico | Cloudflare

El sitio web desde el que llegó a esta página está protegido por Cloudflare. Las direcciones de correo electrónico de esa página se han ocultado para evitar que bots malintencionados accedan a ellas. Debe habilitar

Cómo cambiar de cuenta en iPhone

Ha creado una nueva ID de Apple, le gustaría usar la suya propia iPhone en lugar del que tienes configurado actualmente en tu teléfono, pero no sabes cómo hacerlo? Ha creado una nueva dirección de

Definición de Revolving Underwriting Facility (RUF).

¿Qué es un mecanismo de suscripción renovable (RUF)? Una facilidad de suscripción renovable (RUF) es una forma de crédito renovable en la que un grupo de suscriptores acuerda prestar si un prestatario no puede vender

Wal-Mart vs. Objetivo: ¿Cuál es la diferencia?

Wal-Mart vs. Modelo de negocio objetivo: una descripción general Cuando se trata de tiendas de descuento, Walmart (NYSE: WMT) continúa dominando el mercado con su tamaño. Pero su principal competidor, Target (NYSE: TGT), ganó participación

Informe del WGIG, segunda parte

Esta es la segunda parte de una publicación que comenzó ayer. (Ver «WGIG debería adoptar el inglés. «) Es una respuesta a un informe publicado recientemente por el Grupo de Trabajo sobre Gobernanza de Internet

Índice de desafío DBIR de Verizon n. ° 2

El desafío del Informe de investigaciones de violación de datos de Verizon (DBIR) de este año es bien y De Verdad en marcha. Veo dónde están los competidores (públicos). confundido así que aquí hay una