Más de 15 años de experiencia administrando aplicaciones críticas Técnicas de Optimización de Código -1- Critical Cloud & Hosting Nov 2011 Ago 2012 May 2013 Lanzamiento Cloud Elastic (Orquestador) Adjudicación contrato externalización Cloud.

Download Report

Transcript Más de 15 años de experiencia administrando aplicaciones críticas Técnicas de Optimización de Código -1- Critical Cloud & Hosting Nov 2011 Ago 2012 May 2013 Lanzamiento Cloud Elastic (Orquestador) Adjudicación contrato externalización Cloud.

Slide 1

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 2

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 3

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 4

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 5

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 6

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 7

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 8

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 9

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 10

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 11

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 12

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 13

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 14

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 15

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 16

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 17

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 18

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 19

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 20

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 21

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 22

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 23

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 24

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 25

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 26

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 27

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 28

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 29

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 30

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 31

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 32

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 33

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 34

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 35

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 36

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 37

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 38

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 39

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 40

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 41

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 42

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 43

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 44

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 45

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 46

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 47

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 48

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 49

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 50

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 51

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 52

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 53

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 54

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 55

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 56

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 57

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 58

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 59

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 60

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-


Slide 61

Más de 15 años de experiencia
administrando aplicaciones
críticas

Técnicas de

Optimización de Código
-1-

Critical Cloud & Hosting

Nov 2011

Ago 2012

May 2013

Lanzamiento Cloud
Elastic (Orquestador)

Adjudicación contrato
externalización Cloud de la
Generalitat de Cataluña

Lanzamiento BackUp
OnDemand

1996
2008

2010

Inauguración CPD
Actual (BCN)

Diseño e
implantación de
Nexica Cloud

Innovación tecnológica

Jun 2011

Feb 2012

Sep 2012

Renovación marca Actualización modalidades Lanzamiento Cloud
Manager (desarrollo
(apuesta clara hacia Cloud (Hosting,
OnDemand,
Pool)
propio)
Cloud)

Enfoque personal

Soporte activo

Especialistas en Virtualización y Cloud Computing.
Habilitamos y gestionamos las TIC de tu empresa,
adaptando la solución a tu negocio y te acompañamos
personalmente durante el ciclo de vida del servicio.

-2-

Critical Cloud & Hosting

Reducir el riesgo de
obsolescencia tecnológica
Mejorar la
productividad
• Canalizamos tus actividades y tareas
TIC no estratégicas:
o
o

o
o

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:
o
o
o

Plataformas de test/concepto
Rápida adaptación al crecimiento o
decrecimiento departamental.
Servicios disponibles en minutos.

• Expertos en tecnologías de cloud
• Acceso a tecnología de primer nivel
perfectamente integrada y probada
• Adaptación continua al cambio tecnológico:
o
o
o

Innovación tecnológica
Seguridad
Procesos

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.

-3-

Critical Cloud & Hosting

Nexica Cloud
• Cloud Hosting
• Cloud On Demand
• Cloud elements:
o
o
o

Panel online
(Cloud Manager)
Redes y
direccionamiento
Balanceo y
aceleración

• Capacidad de adaptación
Storage
BackUp
Seguridad
Elasticidad
Conectividad

o
o
o
o
o

Cloud Expertise
•
•
•
•

Desde un servidor, hasta una arquitectura de
múltiples capas

• Potencia
• Arquitectura
• Modelo facturación (Cuota fija / Consumo)

• Rapidez de despliegue
• OPEX vs CAPEX
• Sin compromiso de permanencia

Experiencia Cloud a disposición del cliente
• Control del entorno
• Aceleración en la implantación
tecnológica
• Ejecución experta y metodología
probada

Proyectos de virtualización
Clouds Privados
Clouds Híbridos
SaaS Cloud Manager

Complements

Aplicaciones y servicios 100% gestionados
• Email, Pruebas de Stress, Seguridad, Firewall de
aplicaciones, etc.

-4-

Critical Cloud & Hosting

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-stack IPv4 e IPv6.

-5-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud

Virtualización

Computación y comunicaciones

Principal proveedor mundial de software de
virtualización disponible para ordenadores
compatibles

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

Seguridad

Solución sin agente de BackUp y
recuperación de Máquinas Virtuales.

Sistemas perfectamente integrados en el
entorno Cloud, para garantizar la seguridad
de los diferentes elementos de servicio.

