Técnicas de Optimización de Código

1. Más de 15 años de experiencia administrando aplicaciones críticas Técnicas de Optimización de Código

2. Ago2012 Adjudicación contrato externalización Cloud de la Generalitat de Cataluña May 2013 Lanzamiento BackUp OnDemand Nov 2011 Lanzamiento CloudElastic (Orquestador) 1996 Sep 2012 Lanzamiento Cloud Manager (desarrollo propio) 2008 Inauguración CPD Actual (BCN) 2010 Diseño e implantación de Nexica Cloud Jun 2011 Renovación marca (apuesta clara hacia Cloud) Feb 2012 Actualización modalidades Cloud (Hosting, OnDemand, Pool) Innovación tecnológica Enfoque personal Soporte activo Especialistas en Virtualización y Cloud Computing. Habilitamos y gestionamos las TIC de tu empresa, adaptandola solución a tu negocio y te acompañamos personalmente durante el ciclo de vida del servicio.

3. ¿En qué podemos ayudarte? • Reducir el riesgo de obsolescencia tecnológica • Mejorar la productividad • Expertos en tecnologías de cloud • Acceso a tecnología de primer nivel perfectamente integrada y probada • Adaptación continua al cambio tecnológico: • Innovación tecnológica • Seguridad • Procesos • Canalizamos tus actividades y tareas TIC no estratégicas: • Gestión de activos TIC • Adquisición de conocimiento de nuevas tecnologías • Gestión de la complejidad tecnológica • Procesos repetitivos • Te ayudamos a mantener un ritmo de despliegue de tus TIC según las necesidades del negocio: • Plataformas de test/concepto • Rápida adaptación al crecimiento o decrecimiento departamental. • Servicios disponibles en minutos. • Mejor gestión financiera • Disminución de los costes de adquisición de infraestructura (OPEX vs CAPEX) • Control del sobredimensionamiento de recursos • Facturación adaptada al consumo. • Acceso a recursos compartidos con economías de escala.

4. Nuestros servicios • Nexica Cloud • Cloud Hosting • Cloud On Demand • Cloud elements: • Panel online (Cloud Manager) • Redes y direccionamiento • Balanceo y aceleración • Storage • BackUp • Seguridad • Elasticidad • Conectividad • Desde un servidor, hasta una arquitectura de múltiples capas • Capacidad de adaptación • Potencia • Arquitectura • Modelo facturación (Cuota fija / Consumo) • Rapidez de despliegue • OPEX vs CAPEX • Sin compromiso de permanencia • Cloud Expertise • Proyectos de virtualización • Clouds Privados • Clouds Híbridos • SaaS Cloud Manager • Experiencia Cloud a disposición del cliente • Aplicaciones y servicios 100% gestionados • Control del entorno • Aceleración en la implantación tecnológica • Ejecución experta y metodología probada • Email, Pruebas de Stress, Seguridad, Firewall de aplicaciones, etc. • Complements

5. Centro de datos propio Innovación tecnológica Enfoque personal Soporte activo • CPD Propio • Alta eficiencia energética con la mejor conectividad y seguridad • Datacenter eficiente • CPD propio en edificio Carrier House BCN (225 m2). Características Tier3. • CPD en Interxion MAD. Enlace directo con CPD Principal. Características Tier4. • Alta eficiencia energética. PUE 1,4. • Homologación APC “Blade Ready”. • Sistemas gestionados globalmente (tecnología InfraStruXure de APC). • Seguridad y cumplimiento normativo. • La mejor conectividad • Emplazamiento con la mejor conectividad de Barcelona. Conectividad BGP4 a Internet. • Miembros de CATNIX y ESPANIX. • Direccionamiento dual-stackIPv4 e IPv6.

6. Especialización Cloud Innovación tecnológica Enfoque personal Soporte activo • Clouddiseñado siempre con la mejor tecnología • Nexica Cloud • Virtualización • Principal proveedor mundial de software de virtualización disponible para ordenadores compatibles • Computación y comunicaciones • Comunicaciones y Arquitecturas de Virtualización CISCO. La calidad en comunicaciones también en nuestra infraestructura de virtualización. • Storage • Desarrolladora de hardware, software y servicios profesionales • Otros fabricantes del entorno de la solución Cloud • Aceleración y balanceo • Aceleración para aplicaciones. Monitoriza, controla y optimiza el tráfico de usuario final, gestionando su enrutamiento y priorización. • BackUp & Recovery • Solución sin agente de BackUp y recuperación de Máquinas Virtuales. • Seguridad • Sistemas perfectamente integrados en el entorno Cloud, para garantizar la seguridad de los diferentes elementos de servicio.

