Optimización del rendimiento web
-
Upload
roman-hernandez -
Category
Technology
-
view
24.493 -
download
1
description
Transcript of Optimización del rendimiento web
![Page 1: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/1.jpg)
![Page 2: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/2.jpg)
www.emezeta.comJosé Román Hernández - Manz
![Page 3: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/3.jpg)
OBJETIVOS PRINCIPALES
![Page 4: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/4.jpg)
Buena respuesta (página instantánea, sin retrasos)
![Page 5: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/5.jpg)
Servidor debe responder rápido (no esté ocupado)
![Page 6: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/6.jpg)
Reducir transferencias de datos (ahorra tiempo y dinero)
![Page 7: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/7.jpg)
Conseguir un buen posicionamiento en buscadores
![Page 8: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/8.jpg)
![Page 9: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/9.jpg)
Sin embargo, la realidad suele ser diferente.
![Page 10: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/10.jpg)
CONCEPTOS
![Page 11: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/11.jpg)
- Generalmente, usuarios mediante navegadores
Esquema básico
Cliente
www.emezeta.com
Web (HTML)
![Page 12: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/12.jpg)
Esquema básico
Cliente
www.emezeta.com
Web (HTML)
Crawlers
Karmacracy GoogleBot BingBot TwitterBot
![Page 13: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/13.jpg)
Esquema básico
Cliente
www.emezeta.com
Web (HTML)
Crawlers
Elementos dañinos
Karmacracy GoogleBot BingBot TwitterBot
Spammers Atacantes Harvester Piratas
![Page 14: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/14.jpg)
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
![Page 15: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/15.jpg)
- 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)
![Page 16: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/16.jpg)
- 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)
![Page 17: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/17.jpg)
- 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)
![Page 18: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/18.jpg)
- 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
![Page 19: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/19.jpg)
ESQUEMA CLIENTE-SERVIDOR
![Page 20: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/20.jpg)
- 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)
![Page 21: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/21.jpg)
- 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
![Page 22: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/22.jpg)
- Muy barato
- Overselling: Ofrecen más de lo que pueden
- Tus “vecinos” repercuten en tu sitio
Tipo de servidor
Servidor Compartido
SO
![Page 23: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/23.jpg)
- Estabilidad y rendimiento
- Acceso completo al sistema (incl. root)
- Más caros que los servidores compartidos
Tipo de servidor
Servidor VPS (Virtual-Dedicado)
SO
![Page 24: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/24.jpg)
- Máquina íntegra para nosotros
- No tenemos “vecinos”
- Suelen ser bastante caros
Tipo de servidor
Servidor Dedicado
SO
![Page 25: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/25.jpg)
- 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
![Page 26: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/26.jpg)
- El cliente pide una web al servidor
Esquema básico
Solicitud o petición
www.emezeta.com
Web (HTML)
![Page 27: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/27.jpg)
- El servidor devuelve la página pedida al cliente
Esquema básico
Respuesta
www.emezeta.com
Web (HTML)
![Page 28: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/28.jpg)
- 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
![Page 29: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/29.jpg)
- 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
![Page 30: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/30.jpg)
- 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
![Page 31: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/31.jpg)
- 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
![Page 32: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/32.jpg)
- 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
![Page 33: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/33.jpg)
- 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
![Page 34: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/34.jpg)
- 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
![Page 35: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/35.jpg)
- Extensión para Firefox (versión Lite para Chrome)
- Permite, entre otras cosas, analizar descarga de recursos
Análisis de recursos
getfirebug.com
![Page 36: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/36.jpg)
- Modalidad de análisis desde web externa
- Ideal si nuestra conexión es lenta
Análisis de recursos
tools.pingdom.com/fpt
![Page 37: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/37.jpg)
Análisis de recursos
developers.google.com/speed/pagespeed/insights
- Consejos ordenados por prioridades
![Page 38: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/38.jpg)
Análisis de recursos
tools.pingdom.com/fpt
www.webpagetest.org
![Page 39: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/39.jpg)
TECNOLOGÍAS
![Page 40: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/40.jpg)
- Información, datos, contenido.
- Bases de datos: MySQL, MariaDB, SQLite, MongoDB...
- Datos: Archivos XML, JSON...
Tecnologías
Contenido
![Page 41: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/41.jpg)
- Tecnología que “crea” el sitio
- Lenguajes: PHP, JSP, Python, Perl...
- Frameworks: Django, Ruby on rails, CakePHP...
Tecnologías
Motor
![Page 42: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/42.jpg)
- Estructura del sitio
- Lenguaje de etiquetado: HTML4, XHTML, HTML5...
- Un código válido ayuda en la compatibilidad
Tecnologías
Presentación (Estructura)
![Page 43: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/43.jpg)
Tecnologías
Presentación (Estructura)
validator.w3.org
![Page 44: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/44.jpg)
- Diseño, alineación y estilos
- Recursos de estilo: CSS, tipografías, imágenes...
Tecnologías
Presentación (Apariencia)
![Page 45: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/45.jpg)
- Interacción con el usuario (Javascript)
- Procedimientos desde el lado del cliente
- Frameworks Javascript: JQuery, Prototype...
Tecnologías
Presentación (Interactividad)
![Page 46: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/46.jpg)
- La petición de una URL, pasa por cada sección
- GET: Pedimos una URL específica
- POST: Enviamos datos (comentarios, formularios...)
Peticiones
Peticiones
![Page 47: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/47.jpg)
- 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)
![Page 48: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/48.jpg)
ESTRUCTURA
![Page 49: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/49.jpg)
Las cosas cambian
![Page 50: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/50.jpg)
- 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
![Page 51: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/51.jpg)
- 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
![Page 52: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/52.jpg)
- Cuerpo de la página (parte visible)
Recurso servido
<body>
Cabecera de servidor
Archivo HTML
<head> del HTML
<body> del HTML
![Page 53: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/53.jpg)
CONSEJOS
![Page 54: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/54.jpg)
- Evitar sensación de espera (latencia de carga)
Velocidad visual
5seg1seg 10seg
![Page 55: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/55.jpg)
- 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
![Page 56: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/56.jpg)
- 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
![Page 57: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/57.jpg)
SISTEMA DE CACHÉ
![Page 58: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/58.jpg)
Reduce:- Ancho de banda
- Carga del servidor
- Tiempo
Sistema de caché
PRIMER ACCESO
HTML CSS JSLOGO FONDO IMG1 IMG2
![Page 59: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/59.jpg)
Cache del navegador:
- Archivos con “tiempo de caducidad”
Sistema de caché
SEGUNDO ACCESO
HTML
CSS JSLOGO FONDO IMG1 IMG2
CACHE DEL NAVEGADOR
![Page 60: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/60.jpg)
- Expire
- Cache-control
- E-Tags
Caché por niveles
A nivel de cliente
![Page 61: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/61.jpg)
- HTML estático
- APC: Alternative PHP Cache
- Memcached: Caché en RAM
Caché por niveles
A nivel de servidor
![Page 62: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/62.jpg)
COMPRESIÓN
![Page 63: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/63.jpg)
- El servidor comprime los datos (antes de enviarlos)
Compresión al vuelo
mod_deflate
www.emezeta.com
50KB
![Page 64: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/64.jpg)
- 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
![Page 65: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/65.jpg)
- 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
![Page 66: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/66.jpg)
- 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
![Page 67: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/67.jpg)
- 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
![Page 68: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/68.jpg)
- 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
![Page 69: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/69.jpg)
IMÁGENES
![Page 70: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/70.jpg)
- 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
![Page 71: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/71.jpg)
- 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
![Page 72: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/72.jpg)
- 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
![Page 73: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/73.jpg)
- Dibujos “lisos”
- Bocetos, pocos colores
Imágenes
Imágenes sin pérdidas
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
![Page 74: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/74.jpg)
- Dibujos “lisos”
- Bocetos, pocos colores
Imágenes
Imágenes sin pérdidas
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
![Page 75: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/75.jpg)
- Imágenes en movimiento
Imágenes
Animaciones
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
![Page 76: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/76.jpg)
- Imágenes en movimiento
Imágenes
Animaciones
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
![Page 77: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/77.jpg)
- Imágenes escalables (útil para variar tamaño)
Imágenes
Imágenes vectoriales
IMÁGENESCON PÉRDIDAS
IMÁGENESSIN PÉRDIDAS ANIMACIONES VECTORIALES
![Page 78: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/78.jpg)
- 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
![Page 79: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/79.jpg)
- 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/
![Page 80: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/80.jpg)
Imágenes con peso considerable
Imágenes
Lazy Load (carga perezosa)
81KB
82KB
73KB
108KB
4,17MB
![Page 81: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/81.jpg)
Imágenes con peso considerable
Sólo se transfiere imagen de carga
Imágenes
Lazy Load (carga perezosa)
2KB
-
-
-
2KB
![Page 82: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/82.jpg)
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
![Page 83: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/83.jpg)
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
![Page 84: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/84.jpg)
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
![Page 85: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/85.jpg)
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
![Page 86: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/86.jpg)
REDUCCIÓN DE PETICIONES
![Page 87: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/87.jpg)
CSS Sprites
CSS sprites
Unir todas las imágenes en una sola
Ahorra número considerable de peticiones
![Page 88: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/88.jpg)
Imágenes en línea (Data URL)
data:image/png;base64,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
glkwAAAAAElFTkSuQmCC
![Page 89: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/89.jpg)
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
![Page 90: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/90.jpg)
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
![Page 91: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/91.jpg)
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
![Page 92: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/92.jpg)
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
![Page 93: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/93.jpg)
AUMENTAR RENDIMIENTO
![Page 94: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/94.jpg)
Contenido estático
Separar en subdominios
- Descargas paralelas (limitado a 2 en HTTP 1.1)
www.emezeta.com static.emezeta.com
![Page 95: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/95.jpg)
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)
![Page 96: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/96.jpg)
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
![Page 97: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/97.jpg)
1995 2004
Muy potente y extendido
Consume muchamemoria
Buen rendimiento y ligero
No compatible con algunas funciones
![Page 98: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/98.jpg)
- 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
![Page 99: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/99.jpg)
- 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
![Page 100: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/100.jpg)
www.google.com/webmasters/tools
![Page 101: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/101.jpg)
Añadir sitios
![Page 102: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/102.jpg)
1. Usando Google Analytics
2. Usando un archivo html
3. Etiqueta meta en <head>
4. Proveedor DNS
Proceso de verificación
![Page 103: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/103.jpg)
Se puede orientar una web a un país concreto
Mejora el posicionamiento para ese país
Empeora el posicionamiento para otros
Configuración
![Page 104: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/104.jpg)
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
![Page 105: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/105.jpg)
Especificar parámetros URL representativos(medidores, campañas, etc...)
Configuración
![Page 106: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/106.jpg)
Problemas de rastreo(útil: errores de servidor o de acceso)
Salud
![Page 107: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/107.jpg)
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
![Page 108: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/108.jpg)
Robots.txt
Sugerencias para robots: «Esto NO se mira»
User-agent: GooglebotDisallow: /pagina/*
![Page 109: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/109.jpg)
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
![Page 110: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/110.jpg)
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
![Page 111: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/111.jpg)
Estado y funcionamiento del robots.txt
Salud
![Page 112: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/112.jpg)
Consultas de búsqueda (impresiones, clicks, páginas...)
Tráfico
![Page 113: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/113.jpg)
Consultas de búsqueda (impresiones, clicks, páginas...)
Tráfico
![Page 114: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/114.jpg)
Tráfico
Consultas de búsqueda (impresiones, clicks, páginas...)
![Page 115: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/115.jpg)
Actividad de +1 (Google Plus)
![Page 116: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/116.jpg)
Listado (XML) con todos los recursos de tu web
Sitemap.xml: Artículos Imgmap.xml: Imágenes
Mapas de sitio (Sitemaps)
![Page 117: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/117.jpg)
Mapas de sitio (Sitemaps)
![Page 118: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/118.jpg)
Consejos para mejorar indexación (posicionamiento)
Descripción (meta):
- Duplicada- Demasiado larga
- Demasiado corta
Título:
- Ausente
- Duplicado
- Demasiado largo
- Demasiado corto- No informativo
![Page 119: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/119.jpg)
Google Webmaster Tools (Otros)
- Sistema de mensajes
- Detección de malware
- Eliminar URL de Google
![Page 120: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/120.jpg)
www.google.com/webmasters/tools
www.bing.com/toolbox/webmaster
![Page 121: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/121.jpg)
CDN: RED DE DISTRIBUCIÓN DE CONTENIDOS
![Page 122: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/122.jpg)
CDN: Red de distribución de contenidos
Servidores en EEUU (peticiones más lentas)
![Page 123: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/123.jpg)
CDN: Red de distribución de contenidos
Servidores en España (peticiones más rápidas)
![Page 124: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/124.jpg)
www.cloudflare.com
![Page 125: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/125.jpg)
CDN: Red de distribución de contenidos
Servidores más cercanos distribuyen copias (muy rápido)
![Page 126: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/126.jpg)
CDN: Red de distribución de contenidos
Actualmente: 14 Data Centers en todo el mundo
![Page 127: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/127.jpg)
Esquema con CDN Cloudflare
Solicitud o petición con un CDN
www.emezeta.com
Web (HTML)Static resources
![Page 128: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/128.jpg)
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
![Page 129: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/129.jpg)
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
![Page 130: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/130.jpg)
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
![Page 131: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/131.jpg)
Activar los dominios que pasarán antes por el CDN
Prerequisitos para Cloudflare
Redirección de DNS hacia Cloudflare
![Page 132: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/132.jpg)
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
![Page 133: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/133.jpg)
- Tráfico de usuarios
- Crawlers y robots
- Amenazas y ataques
Información analítica
Informes del tráfico recibido
![Page 134: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/134.jpg)
- 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)
![Page 135: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/135.jpg)
Información analítica
Ahorro de peticiones y transferencia
- Peticiones: 28 mill. 2 mill (93% menos)
- Transferencia: 431GB 103GB (76% menos)
![Page 136: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/136.jpg)
Información analítica
Peticiones de robots de buscadores
- Actividad recibida de los crawlers de buscadores
![Page 137: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/137.jpg)
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
![Page 138: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/138.jpg)
Cloudflare: Apps
Apps externas
- Multitud de apps externas complementarias
![Page 139: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/139.jpg)
Cloudflare: Apps
Apps externas
- Multitud de apps externas complementarias
Protección contra scrapping
![Page 140: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/140.jpg)
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
![Page 141: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/141.jpg)
Planes de Cloudflare
Planes
- Gratuito: CDN, seguridad básica, panel de control, etc...
- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
![Page 142: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/142.jpg)
Planes de Cloudflare
Planes
- Gratuito: CDN, seguridad básica, panel de control, etc...
- Premium: Muchas mejoras (Ej: Railgun, cachear lo “incacheable”)
![Page 143: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/143.jpg)
RONDA DE PREGUNTAS
![Page 144: Optimización del rendimiento web](https://reader035.fdocuments.es/reader035/viewer/2022062220/557bbe51d8b42a525b8b5151/html5/thumbnails/144.jpg)
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