Cómo optimizar el rendimiento móvil

Los mejores diseños equilibran la estética y el rendimiento al trabajar con dispositivos móviles en mente desde el principio. Desde establecer presupuestos de rendimiento estrictos hasta implementar técnicas de optimización del lado del cliente y del servidor, compartiré los procesos actuales de optimización del rendimiento móvil que usamos en Cyber-Duck .

Conviértase en una mentalidad móvil

El rendimiento es una parte clave de la experiencia del usuario, por lo que no puede ser una ocurrencia tardía al final del proceso de desarrollo. Es preferible gestionar los proyectos a través de una estructura con mentalidad móvil , con diseñadores y desarrolladores colaborando desde el principio.

Revisión colaborativa

Para cada proyecto, revise el alcance del diseño y desarrollo con el equipo interno y defina los objetivos del indicador clave de rendimiento (KPI). Estas son las métricas de hitos que indican el éxito del proyecto, en función de los objetivos comerciales. Dada su importancia, las metas relacionadas con el desempeño deben aparecer aquí.

No firme los hitos importantes del proyecto (como la dirección de arte y los esquemas) con las partes interesadas hasta que todo el equipo interno haya revisado el resultado. De lo contrario, descubrimos que los desarrolladores pueden solicitar ajustes de diseño (para reducir el tamaño de la página) durante la implementación. Con los diseños ya aprobados, los cambios en esta etapa pueden crear complicaciones, abriendo más rondas de aprobaciones de clientes. Cuando los desarrolladores están involucrados desde el principio, pueden estimar el tamaño y la potencia de programación necesarios para las interfaces y evitar esto.

Presupuestos de desempeño

La mejor manera de entrar en la mentalidad móvil es establecer y adherirse a un presupuesto de rendimiento estricto : establecer un objetivo para la velocidad y el tamaño del sitio web final. Cuando el equipo está trabajando hacia un objetivo claro de alto rendimiento, deben elegir si implementar funciones costosas como carruseles.

Los objetivos comerciales específicos y los requisitos de los usuarios determinan si establecemos presupuestos de rendimiento basados ​​en cifras. Por ejemplo, la renovación de nuestro propio sitio web tuvo como objetivo mejorar drásticamente los tiempos de carga en todos los dispositivos y aumentar las conversiones móviles. Establecemos límites estrictos de no más de 40 solicitudes HTTP o 500 KB de datos para dispositivos móviles. Los datos de Google Analytics pueden informar qué objetivos seleccionar durante las renovaciones, ya que las interacciones históricas indican el comportamiento de su público objetivo.

Por lo general, definimos objetivos para el tamaño de la página, con un límite de 500 KB para las páginas de inicio móviles. Las solicitudes del servidor son más difíciles de predecir, por lo que es menos probable que establezcamos cifras exactas. Estas pautas generales se adaptan a nuestras necesidades para los proyectos de los clientes. Pero Daniel Mall tiene una excelente guía práctica para agregar detalles a los presupuestos: desde asignar peso para HTML y CSS, hasta JavaScript, imágenes y fuentes web.

Técnicas de optimización

En dispositivos móviles, la velocidad de carga del sitio web depende de factores del lado del cliente y del servidor. El uso de técnicas de optimización específicas que aborden estos dos factores puede ayudarlo a cumplir con los presupuestos de rendimiento establecidos para su proyecto.

Optimización del lado del cliente

Con un panorama móvil variado (más de 5000 dispositivos de teléfonos inteligentes únicos en 2014), los desarrolladores tienen mucho menos control sobre el rendimiento de los dispositivos individuales que los factores del lado del servidor. Por lo tanto, la optimización del lado del cliente es crucial. Las siguientes técnicas tienen como objetivo reducir el tiempo de procesamiento y la potencia requerida de los dispositivos móviles para cargar sitios web.

Optimizar código

Muchos desarrolladores caen en la trampa de escribir en jQuery para impulsar un sitio web. Pero no hay tal cosa. De hecho, está escribiendo en JavaScript, mientras usa una biblioteca de atajos y funciones útiles. Aunque esto acelera el desarrollo (útil, cuando necesita lanzar un producto al mercado rápidamente), puede haber un costo de rendimiento. La biblioteca jQuery agrega peso, y la flexibilidad de los complementos (y funciones) significa que a menudo se pueden inflar.

