Optimización del rendimiento web
Upcoming SlideShare
Loading in...5
×
 

Optimización del rendimiento web

on

  • 19,485 views

Presentación de la conferencia "Optimización del rendimiento web" impartida en la TLP2k12, en la jornada de desarrolladores (Tenerife LAN Party 2012). ...

Presentación de la conferencia "Optimización del rendimiento web" impartida en la TLP2k12, en la jornada de desarrolladores (Tenerife LAN Party 2012).

Resumen y explicación, aquí:
http://www.emezeta.com/articulos/conferencia-optimizar-el-rendimiento-web

Statistics

Views

Total Views
19,485
Views on SlideShare
3,212
Embed Views
16,273

Actions

Likes
2
Downloads
92
Comments
1

18 Embeds 16,273

http://www.emezeta.com 15380
http://blogdecomputacion.com 344
http://feeds2.feedburner.com 342
http://www.animeaf.com 106
http://www.bonweb.fr 30
http://apuntaweb.blogspot.com 21
http://apuntaweb.blogspot.com.es 19
http://feeds.feedburner.com 13
https://twimg0-a.akamaihd.net 4
https://twitter.com 3
http://www.promocionweb.com.mx 2
http://www.ofelio.com 2
https://si0.twimg.com 2
http://www.newsblur.com 1
http://mysyndicaat.com 1
http://apuntaweb.blogspot.mx 1
http://webcache.googleusercontent.com 1
http://www.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optimización del rendimiento web Optimización del rendimiento web Presentation Transcript

  • 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) - 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) - 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 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 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 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 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,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 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...)
  • TráficoConsultas de búsqueda (impresiones, clicks, páginas...)
  • 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”)
  • 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