-6-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Panel Cloud de desarrollo interno definido
desde la base de clientes
• Cloud Manager

Soporte activo

• 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.

• Integrable sobre Cloud
Privado.

-7-

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Adaptación del servicio al negocio
• Te ayudamos en el diseño de la solución
o
o
o
o
o

Tecnología base
Capacidad
Arquitectura
Modelo de servicio
Procesos de gestión

Ingeniería de
Preventa
Ingeniería de
Sistemas

• Catálogo mixto de servicios
o
o

Cloud Público
→ Enfoque modular y adaptable
Cloud Expertise → 100% personal

Ingeniería de
Software

Ingeniería de
Red

Soporte N1,
N2

• Consultoría postventa
o
o

Optimización del código
Rediseño del servicio

-8-

Critical Cloud & Hosting

Flexibilidad
Innovación tecnológica

Enfoque personal

Soporte activo

Personas capaces, transmitiendo valores

Optimistas

Solucionadores

Metódicos

Gente de acción

 Personas atendiendo personas.
 Conocimiento 100% integrado en la cadena de valor.
o
o
o

Ingeniería de SW
Ingeniería de Redes
Arquitectos e Ingenieros de Sistemas

-9-

Solventes

Entusiastas

 Más del 75% del personal está
especializado en gestión TI.
 Más del 40% está certificado.

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

Modelamos nuestro soporte para buscar soluciones
• Esquema habitual de soporte

• Soporte Activo

Orientado a procedimiento y automatización

Pensado para generar implicación

CLIENTE
Soporte N1
Soporte N2

Soporte N3

o
o
o

CLIENTE
Ingeniería de
Sistemas

Soporte N2

Ingeniería de
Software

Ingeniería de
Sistemas

Ingeniería de
Red

o
o
o
o

Orientados a “soltar el ticket”.
Atención subcontratada en algunos casos.
Interlocución con cliente poco especializada (Nivel1)

-10-

Soporte N1
-coordinación
y priorizaciónIngeniería de
Red

Área comercial

Ingeniería de
Software

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)

Critical Cloud & Hosting

Innovación tecnológica

Enfoque personal

Soporte activo

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.
1

ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.

2

RESPUESTA: ante cualquier solicitud relacionada con los servicios.

3

COBERTURA: cualquier servicio bajo el paraguas de soporte activo

-11-

Critical Cloud & Hosting

-12-

Critical Cloud & Hosting

Técnicas de
Optimización de Código

-13-

Critical Cloud & Hosting

Perseguimos mejorar el tiempo de respuesta
•
•
•
•
•
•

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

-14-

Critical Cloud & Hosting

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

(Fecha)

-15-

Critical Cloud & Hosting

Código
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
•…

-16-

Critical Cloud & Hosting

Medios
•
•
•
•
•

Imágenes
Sonido
Video
Documentos
Otros

Metadatos
• Cabeceras HTTP
• Cookies

-17-

Critical Cloud & Hosting

Infraestructura
•
•
•
•
•
•

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

-18-

Critical Cloud & Hosting

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

-19-

Critical Cloud & Hosting

Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web
• Basadas en reglas
• Herramientas
• Desde el punto de vista del cliente
• Medida: Tiempo de carga de la página (W3C, Navigation Timing)
• Sobre cualquier elemento que afecte al rendimiento

-20-

Critical Cloud & Hosting

Categorías
•
•
•
•
•

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

-21-

Critical Cloud & Hosting

Optimización del Cacheo

-22-

Critical Cloud & Hosting

Introducción
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
- …
-23-

Critical Cloud & Hosting

Introducción
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)

-24-

Critical Cloud & Hosting

Cacheo en Navegador
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-Modified y 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.
-25-

Critical Cloud & Hosting

Cacheo en Navegador
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 siguiente petición al mismo recurso, se envía esta informació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 Not Modified
-26-

Critical Cloud & Hosting

Cacheo en Navegador
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)

-27-

Critical Cloud & Hosting

Cacheo en Navegador
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 hasheo de 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.

-28-

Critical Cloud & Hosting

Cacheo en Navegador - Móviles

-29-

Critical Cloud & Hosting

Cacheo en Proxy
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.


No cachear recursos que generen cookies (Cache Control: private), o mejor
aún, utilizar un dominio sin cookies para servir contenidos que queramos
cachear.
-30-