Aquí hay un ejemplo, con JavaScript y jQuery usados ​​para la misma función. Escribir en JavaScript simple evita extraer otra biblioteca externa a su aplicación y guardará otra valiosa solicitud HTTP.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Puede optimizar aún más los archivos CSS y JS utilizando sistemas como Grunt o Gulp, o con aplicaciones de compilación front-end como Prepos, Codekit o Hammer. Estos reducen las solicitudes HTTP y el tamaño del archivo al realizar una variedad de tareas: concatenar archivos, compilar Sass, Less o CoffeeScript, Uglify JS (comprime JavaScript) y minimiza/comprime archivos para uso en producción.

Priorizar arriba del pliegue

Google Pagespeed Insights (y herramientas similares) recomienda priorizar el tamaño de carga y la velocidad del contenido en la mitad superior de la página. Separe primero el CSS utilizado para mostrar la parte visible de la página (sobre el pliegue); diferir el resto de los estilos para que se carguen después de que se haya renderizado la página.

Agregar el CSS superior directamente en el encabezado de la página puede hacer esto. Pero tenga en cuenta que esto no se almacenará en caché como el resto del archivo CSS, por lo que debe restringirse al contenido clave. Una variedad de herramientas pueden ayudarlo a determinar el CSS para separar, incluido el CSS crítico de Scott Jehl y la herramienta Bookmarklet de Paul Kinlam.

Optimizar Imágenes

Teniendo en cuenta la preferencia actual por un diseño rico, es lamentable que las imágenes sean a menudo las culpables del tamaño de página grande. Pero el diseño basado en imágenes aún es posible si cada uno se optimiza y comprime antes y después de exportar al formato correcto. Asegúrese siempre de utilizar el tipo de imagen adecuado. Las fotos de colores pesados ​​funcionan mejor como archivos JPEG, mientras que los gráficos de colores planos deben estar en PNG8. Los degradados y los íconos más complejos funcionan mejor como PNG24/32 con transparencia alfa o SVG.

Photoshop y Fireworks pueden ayudarlo a personalizar los niveles de optimización en diferentes áreas de la imagen. Esto significa que el tema principal puede seguir siendo de alta calidad, mientras que el resto se optimiza para aumentar el rendimiento. Las herramientas de compresión de imágenes sin pérdida como ImageOptim y TinyPNG pueden aprovechar al máximo el tamaño del archivo, sin perder calidad de imagen.

También puede utilizar el nuevo elemento HTML5 <picture> y los atributos srcset y size para las imágenes. Estas dos adiciones al lenguaje lo ayudan a definir imágenes receptivas directamente en el HTML, por lo que el navegador solo descargará la imagen que coincida con la condición dada.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

Sin embargo, esta técnica debe usarse con cuidado. Solo unos pocos navegadores lo admiten: algunos navegadores modernos (como Safari), navegadores de Android e IE10/11 (y anteriores) no lo hacen. Las alternativas de Polyfill pueden hacer que este método funcione en navegadores más antiguos, pero estas son bibliotecas de JavaScript externas que deben cargarse por separado y pueden no valer la pena dado que hay otras técnicas disponibles. Vale la pena considerar su público objetivo y qué tecnologías utilizarán para ver si se requiere el peso adicional del relleno de polietileno.

Las URL de datos son una opción final. En lugar de vincular a un archivo de imagen externo, los datos de la imagen se pueden convertir en una cadena codificada en base64 (o ASCII) e incrustarse directamente en el archivo CSS o HTML. Se encuentra disponible una sencilla herramienta de conversión en línea. Las URL de datos son útiles, ya que guardan solicitudes HTTP y pueden transferir archivos pequeños más rápidamente. Pero, como se demuestra a continuación, el tamaño del código incrustado es mayor que el de los enlaces a imágenes externas. La longitud añadida puede hacer que los documentos HTML y CSS sean más difíciles de mantener, y los cambios de imagen tendrán que volver a codificarse e incrustarse cada vez.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

Automatice la optimización de medios de CMS

La aplicación de las técnicas de optimización de activos de la sección anterior significaba que podíamos elegir un diseño clásico basado en imágenes para BAM, lo que les permitía exhibir fotografías de nuevos proyectos de construcción.

Pero también necesitábamos darle a BAM la libertad de actualizar el contenido sin necesidad de optimizar cada imagen. Por supuesto, ninguna solución sería tan efectiva como la optimización manual, pero logramos lograr un grado razonable de optimización automatizada. Reconfiguramos su Sitefinity CMS existente para crear flexibilidad. Se utilizaron opciones estándar para redimensionar (y optimizar) las imágenes automáticamente, ajustándose al contexto de cada página web:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity también puede cambiar el tamaño de las imágenes desde la URL mediante el uso de parámetros de URL, y se puede lograr una representación aún más rápida almacenando en caché la imagen redimensionada, utilizando la siguiente opción:

 /images/image-opt.jpg?size=480 

