Optimización del rendimiento web

José Román Hernández - Manz www.emezeta.com

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

Esquema básico www.emezeta.com Web (HTML) Cliente- Generalmente, usuarios mediante navegadores

Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBot Web (HTML) Cliente

Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBotElementos dañinos Web (HTML) Spammers Atacantes Harvester Piratas Cliente

Crawlers Esquema básico www.emezeta.com Karmacracy GoogleBot BingBot TwitterBotElementos dañinos Web (HTML) Spammers Atacantes Harvester Piratas ClienteNavegadores Chrome Firefox Safari Opera

Esquema básico www.emezeta.com Web (HTML) Cliente - Crawlers (robots o sistemas automatizados) - Sistemas dañinos (malware, zombies, atacantes...)- Generalmente, navegadores (Chrome, Firefox, Safari...)

Esquema básico www.emezeta.com Web (HTML) Cliente - Crawlers (robots o sistemas automatizados) evolutionoftheweb.com - Sistemas dañinos (malware, zombies, atacantes...)- Generalmente, navegadores (Chrome, Firefox, Safari...)

ESQUEMA CLIENTE-SERVIDOR

Esquema básico www.emezeta.com Web (HTML) Servidor - Máquina donde se aloja nuestra web- Puede ser una, o toda una red de máquinas - Escoger entre varios tipos de servidores

Tipo de servidor SO Hosting gratuito- Ideal para enfocarse: escribir o publicar - Coste 0: Sin gastos de mantenimiento - Limitaciones o restricciones concretas - Suelen mostrar publicidad

Tipo de servidor SO Servidor Compartido - Muy barato- Overselling: Ofrecen más de lo que pueden - Tus “vecinos” repercuten en tu sitio

Tipo de servidor SO Servidor VPS (Virtual-Dedicado) - Estabilidad y rendimiento - Acceso completo al sistema (incl. root)- Más caros que los servidores compartidos

Tipo de servidor SO Servidor Dedicado- Máquina íntegra para nosotros - No tenemos “vecinos” - Suelen ser bastante caros

Tipo de servidor SO Servidor Dinámico (o elástico)- Depende del uso (se adapta según necesidades) - Ideal para sitios con mucho tráfico - Administración y mantenimiento complejo

Esquema básico www.emezeta.com Web (HTML) Solicitud o petición- El cliente pide una web al servidor

Esquema básico www.emezeta.com Web (HTML) Respuesta- El servidor devuelve la página pedida al cliente

Esquema avanzado www.emezeta.com?? IP 42.42.42.42dns connect sslsend wait receive DNS - Se necesita conocer la IP del servidor - Una vez la conocemos, realizamos solicitud - Se suele tardar entre 20-120ms

Esquema avanzado Puedo pasar? Ok, pasa. dns connect sslsend wait receive Conexión - 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 Quiero index.html Ok, lo tengodns connect sslsend wait receive Envío - Se envía la petición del recurso al servidor - Se envía confirmación de que existe (o no)

Esquema avanzado Espera mientras preparo tu pedidodns connect sslsend wait receive Espera - El servidor procesa los datos - O espera si está ocupado con otra petición - La red no tiene efecto en este paso

Esquema avanzado Toma index.htmldns connect sslsend wait receive Recepción - El servidor envía los datos al cliente - Se envía la cabecera y datos solicitados

Esquema avanzado dns connect sslsend wait receive Dependen de la red - 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 Una web = varios recursos- Este proceso ocurre en cada recurso del sitio web - Imágenes, html, css, javascript, flash, etc... - Suma total: tiempo considerable

Análisis de recursos getfirebug.com - Extensión para Firefox (versión Lite para Chrome)- Permite, entre otras cosas, analizar descarga de recursos

Análisis de recursos tools.pingdom.com/fpt- Modalidad de análisis desde web externa - Ideal si nuestra conexión es lenta

Análisis de recursosdevelopers.google.com/speed/pagespeed/insights - Consejos ordenados por prioridades

Análisis de recursostools.pingdom.com/fptwww.webpagetest.org

TECNOLOGÍAS

Tecnologías Contenido - Información, datos, contenido.- Bases de datos: MySQL, MariaDB, SQLite, MongoDB... - Datos: Archivos XML, JSON...

Tecnologías Motor - Tecnología que “crea” el sitio - Lenguajes: PHP, JSP, Python, Perl...- Frameworks: Django, Ruby on rails, CakePHP...

