Móviles, optimizando recursos
Móviles, optimizando recursos
No partimos de cero, ¿que se hacía hace 15 años? Minimizar el peso de los recursos y el número de peticiones http.
Mejoran el rendimientos: Unir en único archivo, minificarlo, recuperar la vieja costumbre debajar colores y calidad de imágenes hasta que sea aceptable, usar jpegs progresivos. Igual que se pegan los js y css se pueden hacer sprites con las imágenes que se usan de decoración en el css.
Ponerlos al principio para que no haya que repintar, aprovechar al máximo las posibilidades de css3 fondos, degradados, bordes, animaciones... ya que usan la gpu. Degradan bien (@supports y CSS.supports), usar selectores eficientes.
Imágenes de fondo, no cargan hasta que se necesitan. Si se quieren precargar alguna tenermos:
<link rel="prefetch" href="sprite.png"/>.
Situaciones nuevas: El diseño al pixel muere, existen multitud de resoluciones y proporciones. Pensar que el puntero es el dedo -> puntero gordo sin eventos hover pero con evento touchstart.
Ponerlos al final ya que bloquean el resto de descargas, cuidar el rendimiento en móviles ya que gastan batería, no usar librerías para cosas que ya están implementadas, ej. document.querySelectorAll.
Para animaciones user requestAnimationFrame() en lugar de setInterval().
Cargas asincronas. Strict mode
Nuevas apis que ofrecen más control sobre el cache del navegador: Offline cache, session storage, IndexdedDB.
En muchos casos mejora repartir las peticiones http en diferentes nombres de dominio o cdn, pero hay que sumarle el precio de la resolución de DNS.
Pre-resolución de DNS <link rel="dns-prefetch" href="//widget.foo.com"/>.
Firefox (mejor Aurora) ofrece de serie herramientas para desarrolladores como diseño adaptable, profiler, consola remota...
Probar conexiones lentas iprelay (Linux).