Velocidad de Página 101: Una Base para Diseñadores UI Mobile

¿Sabías que 40% de las personas abandonará una página web si tarda más de tres segundos en cargarse? A medida que el diseño web responsivo se ha hecho popular, los usuarios de Internet han llegado a esperar un rendimiento excepcional. Ellos quieren que los sitios se adapten perfectamente al dispositivo que están usando, quieren una navegación sencilla y un diseño intuitivo, y quieren que la velocidad de carga de la página sea inferior a un segundo. Esa es una barra alta para golpear, pero con las optimizaciones adecuadas en su lugar, cualquier diseñador puede dar a sus interfaces móviles velocidad de la página rápida.

Recientemente he explorado la web y buscando cada última extremidad y truco para optimizar la velocidad de un sitio web a través de diversas plataformas. Aquí está mi lista completa de hacks de velocidad de página:

1. Re-escalar Imágenes

Las imágenes que son más grandes de lo que necesitan pueden estar colaborando a reducir la velocidad de tu sitio. En lugar de simplemente cargar imágenes de tamaño completo y dejar que su sitio web reducirlos al tamaño adecuado, comienza con las dimensiones correctas. Software simple como compresión de imagen de Squash se puede utilizar para cambiar el tamaño de las imágenes a las dimensiones exactas de su página y reducir su tamaño de archivo en cuestión de segundos.

2. Limita Funcionalidad

Habilitar la carga restrictiva en tu sitio para dispositivos móviles evita que partes de su sitio de escritorio que no puedan utilizarse eficazmente en un dispositivo móvil se carguen en absoluto. Esto puede hacer que el usuario experimente mejor al tiempo que ayuda a que tus páginas se carguen mucho más rápidamente. Por lo tanto, al optimizar tu sitio para dispositivos móviles, piensa en características que puedas desactivar en tu sitio web. Cosas como barras laterales, anuncios, etc, todos pueden ser deshabilitados. Para móviles, enfócate en la funcionalidad más importante.

3. Reduce el Contenido

A menudo es una buena idea establecer un presupuesto de rendimiento. Si la adición de una nueva imagen o video o plugin le colocará en exceso de tu presupuesto de rendimiento, busca otro contenido que se puedas quitar u optimizar para ayudar a que tus páginas conserven las velocidades máximas de carga.

4. Limita las Solicitudes de HTTP

Hay un montón de maneras de lograr esto, pero tomar el enfoque equivocado podría comprometer la calidad de tu sitio. El truco es reducir las solicitudes HTTP sin irse por la borda. Puedes realizar cambios como utilizar sprites CSS en lugar de URI de datos y mantener la hoja de estilo CSS en la parte superior de cada página. También debes habilitar el almacenamiento en caché, pero más adelante.

5. Elige un Diseño Responsive