7. Desarrollos propios Innovación tecnológica Enfoque personal Soporte activo • Panel Cloud de desarrollo interno definido desde la base de clientes • Acceso autenticado. • Gestión basada en roles. • Monitorización de servidores. • Reinicios de servidores. • Control del consumo. • Administración de la elasticidad. • Planificación automática de eventos. • Cloud Manager • Integrable sobre Cloud Privado.

8. Cercanía Innovación tecnológica Enfoque personal Soporte activo • Adaptación del servicio al negocio • Te ayudamos en el diseño de la solución • Tecnología base • Capacidad • Arquitectura • Modelo de servicio • Procesos de gestión • Catálogo mixto de servicios • Cloud Público → Enfoque modular y adaptable • Cloud Expertise→ 100% personal • Consultoría postventa • Optimización del código • Rediseño del servicio Ingeniería de Preventa Ingeniería de Sistemas Ingeniería de Software Ingeniería de Red Soporte N1, N2

9. Flexibilidad Innovación tecnológica Enfoque personal Soporte activo • Personas capaces, transmitiendo valores Optimistas Solucionadores Metódicos Gente de acción Solventes Entusiastas • Personas atendiendo personas. • Conocimiento 100% integrado en la cadena de valor. • Ingeniería de SW • Ingeniería de Redes • Arquitectos e Ingenieros de Sistemas • Más del 75% del personal está especializado en gestión TI. • Más del 40% está certificado.

10. Diseñado para tu tranquilidad Innovación tecnológica Enfoque personal Soporte activo • Modelamos nuestro soporte para buscar soluciones • Esquema habitual de soporte • Orientado a procedimiento y automatización • Soporte Activo • Pensado para generar implicación CLIENTE CLIENTE Soporte N1 Ingeniería de Sistemas Soporte N1 -coordinación y priorización- Área comercial Soporte N2 Soporte N2 Ingeniería de Software Ingeniería de Sistemas Ingeniería de Red Ingeniería de Software Soporte N3 Ingeniería de Red • Interlocución con cliente de Nivel 1 o Nivel 2 • N1 de mayor cualificación técnica. • Atención con personal propio. • Orientación a respuesta (ticket en 1er nivel) • Orientados a “soltar el ticket”. • Atención subcontratada en algunos casos. • Interlocución con cliente poco especializada (Nivel1)

11. Diseñado para tu tranquilidad Innovación tecnológica Enfoque personal Soporte activo 1 2 3 • Nuestros clientes valoran nuestro soporte • El servicio de atención al cliente propio resuelve el 70% de las incidencias en el primer nivel de soporte (N1). • La satisfacción con nuestro servicio de gestión y soporte es de un 9,1 sobre 10. • El 95% de las empresas valoradas con NiceReply se encuentran por debajo de la valoración recibida por nexica. ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente. RESPUESTA: ante cualquier solicitud relacionada con los servicios. COBERTURA: cualquier servicio bajo el paraguas de soporte activo

12. Más referencias

13. Técnicas de Optimización de Código

14. Perseguimos mejorar el tiempo de respuesta Optimización de Código • Mejorar la percepción y experiencia de usuario • Mejora en el posicionamiento • Mayor número de páginas por segundo (ads / ventas) • Optimizar el ancho de banda consumido (menor transferencia) • Optimizar el consumo de recursos (reducir plataforma) • Reducción del consumo energético

15. ¿Qué afecta a la velocidad de carga de una página web?

16. Código Velocidad de una página web • Código que se envía al cliente: • HTML • JavaScript • CSS • Código que genera el código que se envía al cliente: • PHP, Java (Servlets, JSP, JSF), .NET • Librerías, APIs, Frameworks • SQL • …

17. Medios Velocidad de una página web • Imágenes • Sonido • Video • Documentos • Otros Metadatos • Cabeceras HTTP • Cookies

18. Infraestructura Velocidad de una página web • Arquitectura de Servidores • Balanceadores • Elasticidad • Elementos de Cacheo estático y dinámico • Hardware • Software y su parametrización Velocidad de acceso • No podemos controlar la velocidad de acceso • Sí podemos tomar decisiones en función del tipo de conexión

