La mayoría de los desarrolladores de front-end estarán familiarizados con al menos algunas de las opciones disponibles para mejorar el rendimiento de front-end. El rendimiento en este sentido no se refiere a la velocidad a la que se carga una página determinada, sino a la suavidad y la capacidad de respuesta que se siente cuando un usuario interactúa con ella. Un ejemplo específico sería la velocidad de cuadros que experimenta un usuario cuando se desplaza hacia abajo en su página de inicio; si es constantemente alto, entonces el rendimiento se considera bueno.
Existe la posibilidad de que no haya experimentado la necesidad de abordar los problemas de rendimiento antes. Tal vez no ha trabajado en un sitio que ha sufrido tales problemas, o tal vez eliminar ese poco de retraso o recuperar esos cuadros descartados no es lo más importante. De cualquier manera, con la creciente cantidad de animación y estilos complejos incorporados en los sitios web modernos junto con la adaptación del diseño receptivo, existe una alta probabilidad de que se encuentre con un rendimiento móvil lento en algún momento. Este artículo le sugerirá algunas cosas a considerar cuando trabaje en sitios web y aplicaciones web que necesitan equilibrar la complejidad y el rendimiento cuando se ejecuta en dispositivos móviles menos potentes.
¿Funciona sin problemas en mi iPhone 5?
¿De verdad? ¡Bueno, eso es genial! Aquí hay algunas estadísticas recientes proporcionadas por W3Schools (que no deben confundirse con W3C) que ilustran los sistemas operativos móviles más activos.
Obviamente nuestro uso de estos datos es limitado. Es solo explícito acerca de dos sistemas operativos; iOS y Android. Esto deja a la vista Windows Phone, Blackberry y otros sistemas operativos móviles aún menos populares.
Lo que podemos ver es que la cuota de mercado de Android es algo mayor que la de iOS. Nuevamente, nos faltan más detalles aquí, como los números de versión y los nombres de dispositivos, pero nos da un buen comienzo al determinar dónde es más necesario nuestro soporte.
No solo Android tiene la mayor cuota de mercado de dispositivos activos, sino que también sufre enormemente la fragmentación de dispositivos. Los datos recientes muestran que solo en 2013 se detectaron 11,868 dispositivos Android distintos (en un tamaño de muestra de 682,000 dispositivos). En estos dispositivos, se estaban utilizando ocho versiones diferentes del sistema operativo Android.
El punto es que cuando se trata de evaluar el rendimiento de su sitio, debe probar en una gama adecuada de dispositivos. Exactamente qué dispositivos solo pueden determinarse por sitio web, y deben basarse en datos de visitantes reales (si puede obtener algunos) que se relacionen con su público objetivo.
En un mundo perfecto, nuestros sitios funcionarán de manera fluida en cada dispositivo. En realidad, esto no es posible debido a las limitaciones habituales del tiempo y las finanzas. Depende de usted decidir dónde trazar la línea y elegir lo que es aceptable.
Causas comunes de bajo rendimiento
Aquí hay un par de cosas que debe tener en cuenta al depurar problemas de rendimiento en dispositivos móviles.
1. Declaraciones CSS grandes y complejas
Para todas las maravillas que el CSS3 aporta al mundo del desarrollo de front-end, todas estas nuevas y elegantes declaraciones de estilo están obligando a nuestras CPU a trabajar más que nunca. Juriy Zaytsev escribió un gran artículo sobre perfilado y optimización de CSS que cubre esto muy bien, sin embargo, tenga en cuenta que esta pieza se publicó en enero de 2012.
El generador de perfiles que utiliza Juriy es el Perfilador de Opera Dragonfly, pero ahora puede perfilar sus estilos más fácilmente con Chrome DevTools simplemente visitando Perfiles en la barra de herramientas de DevTools y seleccionando su opción preferida.
Para ver el impacto de CSS por sí mismo, ejecute un sitio grande y sofisticado a través de DevTools Profiler (si tiene tiempo, también haga un perfil de sus tiempos de pintura) y verá los problemas de rendimiento de los que estoy hablando. Echemos un vistazo a un ejemplo.
? Puedo ejecutar Battlefield 3 en configuraciones ultra (una imagen muy grande), pero la página de inicio de Green Man Festival se desplaza a 24 fps. ¿¿Que pasa con eso??
¿Qué pasa con eso de hecho?
Tan hermoso como se ve el sitio, los desarrolladores han tenido que sacrificar el rendimiento para lograr el aspecto visual que buscaban. La pérdida de rendimiento es pequeña. Sin embargo, si un sitio como este puede ralentizar el rendimiento en una computadora de escritorio potente, ¿qué podemos esperar de un teléfono móvil que se ejecuta en un procesador de 1 Ghz?
Por supuesto, la mayoría de los sitios con funciones de escritorio sofisticadas proporcionarán, con razón, una experiencia más simplificada cuando se ven en dispositivos móviles.
En el caso de Green Man, los navegadores móviles tendrán imágenes más pequeñas con las que lidiar, menos o más animaciones simplificadas y una cantidad reducida de contenido dinámico. Como resultado, se desplaza perfectamente y se ve muy bien.
Si su sitio se siente lento en el móvil, lo primero que debe mirar es sus declaraciones de CSS. En términos de encontrar a los culpables, las combinaciones de sombra de texto, sombra de cuadro, radio de borde, degradados, transparencia y otras propiedades similares que abarcan múltiples elementos en una página pueden aumentar la cantidad de repintados que el navegador debe realizar como un el resultado hace que la UI de su sitio web parezca lenta y no responda. Estas repinturas sin duda serán más evidentes en el móvil.
Depende de usted determinar qué estilos está dispuesto a conservar y cuáles puede dejar caer cómodamente. Todo se reduce a si el aumento de rendimiento es suficiente para garantizar una ligera simplificación en los estilos visuales. La mayoría de las veces, la caída de declaraciones pesadas de rendimiento puede funcionar a favor de la experiencia general que recibirán sus usuarios.
2. Animaciones complejas de JavaScript
jQuery es ahora una biblioteca estándar utilizada por muchos desarrolladores que desean integrar la animación en sus diseños. La razón principal es que es tan fácil de usar. Realmente no necesitas saber JavaScript para usar jQuery. Por supuesto, es fácil ver por qué esto puede llevar a problemas.La falta de JavaScript puede ser una de las causas de las animaciones irregulares, por lo que es importante asegurarse de que sus scripts estén lo más optimizados posible.
Si JavaScript no lo está dejando con los resultados que desea, es posible que desee recurrir a las transformaciones 3D de CSS, cuyo soporte ya es bastante bueno en el mercado móvil.
El uso de transformaciones 3D permite transiciones suaves que no siempre son capaces de bibliotecas como jQuery. ¿Por qué? Debido a que le permiten activar el procesamiento acelerado por hardware que, si bien no es una solución mágica para todos sus problemas de animación, se puede utilizar con buenos resultados en ciertos escenarios. Echa un vistazo a esta demostración de comparación para ver cuánto puede diferir el rendimiento entre los dos.
Para cualquiera que no haya usado transformaciones 3D antes, echemos un vistazo a un ejemplo de código para comenzar. Aquí hay algunos CSS básicos que puede usar para animar la posición vertical de un elemento al pasar el cursor.
Ejemplo CSS
He configurado una demostración en vivo en CSSDesk con todos los prefijos de proveedores incluidos. Tenga en cuenta que es posible que algunos prefijos ya no sean necesarios para cuando lea esto. Si tiene tiempo, el blog de desarrollo de Flickr contiene un gran caso de estudio sobre este tema y vale la pena leerlo.
3. Mejora progresiva vs. Degradación elegante
Aquí tenemos dos? No tan nuevos? términos (la mejora progresiva está celebrando su décimo aniversario, después de haber sido acuñado en 2003) que todavía tiene mucha relevancia en la actualidad. Ambos conceptos son particularmente relevantes al desarrollar sitios web receptivos y, a medida que aumenta la cantidad de dispositivos y sistemas operativos disponibles, la mejora progresiva en particular será una necesidad en muchos proyectos.
¿No son los dos lo mismo?
Casi. La diferencia clave aquí es el orden en el que aborda su diseño. Planificar funciones para que funcionen en todos los dispositivos y luego agregar algunos destellos para aquellos que pueden manejarlo es un ejemplo de mejora progresiva. Creando una característica exclusiva de JavaScript y procediendo a instalar un alternativa al final; degradación elegante.
¿Qué método debes emplear? En mi experiencia, la mejora progresiva casi siempre resulta en una solución mejor y más limpia. Chris Heilmann ha escrito un resumen bastante bueno sobre esto, que ahora se encuentra en la plataforma web Docs.
¿Qué sigue?
Las ideas en este artículo son básicas, pero lo llevarán por el camino correcto cuando se trata de descubrir las causas de un desempeño deficiente.
Si desea obtener más información, el mejor lugar para comenzar sería aprender los entresijos de cómo funciona un navegador web a nivel técnico. Después de todo, es el navegador el que analiza el código que escribes. Si puede entender lo que necesita para poder ejecutar su sitio sin problemas, podrá factorizar su código para trabajar con él.
Cómo funcionan los navegadores: detrás de las escenas de los navegadores web modernos es un artículo fantástico y completo que incluye una gran cantidad de detalles sobre este tema. ¡Buena suerte!