La mayoría de los sistemas CMS permiten cierto grado de optimización de medios. Por ejemplo, puede definir la configuración de medios para asegurarse de que los futuros usuarios solo agreguen imágenes que se ajusten a las plantillas del sitio web. Aquí hay un ejemplo rápido de WordPress.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Optimizar las fuentes y los iconos

Las fuentes son una parte importante de la experiencia del usuario y la marca de un sitio web o aplicación, pero pueden no ser la primera prioridad para el usuario. Por este motivo, las fuentes web pueden ser otro factor a optimizar.

Al diferir la carga de fuentes, el navegador mostrará la copia en cualquier fuente que tenga disponible para empezar. Esto significa que el usuario siempre obtendrá el contenido primero. Se puede posponer la carga de fuentes separando la parte del CSS que se vincula a los archivos de fuentes y cargándola después de que se haya renderizado el resto de la página. Tenga en cuenta, sin embargo, que el texto puede parpadear brevemente para cambiar cuando se carga la fuente web.

Del mismo modo, los íconos son otra área a optimizar, ya que son archivos pequeños que deben cargarse con frecuencia. También podría considerar usar archivos de fuentes para íconos. Use un servicio como Fontello para elegir una variedad de íconos y genere un archivo de fuente limitado a su selección. Esta técnica puede crear iconos vectoriales de alta calidad para todas las resoluciones de pantalla, con un ligero impacto en el rendimiento.

Alternativamente, los sprites de imagen son una opción bien conocida. Combinan imágenes en un archivo (que usa solo una solicitud para cargar) y muestran solo la parte requerida para el diseño usando la posición de fondo. Paul Stamatiou describe cómo se hace esto y destaca algunas limitaciones.

Tecnologías de carga

Las siguientes técnicas evitan enviar todo el contenido de un sitio web a los navegadores móviles. En su lugar, solo se descargan los datos precisos que se necesitan mediante la optimización para cada punto de interrupción. La velocidad de carga móvil fue una consideración clave para el sitio web de Velocity Drive, que proporciona tecnologías de remolque. Las bibliotecas de JavaScript deben cargarse en todos los puntos de interrupción, para probar las capacidades del navegador y evitar fallas. Pero optimizamos los activos con cuidado para cada punto de interrupción: el tamaño de carga de la página de inicio es de solo 323 KB en dispositivos móviles y aumenta a 828 KB en computadoras de escritorio grandes.

Lleve esto más lejos con técnicas de carga diferida condicional para aumentar la velocidad de página percibida. Cargan secciones visibles en etapas, con contenido clave colocado arriba del pliegue. Los elementos costosos (como imágenes) que se encuentran hacia el final de las páginas no se cargan, a menos que el usuario decida desplazarse por el contenido. Esta técnica fue clave para la sección 'Perspectivas' del sitio web de Niu Solutions, que cubre sus innovaciones de TI. Usamos un pequeño complemento jQuery llamado jScroll para cargar más artículos a medida que el usuario se desplaza hacia abajo. Aquí hay una muestra de cómo configuraríamos este complemento, que simplemente requiere el enlace a más contenido:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

Las tecnologías de precarga presentan nuevas oportunidades. Pueden anticipar y prepararse para el próximo movimiento del usuario cargando la página que es probable que vean a continuación antes de hacerlo, para brindar una experiencia más rápida. Sin embargo, descubrir la estructura de tráfico típica es más fácil cuando se renueva un sitio web existente, ya que puede estudiar los embudos de flujo de comportamiento en Google Analytics.

Mejore desde una experiencia central

Responsive News de la BBC se refiere a la idea de brindar al usuario la experiencia central que solicita, luego evaluar el entorno del usuario y mejorar la experiencia en consecuencia . Un ejemplo simple de esto es cargar imágenes de baja resolución inicialmente y luego mostrar imágenes de alta resolución según el ancho de banda que tenga el usuario.

Esta idea es parte de la mejora progresiva, donde las tecnologías web se superponen para brindar la mejor experiencia en todos los entornos. La mejora progresiva puede basarse en una serie de factores diferentes. Estos incluyen la tecnología a la que tiene acceso un usuario, como su navegador, sistema operativo y entorno (como la velocidad de Internet). Aquí, defina un conjunto básico de características que deben funcionar en los navegadores menos capaces y solo agregue más complejidad después de probar si los navegadores pueden manejarlo.