19. Interpretación y Renderizado Velocidad de una página web • Navegador (y versión) • Dispositivo • Ordenador • Móvil • Tablets, Consolas, Televisores…. • Podemos tomar decisiones en función de estos parámetros

20. Web Performance Optimization (WPO) ¿Qué vamos a ver en este seminario? • Conjunto de “BestPractices” relativas al rendimiento web • Basadas en reglas • Herramientas • Desde el punto de vista del cliente • Medida: Tiempo de carga de la página (W3C, NavigationTiming) • Sobre cualquier elemento que afecte al rendimiento

21. Categorías Web Performance BestPractices • Optimización del Cacheo • Minimizar el número de peticiones / respuestas • Minimizar el tamaño de las peticiones • Minimizar el tamaño de las respuestas • Optimizar el renderizado

22. Optimización del Cacheo

23. Introducción Optimización del Cacheo • Elementos de las páginas web que cambian con poca frecuencia pueden ser cacheados para evitar solicitarlos y descargarlos en cada petición. • Principalmente: • HTML • CSS • JavaScript • Imágenes • Pero también: • Medios • Flash • …

24. Introducción Optimización del Cacheo • Cacheando estos contenidos se reduce: • Número de peticiones • Volumen de descarga (reducción de costes) • Podemos cachear en: • Navegador • Proxy Caché • Content Delivery Network (CDN)

25. Cacheo en Navegador Optimización del Cacheo • Podemos configurar nuestro servidor web para incluir cabeceras de cacheo al servir nuestros contenidos. • HTTP/1.1 ofrece las siguientes cabeceras: • Expires y Cache-Control: max-age • Fecha de expiración del recurso y tiempo máximo de almacenaje en caché. • Last-Modifiedy Etag • Fecha de modificación del recurso y UID (inode-size-timestamp) • En principio deberíamos utilizar sólo un mecanismo de cada par, puesto que son redundantes.

26. Cacheo en Navegador Optimización del Cacheo Ejemplo de cabecera devuelta por el servidor: HTTP/1.1 200 OK Last-Modified: Tue, 22 May 2012 02:02:15 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195 En la siguientepetición al mismorecurso, se envíaestainformación en la cabecera HTTP: GET /img/logo.png HTTP/1.1 Host: www.nexica.com If-Modified-Since: Tue, 22 May 2012 02:02:15 GMT If-None-Match: "10c24bc-4ab-457e1c1f“ HTTP/1.1 304 NotModified

27. Cacheo en Navegador Optimización del Cacheo Si tenemos la necesidad de forzar la recarga de un recurso antes de la fecha que especificamos, podemos cambiar su URL o parte de ella. (URL fingerprinting)

28. Cacheo en Navegador Optimización del Cacheo • Existen otras consideraciones a tener en cuenta en función del navegador o dispositivo: • En función de la implementación, puede que el navegador decida borrar elementos de la caché antes de su fecha de expiración, normalmente los menos utilizados. • En Firefox, la URL del recurso ha de variar en como mínimo 8 caracteres para evitar colisiones en el algoritmo de hasheode recursos. • Firefox sólo cachea contenido servido bajo HTTPS si existe la cabecera Cache Control: public • Los dispositivos móviles, por espacio, suelen no cachear elementos que superen un determinado tamaño.

29. Cacheo en Navegador - Móviles Optimización del Cacheo

30. Cacheo en Proxy Optimización del Cacheo Podemos indicar que un recurso sea cacheable en los proxies a través de la cabecera HTTP Cache Control: public Recomendaciones: No incluir parámetros en la URL de acceso al recurso que queremos cachear, ya que ciertos proxies no cachearán este recurso independientemente del valor de la cabecera Cache Control. <imgsrc=“http://www.nexica.com/images/logo.png?v=1” /> No cachear recursos que generen cookies (Cache Control: private), o mejor aún, utilizar un dominio sin cookies para servir contenidos que queramos cachear.

31. Content Delivery Network (CDN) Optimización del Cacheo Servidores de contenido estático distribuidos geográficamente que sirven el contenido desde el servidor más cercano de la CDN. El contenido que se quiere servir desde la CDN es accedido a través de un subdominio del estilo static.example.com , que resuelve a una IP diferente en función de la localización del cliente. Recomendado para grandes sitios con acceso internacional. Favorece el DomainSharding.