Tecnologías Presentación (Estructura) - Estructura del sitio- Lenguaje de etiquetado: HTML4, XHTML, HTML5... - Un código válido ayuda en la compatibilidad

TecnologíasPresentación (Estructura) validator.w3.org

Tecnologías Presentación (Apariencia) - Diseño, alineación y estilos- Recursos de estilo: CSS, tipografías, imágenes...

Tecnologías Presentación (Interactividad) - Interacción con el usuario (Javascript) - Procedimientos desde el lado del cliente- Frameworks Javascript: JQuery, Prototype...

Peticiones Peticiones - La petición de una URL, pasa por cada sección - GET: Pedimos una URL específica- POST: Enviamos datos (comentarios, formularios...)

Peticiones Peticiones asíncronas (AJAX) - Una petición específica de una parte de un artículo- No pasa por cada sección (ahorra tiempo y recursos)

ESTRUCTURA

Las cosas cambian

Recurso servido Cabecera de servidor Archivo HTML Cabecera de servidor - Información relacionada con el servidor- Código de error HTTP (famosos 404, 301, 200...) - Software de servidor web

Recurso servido Cabecera de servidor <head> del HTML Archivo HTML <head> - Título del documento - Codificación del documento- Enlace a archivos externos (CSS, JS...)

Recurso servido Cabecera de servidor <head> del HTML <body> del HTML Archivo HTML <body>- Cuerpo de la página (parte visible)

CONSEJOS

Velocidad visual1seg 5seg 10seg - Evitar sensación de espera (latencia de carga)

Velocidad visual1seg 5seg 10seg - Colocar estilos CSS al principio (bajo <head>) - Colocar posibles JS al final (sobre </body>) - Eliminar JS duplicados y combinar si es posible loads.in

Velocidad visual Jquery.js Jquery.min.js 246KB 93KB1seg 5seg Compactar JS o CSS: 10seg Ayuda a minimizar el ancho de banda - Eliminar espacios,CSS al principio (bajo <head>) - Colocar estilos líneas en blanco, comentarios... - Colocar posibles JS al final (sobre </body>) www.refresh-sf.com/yui/ - Eliminar JS duplicados y combinar si es posible

SISTEMA DE CACHÉ

Sistema de cachéPRIMER ACCESOHTML LOGO CSS JS FONDO IMG1 IMG2 Reduce: - Ancho de banda - Carga del servidor - Tiempo

Sistema de cachéSEGUNDO ACCESO CACHE DEL NAVEGADOR LOGO CSS JS FONDO IMG1 IMG2HTML Cache del navegador: - Archivos con “tiempo de caducidad”

Caché por nivelesA nivel de cliente - Expire - Cache-control - E-Tags

Caché por niveles A nivel de servidor - HTML estático- APC: Alternative PHP Cache- Memcached: Caché en RAM

COMPRESIÓN

Compresión al vuelo www.emezeta.com 50KB mod_deflate- El servidor comprime los datos (antes de enviarlos)

Compresión al vuelo www.emezeta.com Compressed HTML 9KB 50KB mod_deflate- El servidor comprime los datos (antes de enviarlos) - Los datos viajan por la red (comprimidos)

Compresión al vuelo www.emezeta.com Compressed HTML50KB 9KB 50KB mod_deflate - El servidor comprime los datos (antes de enviarlos) - Los datos viajan por la red (comprimidos) - El cliente descomprime los datos y los usa

Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 9KB 50KB mod_deflate - El servidor comprime los datos (antes de enviarlos) - Los datos viajan por la red (comprimidos) - El cliente descomprime los datos y los usa

Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 9KB 50KB mod_deflate - El servidor comprime los datos (antes de enviarlos) 200 23KB 4,6MB - Los datos viajan por la red (comprimidos) hits - El cliente descomprime los datos y los usa

Compresión al vuelo www.emezeta.com 200 95KB hits 19MB Compressed HTML50KB 9KB 50KB mod_deflate HTML JS CSS - El servidor comprime los datos (antes de enviarlos) 200 23KB 4,6MB - Los datos viajan por la red (comprimidos) hits - El cliente descomprime los datos y los usa JPG PNG MP3

IMÁGENES

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes con pérdidas - Imágenes con texturas - Fotografías con alto nivel de detalle

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes sin pérdidas - Dibujos “lisos” - Bocetos, pocos colores

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Animaciones - Imágenes en movimiento

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño)

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño) Formato SVG

