optimización del rendimiento web

www.emezeta.comJosé Román Hernández - Manz

OBJETIVOS PRINCIPALES

Buena respuesta (página instantánea, sin retrasos)

Servidor debe responder rápido (no esté ocupado)

Reducir transferencias de datos (ahorra tiempo y dinero)

Conseguir un buen posicionamiento en buscadores

Sin embargo, la realidad suele ser diferente.

CONCEPTOS

- Generalmente, usuarios mediante navegadores

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

Crawlers

Karmacracy GoogleBot BingBot TwitterBot

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

Crawlers

Elementos dañinos


Spammers Atacantes Harvester Piratas

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

Crawlers

Elementos dañinos

Navegadores


Spammers Atacantes Harvester Piratas

Chrome Firefox Safari Opera

- Crawlers (robots o sistemas automatizados)

- Sistemas dañinos (malware, zombies, atacantes...)

- Generalmente, navegadores (Chrome, Firefox, Safari...)

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

- Crawlers (robots o sistemas automatizados)

- Sistemas dañinos (malware, zombies, atacantes...)

- Generalmente, navegadores (Chrome, Firefox, Safari...)

Esquema básico

Cliente

www.emezeta.com

Web (HTML)

evolutionoftheweb.com

ESQUEMA CLIENTE-SERVIDOR

- Máquina donde se aloja nuestra web

- Puede ser una, o toda una red de máquinas

- Escoger entre varios tipos de servidores

Esquema básico

Servidor

www.emezeta.com

Web (HTML)

- Ideal para enfocarse: escribir o publicar

- Coste 0: Sin gastos de mantenimiento

- Limitaciones o restricciones concretas

- Suelen mostrar publicidad

Tipo de servidor

Hosting gratuito

SO

- Muy barato

- Overselling: Ofrecen más de lo que pueden

- Tus “vecinos” repercuten en tu sitio

Tipo de servidor

Servidor Compartido

SO

- Estabilidad y rendimiento

- Acceso completo al sistema (incl. root)

- Más caros que los servidores compartidos

Tipo de servidor

Servidor VPS (Virtual-Dedicado)

SO

- Máquina íntegra para nosotros

- No tenemos “vecinos”

- Suelen ser bastante caros

Tipo de servidor

Servidor Dedicado

SO

- Depende del uso (se adapta según necesidades)

- Ideal para sitios con mucho tráfico

- Administración y mantenimiento complejo

Tipo de servidor

Servidor Dinámico (o elástico)

SO

- El cliente pide una web al servidor

Esquema básico

Solicitud o petición

www.emezeta.com

Web (HTML)

- El servidor devuelve la página pedida al cliente

Esquema básico

Respuesta

www.emezeta.com

Web (HTML)

- Se necesita conocer la IP del servidor

- Una vez la conocemos, realizamos solicitud

- Se suele tardar entre 20-120ms

Esquema avanzado

DNS

www.emezeta.com??

IP 42.42.42.42

dns connect sslsend wait receive

- Se realiza y establece una conexión al servidor

- Se envía confirmación de conexión correcta

- Si se usa SSL (HTTPS) se negocia comunicación segura

Esquema avanzado

Conexión

Puedo pasar?

Ok, pasa.


- Se envía la petición del recurso al servidor

- Se envía confirmación de que existe (o no)

Esquema avanzado

Envío

Quiero index.html

Ok, lo tengo


- El servidor procesa los datos

- O espera si está ocupado con otra petición

- La red no tiene efecto en este paso

Esquema avanzado

Espera

Espera mientras preparo tu pedido


- El servidor envía los datos al cliente

- Se envía la cabecera y datos solicitados

Esquema avanzado

Recepción

Toma index.html


- Conexión y ancho de banda del cliente

- Conexión y ancho de banda del servidor

- Recepción además depende del tamaño del archivo

Esquema avanzado


Dependen de la red

- Este proceso ocurre en cada recurso del sitio web

- Imágenes, html, css, javascript, flash, etc...

- Suma total: tiempo considerable

Esquema avanzado

Una web = varios recursos

- Extensión para Firefox (versión Lite para Chrome)

- Permite, entre otras cosas, analizar descarga de recursos

Análisis de recursos

getfirebug.com

- Modalidad de análisis desde web externa

- Ideal si nuestra conexión es lenta


tools.pingdom.com/fpt


developers.google.com/speed/pagespeed/insights

- Consejos ordenados por prioridades


tools.pingdom.com/fpt

www.webpagetest.org

TECNOLOGÍAS

- Información, datos, contenido.

- Bases de datos: MySQL, MariaDB, SQLite, MongoDB...