32. DomainSharding Optimización del Cacheo En función de la implementación, los navegadores están limitados a cierto número de conexiones simultaneas por dominio. Por ejemplo 2 en IE7. Esto provoca la serialización de peticiones HTTP a una página. www.example.com/resource1 www.example.com/resource2 www.example.com/resource3 www.example.com/resource4 www.example.com/resource5 www.example.com/resource6 Mediante la técnica de DomainShardingpodemos aumentar el número de conexiones simultaneas desde un navegador a nuestra web.

33. DomainSharding Optimización del Cacheo • www.example.com/resource1 • www.example.com/resource2 • ww1.example.com/resource3 • ww1.example.com/resource4 • static.example.com/resource5 (CDN) • static.example.com/resource6 (CDN) • Aumenta el tiempo de resolución de DNS. • Puede tener implicaciones en el SEO de nuestro sitio si no limitamos la indexación de contenidos a un único dominio. Contenidos duplicados. • Si servimos contenidos bajo HTTPS, debemos securizar cada uno de los subdominios adecuadamente.

34. Minimizar el número de Peticiones / Repuestas

35. Minimizar el número de Peticiones / Respuestas Introducción (1) Minimizar Peticiones / Respuestas El número de peticiones necesario para descargar todos los recursos de una página afecta directamente al tiempo de carga de la misma. ¿Qué podemos hacer para reducir el número de peticiones y el tiempo de establecimiento de las mismas?

36. Introducción (2) Minimizar Peticiones / Respuestas • Combinar ficheros JavaScript • Combinar ficheros CSS • Combinar imágenes usando CSS Sprites • Reducir el número de resoluciones de DNS • Reducir el número de redirecciones • Eliminar peticiones que acaban en 404 • Eliminar imágenes sin src • Optimizar el orden de CSS y JS • Evitar document.write y @import • Cargar recursos de forma asíncrona • Paralelizar descargas • Cachear llamadas AJAX

37. Combinar ficheros JS Si combinamos varios ficheros JS en una, sólo es necesario realizar una conexión para descargar todo el código incluido en dichos ficheros. Minimizar Peticiones / Respuestas ¿Es buena idea combinar todo el código JavaScript de una aplicación en un único fichero? Idealmente sólo deberíamos descargar el código necesario para el contenido que estamos visualizando.

38. Combinar ficheros JS • Recomendaciones: • Crear dos ficheros JS: Uno que tenga el código mínimo necesario para la renderización inicial de la página y otro con el código que no necesitaremos hasta una vez la página haya cargado. • Incluir el menor número posible de ficheros JS en el <head> • Minimizar el tamaño de estos ficheros. • Si tenemos código correspondiente a páginas con pocas visitas, dedicarles un fichero propio y descargarlo sólo cuando un usuario acceda a dicho contenido. • Si sólo hemos de incluir pequeños trozos de código, evaluar la posibilidad de incrustarlo en el propio HTML. • Evitar el uso de document.write, ya que impide la descarga asíncrona • Posicionar correctamente la carga de JS en el código para maximizar las descargas en paralelo. Minimizar Peticiones / Respuestas

39. Combinar ficheros CSS • El caso de los ficheros CSS es similar al de los JS y por lo tanto también las recomendaciones en este aspecto. • Recomendaciones: • Crear dos ficheros CSS: Uno que tenga los estilos necesarios para la renderización inicial de la página y con los estilos que no necesitaremos hasta una vez la página haya cargado. • Servir el CSS de contenidos con pocas visitas en un fichero independiente. • Evaluar la posibilidad de incrustar el CSS en el propio HTML. • Evitar el uso de @import • Posicionar correctamente la carga de los CSS respecto a los JS en el código para maximizar las descargas en paralelo. Minimizar Peticiones / Respuestas

40. Optimizar el orden de CSS y JS Dado que el contenido de ficheros JS puede alterar el contenido y disposición de elementos en la página, el navegador bloquea el renderizado, e incluso la descarga, del contenido que sigue a un script hasta que éste se ha descargado, parseado y ejecutado. Minimizar Peticiones / Respuestas <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> </head>

41. Optimizar el orden de CSS y JS En cambio, si comienza a descargarse un JS cuando ya hay otros recursos en descarga, éste se descarga en paralelo. Minimizar Peticiones / Respuestas <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> </head>

