Post on 13-Jun-2015
description
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
Karmacracy GoogleBot BingBot TwitterBot
Spammers Atacantes Harvester Piratas
Esquema básico
Cliente
www.emezeta.com
Web (HTML)
Crawlers
Elementos dañinos
Navegadores
Karmacracy GoogleBot BingBot TwitterBot
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)
- 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.
dns connect sslsend wait receive
- 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
dns connect sslsend wait receive
- 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
dns connect sslsend wait receive
- El servidor envía los datos al cliente
- Se envía la cabecera y datos solicitados
Esquema avanzado
Recepción
Toma index.html
dns connect sslsend wait receive
- 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
dns connect sslsend wait receive
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
Análisis de recursos
tools.pingdom.com/fpt
Análisis de recursos
developers.google.com/speed/pagespeed/insights
- Consejos ordenados por prioridades
Análisis de recursos
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
Cabecera de servidor
Archivo HTML
- Título del documento
- Codificación del documento
- Enlace a archivos externos (CSS, JS...)
Recurso servido
<head>
Cabecera de servidor
Archivo HTML
<head> del HTML
- Cuerpo de la página (parte visible)
Recurso servido
<body>
Cabecera de servidor
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
- El servidor comprime los datos (antes de enviarlos)
- Los datos viajan por la red (comprimidos)
Compresión al vuelo
mod_deflate
www.emezeta.com
Compressed HTML
50KB9KB
- 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
mod_deflate
www.emezeta.com
Compressed HTML
50KB9KB50KB
- 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
mod_deflate
www.emezeta.com
Compressed HTML
50KB9KB50KB
95KB200 hits 19MB
- 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
mod_deflate
www.emezeta.com
Compressed HTML
50KB9KB50KB
95KB200 hits 19MB
23KB200 hits 4,6MB
- 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
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
- 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
- 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ÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
- Dibujos “lisos”
- Bocetos, pocos colores
Imágenes
Imágenes sin pérdidas
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
- Imágenes en movimiento
Imágenes
Animaciones
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
- Imágenes en movimiento
Imágenes
Animaciones
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
- Imágenes escalables (útil para variar tamaño)
Imágenes
Imágenes vectoriales
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
- Imágenes escalables (útil para variar tamaño)
Imágenes
Imágenes vectoriales
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
Formato SVG
- Imágenes escalables (útil para variar tamaño)
Imágenes
Imágenes vectoriales
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
luci.criosweb.ro/riot/
Imágenes con peso considerable
Imágenes
Lazy Load (carga perezosa)
81KB
82KB
73KB
108KB
4,17MB
Imágenes con peso considerable
Sólo se transfiere imagen de carga
Imágenes
Lazy Load (carga perezosa)
2KB
-
-
-
2KB
Imágenes con peso considerable
Sólo se transfiere imagen de carga
A medida que desplaza el usuario
se cargan las imágenes
Imágenes
Lazy Load (carga perezosa)
81KB
82KB
-
-
165KB
Imágenes con peso considerable
Sólo se transfiere imagen de carga
A medida que desplaza el usuario
se cargan las imágenes
Imágenes
Lazy Load (carga perezosa)
81KB
82KB
73KB
-
238KB
Imágenes con peso considerable
Sólo se transfiere imagen de carga
A medida que desplaza el usuario
se cargan las imágenes
Ahorra tiempo y transferencia
Imágenes
Lazy Load (carga perezosa)
81KB
82KB
73KB
108KB
346KB
Imágenes con peso considerable
Sólo se transfiere imagen de carga
A medida que desplaza el usuario
se cargan las imágenes
Imágenes
Lazy Load (carga perezosa)
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
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
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
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
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)
www.emezeta.com static.emezeta.com
- 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)
www.emezeta.com static.emezeta.com
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
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)
CDN: Red de distribución de contenidos
Servidores en España (peticiones más rápidas)
www.cloudflare.com
CDN: Red de distribución de contenidos
Servidores más cercanos distribuyen copias (muy rápido)
CDN: Red de distribución de contenidos
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)
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)
Ahorro de transferencia y CPU para el servidor final
Esquema con CDN Cloudflare
Solicitud o petición con un CDN
www.emezeta.com
Web (HTML)Static resources Static resources
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)
Esquema con CDN Cloudflare
Solicitud o petición con un CDN
www.emezeta.com
Web (HTML)Static resources
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
Información analítica
Ejemplo de Emezeta.com (4 May al 4 Jun)
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
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”)
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