Diseños Responsives son algo que se da por sentado por los visitantes de su sitio. Ellos permiten que tu contenido se ajuste para adaptarse a cualquier tamaño de pantalla que el visitante esté utilizando y optimizar el diseño de los diferentes dispositivos. El uso de una plantilla de diseño responsive ayuda a asegurar un código más limpio y mejores velocidades de carga que tratar de hacer un trabajo de [diseño] (https://www.toptal.com/designers/ui) no adecuado en diferentes plataformas.

6. Usa un a Gran CDN

Your content delivery network (CDN) is at the heart of your website. It needs to be fast and reliable. Make sure that your CDN is delivering on its promises.

7. Reducir el Tiempo de Respuesta del Servidor

Tu objetivo debe ser obtener el tiempo de respuesta del servidor en menos de 200 milisegundos. Todos los demás consejos de esta lista deberían ayudarte a bajar este número. Puedes supervisar tu tiempo de respuesta y buscar problemas potenciales mediante el uso de cualquier número de herramientas de comprobación de respuesta gratuitas, todas las cuales se pueden encontrar con una simple búsqueda en Google.

8. Comprimir Todo

Comprimir tus páginas web es como encogerlas en un archivo zip. La compresión te permite reducir el ancho de banda de tus páginas, lo que reduce el número de solicitudes HTTP. La forma más sencilla de hacerlo es con una herramienta conocida como Gzip.

9. Habilitar el Almacenamiento en Caché del Navegador

El almacenamiento en caché es una forma para que los visitantes de tu sitio “recuerden” dicho sitio en sus dispositivos. La primera vez que visitan, tendrán que descargar hasta 30 componentes para ver tu sitio. Una vez habilitada la caché, ese número se reduce a unos pocos componentes en las visitas posteriores, mejorando drásticamente la velocidad de carga de la página.

10. Mejoras Visuales

Esto no se traducirá en una mayor velocidad de carga de la página, pero dará la impresión de que lo hace. Facebook y Medio hace un buen trabajo con esto mediante la creación de contenido de marcador de posición visual en lugar de mostrar los cargadores de hilado (que podría percibirse negativamente).

Medium lo hace con imágenes.

Facebook carga contenido de marcador de posición falso en lugar de mostrar hiladoras de carga.

• 
• 
• 

11. Organiza tus Recursos

Cualquier código que no agregue algo significativo a tu sitio web debe eliminarse. El código extra significa tiempo extra para cargar tu sitio. Para minimizar el código HTML, utiliza la extensión de Chrome Insights de PageSpeed. Para minimizar tu CSS, usa YUI Compressor o [cssmin.js] (http://www.phpied.com/cssmin-js/). Para minimizar el uso de JavaScript, utiliza Closure Compiler, JSMin o el YUI Compressor.

12. Coloca un Formato Apropiado para tus Imágenes

Además de hacer que tus imágenes tengan el tamaño adecuado, también debes asegurarse de que están en el formato correcto. Los JPEGs son los mejores, PNG son aceptables, y los GIFs se deben utilizar solamente para los gráficos pequeños, simples, idealmente menos de 10x10 pixeles.

13. Codifica Imágenes de forma Apropiada

Para el código, el código HTML de tus imágenes debería tener el aspecto de <img src =" ">, con el nombre del archivo entre comillas. Si tus imágenes no están codificadas correctamente, tu sitio tendrá que trabajar más duro para recuperar las imágenes correctas, ralentizando la velocidad de tu página.

14. Usa CSS Externo

Su CSS contiene los requisitos de estilo de su sitio. Puede estar contenido en un archivo externo o en línea. CSS en línea se inserta en su código HTML en cada página, lo que puede causar retrasos graves. El uso de CSS externo simplifica en cambio su código sustancialmente.

15. Prioritiza Contenido Sobre el Doblez (Above The Fold)

La parte de la página de destino que los visitantes ven sin hacer ningún desplazamiento se denomina el contenido anterior. Este es un término antiguo del periódico, pero se aplica bien al sitio web diseño. Priorizar el contenido del sitio por encima de la carga para que se cargue más rápido ayudará a mantener a los visitantes en tu sitio por más tiempo. Una forma de hacerlo es dividir tu CSS en dos partes, una parte en línea para el contenido por encima del doble y una parte externa para todo lo demás.

16. Borra Plugins

Usar demasiados complementos puede ralentizar la velocidad del servidor y crear problemas de seguridad innecesarios. Deshazte de los complementos que no esté utilizando y prueba desactivando los complementos uno a uno para ver si algún complemento en particular está causando grandes problemas con la velocidad de carga.

17. Reduce Redirecciones

Si tu sitio se basa en redirecciones para llevar a los usuarios de tu sitio principal a tu sitio para móviles, podrías ralentizar la velocidad de tu sitio web. Puedes utilizar una redirección HTTP para ayudar a reducir los redireccionamientos intermedios desde su sitio principal a su sitio para dispositivos móviles. También puedes incluir ` markup en sus páginas de escritorio para que los rastreadores de Google descubran sus páginas de móviles.

18. Evita Popups

Popups siguen siendo una cosa popular y supongo que funcionan ya que muchos sitios todavía los utilizan. Todavía puedes integrarlos en tu sitio web, pero en sitios móviles simplemente no funcionan tan bien. ¿Alguna vez has aterrizado en un popup mientras lees un artículo en un dispositivo móvil? Si te ha pasado, entonces probablemente sabes lo que quiero decir.

¿Cuál es la alternativa? Utiliza un cuadro de conversión al final de tu blog o página, como el blog de Neil Patel:

19. Deshacerse de Elementos DOM Repetitivos

DOM significa Modelo de Objetos de Documento. Se refiere a la forma en que tu sitio se presenta en diferentes dispositivos. En dispositivos móviles, algunos elementos que aparecen en la página de inicio del escritorio se ocultan, pero el navegador móvil todavía pierde tiempo y energía para ocultar esos elementos. Deshacerse de esos elementos ocultos ayudará a la velocidad de carga de la página en cada plataforma.

La importancia de las Velocidades de Página

Si nunca has prestado mucha atención a la velocidad de tu página, es hora de sentarte y tomar nota. Todo el tiempo y la energía que empeñas en tu contenido y diseño no ascenderá a nada si tu sitio toma demasiado tiempo para cargar.

De hecho, The Aberdeen Group encontró que sólo un segundo de retraso en los tiempos de carga de la página lleva a un 11% menos visitas a páginas (lo que resulta en mayores tasas de rebote), un 16% menos satisfacción del cliente y una pérdida del 7% en la conversión de clientes. Si tu sitio tarda tres o más segundos en cargarse, las pérdidas empeorarán sustancialmente.

Si esta lista se siente abrumadora o es un poco más de tus habilidades técnicas, puede resultarte útil comenzar con recomendaciones y herramientas de Google. Aquí obtendrás información básica y recursos gratuitos para probar la velocidad de tu página. Google incluso te dirá exactamente qué problemas tu sitio está tratando con lo que puede concentrar sus esfuerzos de optimización de sitios.

Sólo asegúrate de marcar esta lista antes de dirigirse a Google para que pueda encontrar soluciones sencillas a cada problema de velocidad de página que encuentres.

Este articulo fue escrito por Michael Abehsera. Originalmente publicado en Toptal.