- Datos: Archivos XML, JSON...

Tecnologías

Contenido

- Tecnología que “crea” el sitio

- Lenguajes: PHP, JSP, Python, Perl...

- Frameworks: Django, Ruby on rails, CakePHP...

Tecnologías

Motor

- Estructura del sitio

- Lenguaje de etiquetado: HTML4, XHTML, HTML5...

- Un código válido ayuda en la compatibilidad

Tecnologías

Presentación (Estructura)

Tecnologías

Presentación (Estructura)

validator.w3.org

- Diseño, alineación y estilos

- Recursos de estilo: CSS, tipografías, imágenes...

Tecnologías

Presentación (Apariencia)

- Interacción con el usuario (Javascript)

- Procedimientos desde el lado del cliente

- Frameworks Javascript: JQuery, Prototype...

Tecnologías

Presentación (Interactividad)

- La petición de una URL, pasa por cada sección

- GET: Pedimos una URL específica

- POST: Enviamos datos (comentarios, formularios...)

Peticiones

Peticiones

- Una petición específica de una parte de un artículo

- No pasa por cada sección (ahorra tiempo y recursos)

Peticiones

Peticiones asíncronas (AJAX)

ESTRUCTURA

Las cosas cambian

- Información relacionada con el servidor

- Código de error HTTP (famosos 404, 301, 200...)

- Software de servidor web

Recurso servido

Cabecera de servidor


Archivo HTML

- Título del documento

- Codificación del documento

- Enlace a archivos externos (CSS, JS...)

Recurso servido

<head>


Archivo HTML

<head> del HTML

- Cuerpo de la página (parte visible)

Recurso servido

<body>


Archivo HTML

<head> del HTML

<body> del HTML

CONSEJOS

- Evitar sensación de espera (latencia de carga)

Velocidad visual

5seg1seg 10seg

- Colocar estilos CSS al principio (bajo <head>)

- Colocar posibles JS al final (sobre </body>)

- Eliminar JS duplicados y combinar si es posible

Velocidad visual

5seg1seg 10seg

loads.in

- Colocar estilos CSS al principio (bajo <head>)

- Colocar posibles JS al final (sobre </body>)

- Eliminar JS duplicados y combinar si es posible

Velocidad visual

5seg1seg 10segCompactar JS o CSS:Ayuda a minimizar el ancho de banda

- Eliminar espacios, líneas en blanco, comentarios...

www.refresh-sf.com/yui/

Jquery.js246KB

Jquery.min.js93KB

SISTEMA DE CACHÉ

Reduce:- Ancho de banda

- Carga del servidor

- Tiempo

Sistema de caché

PRIMER ACCESO

HTML CSS JSLOGO FONDO IMG1 IMG2

Cache del navegador:

- Archivos con “tiempo de caducidad”

Sistema de caché

SEGUNDO ACCESO

HTML

CSS JSLOGO FONDO IMG1 IMG2

CACHE DEL NAVEGADOR

- Expire

- Cache-control

- E-Tags

Caché por niveles

A nivel de cliente

- HTML estático

- APC: Alternative PHP Cache

- Memcached: Caché en RAM

Caché por niveles

A nivel de servidor

COMPRESIÓN

- El servidor comprime los datos (antes de enviarlos)

Compresión al vuelo

mod_deflate

www.emezeta.com

50KB


- Los datos viajan por la red (comprimidos)


mod_deflate

www.emezeta.com

Compressed HTML

50KB9KB



- El cliente descomprime los datos y los usa


mod_deflate

www.emezeta.com

Compressed HTML

50KB9KB50KB





mod_deflate

www.emezeta.com

Compressed HTML

50KB9KB50KB

95KB200 hits 19MB





mod_deflate

www.emezeta.com

Compressed HTML

50KB9KB50KB

95KB200 hits 19MB

23KB200 hits 4,6MB





mod_deflate

www.emezeta.com

Compressed HTML

50KB9KB50KB

95KB200 hits 19MB

23KB200 hits 4,6MB

HTML JS CSS

JPG PNG MP3

IMÁGENES

- Imágenes con texturas

- Fotografías con alto nivel de detalle

Imágenes

Imágenes con pérdidas

IMÁGENESCON PÉRDIDAS

IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES

- Dibujos “lisos”

- Bocetos, pocos colores

Imágenes

Imágenes sin pérdidas



- Imágenes en movimiento

Imágenes

Animaciones



- Imágenes escalables (útil para variar tamaño)

Imágenes

Imágenes vectoriales




Imágenes




Formato SVG


Imágenes




luci.criosweb.ro/riot/

Imágenes con peso considerable