Critical Cloud & Hosting

Content Delivery Network (CDN)
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 Domain Sharding.

-31-

Critical Cloud & Hosting

Domain Sharding
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 Domain Sharding podemos aumentar el número de
conexiones simultaneas desde un navegador a nuestra web.
-32-

Critical Cloud & Hosting

Domain Sharding
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.

-33-

Critical Cloud & Hosting

Minimizar el número de
Peticiones / Repuestas

-34-

Critical Cloud & Hosting

Minimizar el número de Peticiones / Respuestas
Introducción (1)
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?

-35-

Critical Cloud & Hosting

Introducción (2)

-

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

-36-

Critical Cloud & Hosting

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.

¿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.

-37-

Critical Cloud & Hosting

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
- 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.

-38-

Critical Cloud & Hosting

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.

-39-

Critical Cloud & Hosting

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.


<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />




-40-

Critical Cloud & Hosting

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.




<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />


-41-

Critical Cloud & Hosting

Optimizar el orden de CSS y JS
Por lo general deberíamos cargar los CSS lo antes posible () y los JS al final y si es
posible, de forma asíncrona.

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.

-42-

Critical Cloud & Hosting

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.
<script type="text/javascript">
var element = document.createElement("script");
element.src = "moreJavaScriptCode.js";
document.body.appendChild(element);



-43-

Critical Cloud & Hosting

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


window.location = "http://www.google.com/"

-49-

Critical Cloud & Hosting

Minimizar el tamaño de
las Respuestas

-50-

Critical Cloud & Hosting

Minimizar el tamaño de las Respuestas
Introducción
El peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el
tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de
nuestra web.
Recomendaciones:

-

Evitar comentarios o código muerto en el HTML, JS y CSS
Hacer que el código JavaScript y CSS sea cacheable externalizándolo
Minimizar el tamaño de los JS
Minimizar el tamaño de los CSS
Optimizar las imágenes

-51-

Critical Cloud & Hosting

Activar la compresión
Configurando nuestro servidor para comprimir ciertos recursos, podemos reducir
drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”

Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro
conseguido por enviar la información comprimida.
Recomendaciones:

- La compresión ha de ser selectiva:
- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios
- Tampoco ficheros de menos de 150 bytes

-52-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
Eliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y
por lo tanto acelerar su descarga y tiempo de parseo:
-

Espacios
Retornos de carro
Tabulaciones
Comentarios y código obsoleto o pruebas
Duplicidades

Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de
publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.

-53-

Critical Cloud & Hosting

Minimizar el tamaño de los JS
También es posible reemplazar el nombre de funciones o variables por literales más
cortos:
function add(firstNumber, secondNumber) {
var sum = firstNumber + secondNumber;
return sum;
}

function add(a, b) { var c = a + b; return c; }

Lo cual añade cierto grado de ofuscación al código.

-54-

Critical Cloud & Hosting

Minimizar el tamaño de los CSS
De forma análoga a los JS, es posible reducir el tamaño de los CSS.
-

Eliminado caracteres innecesarios
Eliminando comentarios
Eliminando estilos que no se utilizan
Usando la variante de colores en su notación más corta:
- Rojo:
- #ff0000
- #ff0
- red

-55-

Critical Cloud & Hosting

Optimizar Imágenes
Es importante seleccionar un formato adecuado en función del uso que daremos a la
imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.
- Utilizar JPG para fotografías.
- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.

Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se
pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas
perceptible.

-56-

Critical Cloud & Hosting

Optimizar Imágenes
Recomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.
- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.
- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.

Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver
códigos 404.

- Cacheable
- Ligero
- Susceptible de tener una fecha de expiración en caché elevada.

-57-

Critical Cloud & Hosting

Optimizar el Renderizado

-58-

Critical Cloud & Hosting

Optimizar el Renderizado
Una vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
-

Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)
Poner el CSS en el
Programación eficiente de JavaScript
Reducir el número de elementos de DOM
Reducir el número de iFrames
Especificar el alto y ancho de las imágenes
Especificar el ancho de las tablas
Generar HTML bien formado

-59-

Critical Cloud & Hosting

-60-

Critical Cloud & Hosting

¿Podemos ayudarte?
Más de 15 años de experiencia
administrando aplicaciones críticas.

c/ de l’Acer, 30-32. Barcelona
902 20 22 23
[email protected]
www.nexica.com
-61-