Imágenes IMÁGENES IMÁGENES ANIMACIONES VECTORIALESCON PÉRDIDAS SIN PÉRDIDAS Imágenes vectoriales - Imágenes escalables (útil para variar tamaño) luci.criosweb.ro/riot/

Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB 4,17MB73KB108KB

Imágenes Lazy Load (carga perezosa)2KB Imágenes con peso considerable- Sólo se transfiere imagen de carga 2KB--

Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 165KB A medida que- desplaza el usuario se cargan las imágenes-

Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 238KB A medida que73KB desplaza el usuario se cargan las imágenes-

Imágenes Lazy Load (carga perezosa)81KB Imágenes con peso considerable82KB Sólo se transfiere imagen de carga 346KB A medida que73KB desplaza el usuario se cargan las imágenes108KB Ahorra tiempo y transferencia

Imágenes Lazy Load (carga perezosa) 81KB Imágenes con peso considerable 82KB Sólo se transfiere imagen de carga 346KB A medida que 73KB desplaza el usuario se cargan las imágeneswww.appelsiini.net/projects/lazyload 108KB

REDUCCIÓN DE PETICIONES

CSS Sprites CSS sprites Unir todas las imágenes en una solaAhorra número considerable de peticiones

Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6IuX2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTUAUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyFMw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0 A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcLbhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYqOPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0WvjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RRYEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxzP5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2uWjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXHApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVVilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+KvIQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyKAsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6CcBkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM 7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9 glkwAAAAAElFTkSuQmCC

Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6IuX2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTUAUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyFMw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0 A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcLbhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYqOPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0WvjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR Reducir número de peticionesYEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxzP5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2uWjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH Útil sólo para iconos pequeñosApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVVilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+KvIQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyKAsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6CcBkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM 7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9 glkwAAAAAElFTkSuQmCC