Detectar si el navegador puede admitir funciones HTML5 y CSS nos ayuda a escribir código condicional para cubrir todas las eventualidades: mejorar y agregar funciones cuando son compatibles, mientras se mantiene seguro y simple para dispositivos y navegadores que no lo son.

Reducir las pruebas de funciones

La incorporación de bibliotecas de prueba de características como Modernizr o has.js es una práctica común recomendada. Pero demasiados desarrolladores implementan toda la biblioteca; prueban todas las capacidades, aunque solo se necesita una pequeña cantidad de resultados para determinar si se deben agregar funciones.

Tim Kadlec informa el tiempo de análisis y ejecución de la misma biblioteca (jQuery 2.1.1 minimizado) en una variedad de dispositivos. Esto demuestra que a menudo hay un mayor costo de rendimiento móvil (incluso entre dispositivos antiguos y nuevos) para implementar estas bibliotecas, en comparación con el escritorio. Tendemos a adaptar la biblioteca, probando solo las características relevantes del sitio web . Esto ahorrará tiempo y una valiosa potencia de procesamiento móvil.

Optimización del lado del servidor

El tiempo de respuesta del servidor es un factor clave en la velocidad del sitio web: muchos apuntan a menos de 200 ms. Pero la latencia de la red (la demora a medida que los datos se mueven entre el servidor y el dispositivo) es el cuello de botella real para el rendimiento móvil, lo que deja a los usuarios móviles con una experiencia más lenta.

Esto está influenciado por la velocidad de la red. Según Ofcom, las velocidades de descarga promedio en las redes populares 3G y 4G fueron de 6,1 Mbps y 15,1 Mbps en el Reino Unido. Algunos interpretan esto como un límite claro en el tamaño máximo del sitio web. Pero la realidad es más compleja, ya que la velocidad varía según la cobertura y el contexto ambiental. Los usuarios a menudo se conectan a Edge lento (E) y GPRS cuando están fuera del alcance.

Hay una variedad de técnicas disponibles para mejorar el rendimiento del sitio web del lado del servidor.

Almacenamiento en caché, procesamiento previo y contenido estático

Las páginas web dinámicas requieren múltiples consultas a la base de datos, lo que requiere un tiempo valioso para procesar la salida y formatear los datos, y luego se procesan en HTML legible por navegador. Se recomienda almacenar en caché el contenido previamente procesado para ese dispositivo. Para los visitantes que regresan, en lugar de procesar desde cero, verificará el caché y solo enviará actualizaciones.

Muchos también eligen bibliotecas de plantillas de JavaScript como Handlebars y Moustache para manejar el contenido web. Pero analizar y ejecutar JavaScript consume energía y tiempo. Los dispositivos móviles no pueden procesar estas bibliotecas de plantillas tan rápido como las computadoras de escritorio y consumen sus recursos de procesamiento. Renderizar páginas completamente en el servidor es mucho más rápido. Twitter optó por este enfoque ya en 2012 y explicó el valor en su blog.

Recientemente, nuestro desarrollador front-end sénior amplió los límites de esta técnica para su cartera personal. Fue construido con el Statamic CMS basado en archivos, que acaba de agregar compatibilidad con html_cache. Cuando se implementó, esta función redujo el tiempo promedio de carga de todas las páginas de aproximadamente 1,8 segundos a 225 milisegundos.

Almacenamiento en caché del navegador

La optimización granular puede agilizar la carga del sitio web al evitar la transferencia regular de archivos que sabe que no se actualizan con frecuencia. Use un controlador de servidor (como un archivo .htaccess ) para indicarle al navegador qué tipo de contenido debe almacenar y cuánto tiempo deben conservar las copias. Así es como puede implementar el almacenamiento en caché del navegador en el servidor Apache:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

Redes de entrega de contenido (CDN)

Puede mejorar la carga de activos utilizando una CDN como CloudFlare junto con su servicio de alojamiento habitual. Aquí, el contenido estático (como imágenes, fuentes y CSS) se almacena en una red de servidores globales. Cada vez que un usuario solicita este contenido, la CDN detecta su ubicación y entrega activos desde el servidor más cercano, lo que reduce la latencia. Aumenta la velocidad al permitir que el servidor principal se concentre en entregar la aplicación en lugar de entregar archivos estáticos.

Aunque agrega gastos, use un CDN dedicado para mejorar la velocidad de carga de los sitios web con muchos activos . Aparte de la configuración inicial, CloudFlare no requiere configuración manual; el caché se crea y actualiza para usted, en función del tráfico histórico y de los activos que se pueden servir mejor. Pero implemente esto teniendo en cuenta la futura administración de contenido independiente: asegúrese de que todos los activos cargados desde un CMS también se sirvan de manera transparente a través de la CDN.