42. Optimizar el orden de CSS y JS Por lo general deberíamos cargar los CSS lo antes posible (<head>) y los JS al final y si es posible, de forma asíncrona. Minimizar Peticiones / Respuestas async y defer • Gracias a estos “hints” podemos indicar al navegador cómo queremos que se comporte ante los ficheros JS: • async == true: El Script se ejecuta de forma asíncrona tan pronto como está disponible. • async == false, defer == true: El script se ejecuta cuando la página se ha acabado de parsear. • async == defer == false: El script se ejecuta de forma inmediata, antes de continuar parseando la página.

43. Optimizar el orden de CSS y JS Podemos usar defer, por ejemplo, sobre un código JS que se encargue de cargar otros fichero JS que no son necesarios en la carga inicial de la página. Minimizar Peticiones / Respuestas <script type="text/javascript"> varelement = document.createElement("script"); element.src = "moreJavaScriptCode.js"; document.body.appendChild(element); </script>

44. Combinar imágenes usando CSS Sprites • De forma similar a los JS y CSS, descargar múltiples imágenes implica realizar muchas peticiones. • Una buena alternativa es combinar en una única imagen aquellas que suelan aparecer juntas con frecuencia y mostrarlas de forma individual usando CSS. • Recomendaciones: • Utilizar formatos de imagen para iconos (GIF, PNG8) • Minimizar el espacio vacío entre imágenes • Evaluar la posibilidad de incrustar imágenes directamente en el HTML Minimizar Peticiones / Respuestas <imgsrc="data:image/gif;base64,”TEXTOBASE64” />

45. Eliminar imágenes sin src • Una imagen sin src puede ocasionar diferentes problemas en función de la implementación en el navegador y la configuración del servidor: • No devolver nada. • Devolver toda la página completa. • Devolver el listado de ficheros del servidor para la ruta actual. • Se genera un tráfico innecesario y en el peor de los casos pueden sobrescribirse cookies que impliquen pérdida de información. • Podemos encontrar imágenes sin src: • Directamente en el código HTML: <imgsrc=“”> • Como parte de un código JavaScript: • varimg = new Image(); • img.src = “”; Minimizar Peticiones / Respuestas

46. Minimizar el tamaño de las Peticiones

47. Minimizar el tamaño de la Peticiones • Cada vez que nuestro navegador realiza una petición HTTP envía todas las cookies que tenga par dicho dominio y path. • Dado que muchos usuarios tienen conexiones asimétricas, la velocidad de subida es muy inferior a la de descarga. • En un ADSL de 10Mb/500Kb una petición de 20KB equivale a una descarga de 400KB. • Recomendaciones: • Reducir el tamaño de las cookies al mínimo. (UID) • Servir el contenido estático desde un dominio sin cookies. • Si servimos el contenido desde un CDN, solicitar que sea sin cookies. • Aplicar correctamente la fecha de expiración de las cookies. • Intentar reducir la longitud de las URLs. Minimizar tamaño Peticiones

48. Reducir el tiempo de resolución DNS La resolución de dominios que ha de realizar el navegador para transformar los dominios en direcciones IP implica un tiempo de consulta a los servidores DNS. Aún teniendo en cuenta técnicas como el DomainSharding, deberíamos intentar servir los contenidos de nuestra página desde el menor número posible de dominios. Los navegadores más modernos implementan DNS Prefetching. Esta técnica consiste en resolver los dominios de los enlaces de la página actual de forma automática antes de que el usuario pulse sobre ellos. Minimizar tamaño Peticiones

49. Minimizar el número de redirecciones • Las redirecciones añaden latencia a las peticiones , ya que han de hacer la petición tanto a la URL antigua como a la redireccionada. • Es importante añadir cabeceras de expiración en la respuesta que acompaña a una redirección para que estas puedan ser cacheadas. • Una redirección muy frecuente ocurre cuando se especifican URLs que no terminan en ‘/’, que puede evitarse fácilmente configurando el servidor web para añadirlas automáticamente. • El peor de los casos es realizar la redirección por código, en lugar de cabeceras HTTP: • <script type="text/javascript"> • window.location = "http://www.google.com/" • </script> Minimizar tamaño Peticiones

50. Minimizar el tamaño de las Respuestas