Imágenes en línea (Data URL)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAMFBMVEUAAAAOCAclJSVJY3hjnMaceS h1dn6rm4P4yy5jnMbExcf/0TL////+/v4ODg4PDw885HYiAAAGxklEQVR42u2b2XLjOAxFR4UCwFwH//+7I5JSwzYkgSwvPQ9zq9u9yBGOsJup/PP7l/UfBgBURRX4PoBV88Jcyq0UZoF9FQCqCuVy+yNmfBFA1X5BfHsQC2ooDPZxAOj6IuX2pMLMok32WYB6f+XbgbiZNgg+CWCrA3Bsf7drYh8EAOnZ8+/vEOjnACBiJw6wP28xtU8BmBig5RDg16X4FAB0ZThyQCnsFdjTUAUfAEDNgoMaFIUqNvNcG1N7fT9AqwF+IiiCXiA1/dGusrCqyhsBvAhDChQx57NOx6yr2N5eBYrYBRl+GdtV1kEAKKYATKDPDtC7y7TZ7wCSAoAL61wnFIoOcMm9/ezW21BhzE1D4XIBUFpRaBMjB+h3UMU4AI4ADH5DZh1xgAMzl8I2DGB8kANYrF9z+0opwD7X2P2YA8Rh2OCtV0Fx+4yBkWAdgG9s4wD2VIhFHM39L4AmBagwpdIJkhxIXCA4sC/XDtAaeFpf/BnGACJBT3uo8K14/ilGfO/bRAIQKyFMw5bP7n7kLWjlvfOirkIC4MLhUGbeH18x0IQfp1pZxZoAuEy5R8/v0gPAAgj9jsgozrUEIDqBufDOwNweX5ZlcC3VONcGAFxg7nm0 A6gyDMuy8BCAhVxOciDIUJ//LgIMWarGdiHwUylh/uM5tHmB9xSwpYl12gHsYZvwgKoKeQowLZtooAyUQ/pNAwjafO4uKMzLLm bWqQAwZgF8Addb80G5A+AKAMV4AshoJ4xBMK0trf7aAbhJKkSfknkvHR5GUbBtptdJTDtADwKrimKkl7NNAcR+0IPA7AC1FFgE1Ue5fX3tlMwA5V4HDsDKC0x7ovT3KE4GCVsGkGsjoA7AC6sqoZ1nmFTjCjQUKJe42c8AGE4JCivvRaDaXluhisJ63aqbdzFmAExYcLbhFl5FzNW6EN8KrZaFEAZgcMA4QK06Oa/s/eFVrDqbFUIWyj9xQAZw41MXdCeQoO1kBtG2fQaCUAJDAH6HUxf4jgu/b8VwzABg cwDGZ16zfSj2hNPHnu2YSQDSKtDieROveIYqHnu2YyYZmJ2UUjnzG0ph3NkMg8tTxdcQmzwf4FJOHQdSu7cYR2fHDAEYAoCIYqOPZ/TR6XEGWCcAT9h3AOFS7da53+c/iwUAizGPhOBQgQmAY/PW7E6+Wi1mfSQwDvbHAbi9xAK2Nm72lg9xlBAFP+plGTol8+xj Lh2gjZ3iABABYNYw2u+rNVaFmd1+DuBfyi0GlaRngfvbTUIJA/uDMOv0OSH65tcT8dYn3R560VBu14LMAfgJkKfQKulrRvWqW0WvjxwBkwDxw+S2ALTm5FZ9DqUEowDugnMx5r9hoDp7Wn5JMOkCf6M15QC+T+cusFECgYpQlShs5Kz4FKHIPACUiH42VQicA+RR Reducir número de peticionesYEwmAaRbd1WE9LC6jADYkPmfKCLkO+GJioZd5ELanz6KNFvJTglkvArMHz+IJPloJpwUYp4C8MfPCBwgJ2AkDsjsexQCQB4FBzCxzP5PIkIEyBqSA2Qt3igHkNGj2ghg6Yjx/EtcEADiEWEEQGpf3X7iggAQEITv/VDY3H6SAKnIxk5KG0SXqEDTFmhuP4mBAyQyNAlAA2uWjgJoAEjUF+LfPACDkhmA8Rkg3wHIHZCLbB4gH8PycQBkDvgwAHDN90EAUxFFsmfTia13JKFQVxKBjwFgoY5g8xEgekMjAjUJIXH Útil sólo para iconos pequeñosApwC0Wm8IyQ4eRccAmAWQjcCGzLtIKJmGowCV4DgG5uaDSHCSg7M5ILL5ILEenlSPLpNOAhjJqqc0NEDr/12PfYpZEFeyXNJEVVilqv1f6dqhdJSIZLMAIEfoGlx7ZPvrqpACASCLgRMMr13eHajp4nNBXgeOsNCw/Xtcd5/NAbgLnCE1T9i/iigu5VMAngWuNP3E9i+Kv IE8, como máximo 32KBIQEIAlC7gQShNwNNTC/kMgjwbKcdn9Et1FXvepdaBLAnKDd66ggqApnmdMFSwBSgs1ue56gRw/LgZIjmmwsezz9z8fmJE+LhDyKAsCMTO/LeuAMiJY3A4h3tqFjMAjNhyDf+64aMuGqfIXeALAZPwOwqw4mpC8BoFVfkgLXAHgNwD2fR6DL3gvg9ocAYi8ge60K6CcBkOshQvLiD7vJz0wEYhIQXgRQSj/1Bj0A2IsAGDgGjtCxCB1gVpLuYVcxILwMgPQkPio6YB7AJcMOiC4gewMAKMuAKKEYgBxg/iyM 7GqVIbf/GoDRVAB8lcFvAvBiEEivuZNv3b5MQPrFnzsGUWL/YwC+aQX73wOITvAE+wqAH850ufnvALgAXQV74Rb///T9v/derFX9 glkwAAAAAElFTkSuQmCC

favicon.ico Icono de 16x16 pixels que representa la web - Recibe muchísimas peticiones. Ej: +50.000 al mes - Optimizar al máximo y hacerlo “cacheable”favicon.ico 3KB x50.000 = 150MB/MESfavicon.ico 0,66KB x50.000 = 33MB/MES

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js http://fonts.googleapis.com/css?family=Belgrano Frameworks y fuentes comunes desde una misma URLDiferentes sitios usan misma URL (ya cacheada en cliente) www.google.com/webfonts developers.google.com/speed/libraries/devguide

AUMENTAR RENDIMIENTO

Contenido estáticowww.emezeta.com static.emezeta.com Separar en subdominios - Descargas paralelas (limitado a 2 en HTTP 1.1)

Contenido estáticowww.emezeta.com static.emezeta.com Separar en subdominios - Descargas paralelas (limitado a 2 en HTTP 1.1) - Contenido estático sin cookies (tráfico inútil)