Un CDN fue la mejor opción para nuestro sitio web Eurofighter Typhoon, ya que la fotografía de alta resolución de los aviones de defensa fue una característica crucial para mostrar su capacidad. En los últimos 30 días, los informes indican que CloudFlare ahorró el 76 % de las solicitudes y el 48 % del ancho de banda, lo que aumentó la velocidad del sitio web con muchas imágenes.

Pruebas

No hay reemplazo para las pruebas durante la producción. Trate de utilizar varias herramientas para probar el trabajo en curso mediante la simulación de la experiencia móvil y el diagnóstico de posibles problemas de rendimiento.

A medida que avanza la producción, vigile siempre los números: desde asegurarse de que los activos de diseño se generen y exporten correctamente, hasta verificar el tamaño del archivo de la página y la cantidad de solicitudes HTTP a través de las herramientas de desarrollo en su navegador. Aquí, la pestaña Red le brinda una descripción completa de los recursos cargados, el tamaño total del archivo y el tiempo de procesamiento:

Tenga en cuenta las líneas verticales azules y rojas a la derecha de la línea de tiempo en Chrome Inspector arriba. Estos representan eventos DOM Ready y Page Load respectivamente. En la parte inferior de la ventana, muestra la cantidad de solicitudes HTTP y el tamaño total del archivo cargado en el punto de interrupción actual.

Otras herramientas incluyen:

• WebPagetest ofrece una amplia variedad de opciones para probar URL en vivo: desde elegir cualquier ubicación en todo el mundo hasta configurar velocidades y latencia de conexión 3G y 4G específicas. Incluso puede experimentar cómo se carga el sitio web para estos usuarios, a través de la vista de tira de película y el video.
• Pagespeed Insights de Google es una herramienta introductoria más visual para analizar la velocidad de la página. Divide los resultados en escritorio o móvil, y sugiere técnicas para mejorar áreas específicas de su sitio: indica recursos para almacenar en caché o imágenes para optimizar.

Prueba en dispositivos reales

Pero no confíe únicamente en los simuladores. También probamos proyectos a lo largo de la producción en una variedad de dispositivos móviles reales.

Cree su propio laboratorio de dispositivos o utilice OpenDeviceLabs. Idealmente, obtenga una idea de la experiencia real del usuario evitando el poderoso Wi-Fi de la oficina. Cree un sitio de prueba en un servidor web (idealmente, el mismo que el servidor en vivo) al que pueda acceder desde fuera de la red de la oficina. Luego, pruebe mientras está en movimiento en entornos típicos como una cafetería u hotel lleno de gente, en una conexión de red.

Resumen de rendimiento móvil

Sobre todo, intente crear un sitio web que pueda equilibrar la estética y el rendimiento en dispositivos móviles y lograr métricas de conversión reales. Un proceso de optimización del rendimiento colaborativo e iterativo lo ayudará a lograrlo.

Desde el comienzo del proyecto, aliente al equipo interno a trabajar en conjunto con una mentalidad móvil al establecer un presupuesto de rendimiento estricto . Construya una comprensión de los factores del lado del cliente y del servidor que determinan el rendimiento del sitio web en dispositivos móviles. Luego, puede alcanzar el objetivo establecido implementando una combinación de las técnicas de optimización específicas que he descrito. Por supuesto, todavía existe una compensación entre tener un diseño llamativo, alto rendimiento y seguridad en algunos casos; un equipo colaborativo de diseño y desarrollo puede decidir qué es lo mejor para el negocio, consultando con los gerentes de proyecto y las partes interesadas relevantes.

Nuestro proyecto de optimización para una consultoría de tecnología global demuestra cómo estas técnicas pueden combinarse para mejorar significativamente la velocidad de carga y el tamaño. El proyecto implicó el almacenamiento en caché de plantillas y páginas, la optimización de activos y fuentes y la reducción de las pruebas de funciones, entre otras técnicas. Hasta ahora, las pruebas demuestran que el renderizado y el tiempo de carga total se han reducido a menos de 1,4 segundos, desde casi 4 segundos antes de que comenzáramos a trabajar; Del mismo modo, el tamaño del archivo se ha reducido a 1 MB desde más de 3 MB.

Lectura adicional en SmashingMag:

• Lista de verificación de rendimiento de front-end 2017
• Preparándose para HTTP/2
• Todo lo que necesitas saber sobre AMP
• Los (no tan) poderes secretos del navegador móvil