Imágenes

Lazy Load (carga perezosa)

81KB

82KB

73KB

108KB

4,17MB


Sólo se transfiere imagen de carga

Imágenes


2KB

-

-

-

2KB



A medida que desplaza el usuario

se cargan las imágenes

Imágenes


81KB

82KB

-

-

165KB





Imágenes


81KB

82KB

73KB

-

238KB





Ahorra tiempo y transferencia

Imágenes


81KB

82KB

73KB

108KB

346KB





Imágenes


81KB

82KB

73KB

108KB

346KB

www.appelsiini.net/projects/lazyload

REDUCCIÓN DE PETICIONES

CSS Sprites

CSS sprites

Unir todas las imágenes en una sola

Ahorra número considerable de peticiones

Imágenes en línea (Data URL)

data:image/png;base64,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

glkwAAAAAElFTkSuQmCC





Reducir número de peticiones

Útil sólo para iconos pequeños





Reducir número de peticiones

Útil sólo para iconos pequeños

IE8, como máximo 32KB

Icono de 16x16 pixels que representa la web

favicon.ico

- Recibe muchísimas peticiones. Ej: +50.000 al mes- Optimizar al máximo y hacerlo “cacheable”

favicon.ico 3KB x50.000 = 150MB/MES

favicon.ico 0,66KB x50.000 = 33MB/MES

Frameworks y fuentes comunes desde una misma URL

Diferentes sitios usan misma URL (ya cacheada en cliente)

www.google.com/webfontsdevelopers.google.com/speed/libraries/devguide

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

http://fonts.googleapis.com/css?family=Belgrano

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

http://fonts.googleapis.com/css?family=Belgrano

AUMENTAR RENDIMIENTO

Contenido estático

Separar en subdominios

- Descargas paralelas (limitado a 2 en HTTP 1.1)

www.emezeta.com static.emezeta.com

Contenido estático

Separar en subdominios

- Descargas paralelas (limitado a 2 en HTTP 1.1)


- Contenido estático sin cookies (tráfico inútil)

Contenido estático

Balancear con otro servidor

- Amazon S3: Alojamiento “mayorista”

- 0,1€ cada TB/mes (y reduciendo)

- 0,008€ cada 10.000 peticiones/mes (y reduciendo)


1995 2004

Muy potente y extendido

Consume muchamemoria

Buen rendimiento y ligero

No compatible con algunas funciones

- Nginx recibe todas las peticiones

- Si se trata de contenido estático, lo sirve Nginx

- Si se trata de contenido dinámico, lo sirve Apache

Nginx como proxy inverso

Aligerar carga del servidor

- Nginx recibe todas las peticiones

- Si se trata de contenido estático, lo sirve Nginx

- Si se trata de contenido dinámico, lo sirve Apache

Nginx como proxy inverso

Aligerar carga del servidor

Servidores a nivel mundial

www.google.com/webmasters/tools

Añadir sitios

1. Usando Google Analytics

2. Usando un archivo html

3. Etiqueta meta en <head>

4. Proveedor DNS

Proceso de verificación

Se puede orientar una web a un país concreto

Mejora el posicionamiento para ese país

Empeora el posicionamiento para otros

Configuración

Se puede modificar la frecuencia de rastreo(no siempre)

Información actualizada en el buscador de Google

Incrementa el tráfico en el sitio (puede colapsarlo)

Configuración

Especificar parámetros URL representativos(medidores, campañas, etc...)

Configuración

Problemas de rastreo(útil: errores de servidor o de acceso)

Salud

Estadísticas de rastreo

- Páginas rastreadas al día (imagen superior)

- Kilobytes descargados al día

- Tiempo de descarga de una página (en mseg)

Salud

Robots.txt

Sugerencias para robots: «Esto NO se mira»