Contenido estáticowww.emezeta.com static.emezeta.com 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 2004Muy potente y Buen rendimiento extendido y ligeroConsume mucha No compatible con memoria algunas funciones

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 todas las peticiones - Nginx recibe a nivel mundial - Si se trata de contenido estático, lo sirve Nginx- Si se trata de contenido dinámico, lo sirve Apache

www.google.com/webmasters/tools

Añadir sitios

Proceso de verificación 1. Usando Google Analytics 2. Usando un archivo html 3. Etiqueta meta en <head> 4. Proveedor DNS

ConfiguraciónSe puede orientar una web a un país concreto Mejora el posicionamiento para ese país Empeora el posicionamiento para otros

ConfiguraciónSe puede modificar la frecuencia de rastreo (no siempre)Información actualizada en el buscador de GoogleIncrementa el tráfico en el sitio (puede colapsarlo)

ConfiguraciónEspecificar parámetros URL representativos (medidores, campañas, etc...)

Salud 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)

Robots.txtSugerencias para robots: «Esto NO se mira» User-agent: Googlebot Disallow: /pagina/*

Robots.txtSistema para sugerir a los crawlers donde no buscar - Un buen crawler obedecerá el robots.txt - No todos harán caso de las recomendaciones

Robots.txtImpedir acceso y reducir sobrecarga del servidorProhibir indexación de ciertas zonas en buscadoresEliminar contenido duplicado en buscadoresNo bloquea “a la fuerza” a ciertos robots

SaludEstado y funcionamiento del robots.txt

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

Actividad de +1 (Google Plus)

Mapas de sitio (Sitemaps)Sitemap.xml: Artículos Imgmap.xml: Imágenes Listado (XML) con todos los recursos de tu web

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/toolswww.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)

CDN: Red de distribución de contenidosServidores en España (peticiones más rápidas)

www.cloudflare.com

CDN: Red de distribución de contenidosServidores más cercanos distribuyen copias (muy rápido)

CDN: Red de distribución de contenidosActualmente: 14 Data Centers en todo el mundo

Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN

Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN Más velocidad (servir recursos más rápido y cerca)

Esquema con CDN Cloudflarewww.emezeta.com Static resources Static Web (HTML) resources Solicitud o petición con un CDN Más velocidad (servir recursos más rápido y cerca) Ahorro de transferencia y CPU para el servidor final

Esquema con CDN Cloudflarewww.emezeta.com Static resources Web (HTML) Solicitud o petición con un CDN Más velocidad (servir recursos más rápido y cerca) Ahorro de transferencia y CPU para el servidor final Servicio gratuito (servicios premium más avanzados)

Prerequisitos para Cloudflare Redirección de DNS hacia CloudflareActivar los dominios que pasarán antes por el CDN

Prerequisitos para Cloudflare Instalación de módulo para IP realesRecibir IPs reales en el servidor (en lugar de IP del CDN) Nota: Analytics, Adsense (u otros) necesitan IPs reales

Información analíticaInformes del tráfico recibido - Tráfico de usuarios - Crawlers y robots - Amenazas y ataques

Información analíticaEjemplo de Emezeta.com (4 May al 4 Jun)- Porcentaje de tráfico regular, robots y amenazas - Nivel de seguridad ante ataques - Procedencia de ataques por países

Información analítica Ahorro de peticiones y transferencia - Peticiones: 28 mill. 2 mill (93% menos)- Transferencia: 431GB 103GB (76% menos)

Información analítica 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

Protección contra scrapping Cloudflare: Apps Apps externas- Multitud de apps externas complementarias

Hotlinking Otra Otra Otra web web web Otra Taringa Otra web web x Visitantes Mi web Mi web 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

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éditosEnlaces Limitaciones 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://www.emezeta.com	5382
http://feeds2.feedburner.com	342
http://blogdecomputacion.com	339
http://www.animeaf.com	106
http://www.bonweb.fr	30
http://feeds.feedburner.com	13
https://twimg0-a.akamaihd.net	4
http://www.promocionweb.com.mx	2
https://si0.twimg.com	2
http://www.ofelio.com	2
https://twitter.com	2
http://mysyndicaat.com	1
http://www.newsblur.com	1

Optimización del rendimiento web

by Román Hernández on Jul 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 6,226

Statistics

Optimización del rendimiento web Presentation Transcript