User-agent: GooglebotDisallow: /pagina/*

Robots.txt

Sistema para sugerir a los crawlers donde no buscar

- Un buen crawler obedecerá el robots.txt

- No todos harán caso de las recomendaciones

Robots.txt

Impedir acceso y reducir sobrecarga del servidor

Prohibir indexación de ciertas zonas en buscadores

Eliminar contenido duplicado en buscadores

No bloquea “a la fuerza” a ciertos robots

Estado y funcionamiento del robots.txt

Salud

Consultas de búsqueda (impresiones, clicks, páginas...)

Tráfico

Tráfico

Consultas de búsqueda (impresiones, clicks, páginas...)

Actividad de +1 (Google Plus)

Listado (XML) con todos los recursos de tu web

Sitemap.xml: Artículos Imgmap.xml: Imágenes

Mapas de sitio (Sitemaps)

Mapas de sitio (Sitemaps)

Consejos para mejorar indexación (posicionamiento)

Descripción (meta):

- Duplicada- Demasiado larga

- Demasiado corta

Título:

- Ausente

- Duplicado

- Demasiado largo

- Demasiado corto- No informativo

Google Webmaster Tools (Otros)

- Sistema de mensajes

- Detección de malware

- Eliminar URL de Google

www.google.com/webmasters/tools

www.bing.com/toolbox/webmaster

CDN: RED DE DISTRIBUCIÓN DE CONTENIDOS

CDN: Red de distribución de contenidos

Servidores en EEUU (peticiones más lentas)


Servidores en España (peticiones más rápidas)

www.cloudflare.com


Servidores más cercanos distribuyen copias (muy rápido)


Actualmente: 14 Data Centers en todo el mundo

Esquema con CDN Cloudflare

Solicitud o petición con un CDN

www.emezeta.com

Web (HTML)Static resources

Más velocidad (servir recursos más rápido y cerca)



www.emezeta.com



Ahorro de transferencia y CPU para el servidor final



www.emezeta.com

Web (HTML)Static resources Static resources


Ahorro de transferencia y CPU para el servidor final

Servicio gratuito (servicios premium más avanzados)



www.emezeta.com


Activar los dominios que pasarán antes por el CDN

Prerequisitos para Cloudflare

Redirección de DNS hacia Cloudflare

Recibir IPs reales en el servidor (en lugar de IP del CDN)

Nota: Analytics, Adsense (u otros) necesitan IPs reales

Prerequisitos para Cloudflare

Instalación de módulo para IP reales

- Tráfico de usuarios

- Crawlers y robots

- Amenazas y ataques

Información analítica

Informes del tráfico recibido

- Porcentaje de tráfico regular, robots y amenazas

- Nivel de seguridad ante ataques

- Procedencia de ataques por países


Ejemplo de Emezeta.com (4 May al 4 Jun)


Ahorro de peticiones y transferencia

- Peticiones: 28 mill. 2 mill (93% menos)

- Transferencia: 431GB 103GB (76% menos)


Peticiones de robots de buscadores

- Actividad recibida de los crawlers de buscadores

Control de amenazas

Panel de control de amenazas

- Gestión de actividad

- Tipo de amenaza y nivel de peligro

- Posibilidad de incluirlo en una lista blanca/negra

Cloudflare: Apps

Apps externas

- Multitud de apps externas complementarias

Cloudflare: Apps

Apps externas

- Multitud de apps externas complementarias

Protección contra scrapping

Hotlinking

Protección de robo de imágenes

- Uso de tus imágenes en otras webs (por otras personas)

- Repercute en la transferencia del servidor

- Si está muy extendida, puede tirar el servidor a peticiones

Mi web Mi web

Otra web

Otra web

Otra web

Otra web

Taringa Otra web

x Visitantes

Planes de Cloudflare

Planes

- Gratuito: CDN, seguridad básica, panel de control, etc...

- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)

RONDA DE PREGUNTAS

Créditos

EnlacesLimitaciones de Blogger: http://support.google.com/blogger/bin/answer.py?hl=es&answer=42348

Robots. Accesos no humanos a la web: http://www.emezeta.com/articulos/robots-accesos-no-humanos-a-la-web

Robots.txt. Todo lo que debería saber: http://www.emezeta.com/articulos/robots-txt-todo-lo-que-deberia-saber

htaccess. Bloqueando a la fuerza: http://www.emezeta.com/articulos/htaccess-bloqueando-a-la-fuerza

Creando imágenes en línea (Data URL): http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Crear rollover con CSS Sprites: http://www.emezeta.com/articulos/crear-rollover-con-css-sprites

Optimizar imágenes: http://www.emezeta.com/articulos/12-aplicaciones-para-optimizar-imagenes

Formatos de imagen: http://www.emezeta.com/articulos/formatos-de-imagen-guia-de-optimizacion

http://support.google.com/blogger/bin/answer.py?hl=es&answer=42348

http://www.emezeta.com/articulos/robots-accesos-no-humanos-a-la-web

http://www.emezeta.com/articulos/robots-txt-todo-lo-que-deberia-saber

http://www.emezeta.com/articulos/htaccess-bloqueando-a-la-fuerza

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

http://www.emezeta.com/articulos/crear-rollover-con-css-sprites

http://www.emezeta.com/articulos/12-aplicaciones-para-optimizar-imagenes

http://www.emezeta.com/articulos/formatos-de-imagen-guia-de-optimizacion

optimización del rendimiento web

Technology